vue todolist
最近初学vue，做最简单的todolist<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>todolist</title> <style type="text/css"> #container{ width: 700px; height: 100px; padding: 40px; margin: 0 auto; } li{ list-style: none; } .close-bt...
2024-01-10
vue slot+传参
插槽分为默认插槽和具名插槽：默认插槽： //父组件<div> <h3>父组件</h3> <testChild> <div>默认插槽</div> </testChild></div>//子组件<div> <h4>子组件</h4> <slot></slot></div>具名插槽： 注意：具名插槽需要包裹在 template 标签中，否则会报错//父组件<div> <h3>父组件</h3> <tes...
2024-01-10
vue中slot的笔记
一言以蔽之：本来写在子组件里边的内容默认是不显示的，如果想相对于子组件在哪里进行显示，则使用slot标签代表占位符，代替那部分内容，是行间元素还是块级元素取决于原先的那个标签。参考的连接是：https://blog.csdn.net/sinat_17775997/article/details/52484072...
2024-01-10
vue-devtools下载与使用
网盘地址提取码：ty1m如果地址过期了，可以到csdn下载：csdn地址1.安装我们打开chrome的扩展程序，讲刚下载的文件拖进去，就可以安装了。2.更改一些配置首先打开chrome的开发者模式，然后允许vue-devtool在隐身模式使用，和允许访问网址。改好之后，还需要修改插件的一个配置，找到插件的安装目...
2024-01-10
Vue-Devtools安装配置教程
最简便的方法是用FQ来通过google应用商店进行安装，但是大多数人还是处在非FQ的状态尝试过安装Node的方法来安装，但是极其不建议用这个方法安装，非常麻烦，而且必须要有node的基础，非常不接地气下面来一个最简便的方法（送给伸手党）：查看过很多博客大多数都是，要安装Vue-Devtools，在一个git...
2024-01-10
vue的slot的使用问题
根据官方文档来说，有三种使用方式https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容单个插槽 https://github.com/Sinosaurus/blogs/blob/master/example/slot01.html具名插槽 https://github.com/Sinosaurus/blogs/blob/master/example/slot02.html作用域插槽 https://github.com/Sinosaurus/blogs/...
2024-01-10
vue中插槽slot的使用
一、什么是插槽官方解释：Vue 实现了一套内容分发的 API，将 <slot> 元素作为承载分发内容的出口。大白话：插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。二、基...
2024-01-10
vue中的slot与slot-scope
实际上，插槽的概念很简单，下面通过分三部分来讲。这个部分也是按照vue说明文档的顺序来写的。进入三部分之前，先让还没接触过插槽的同学对什么是插槽有一个简单的概念：插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。 实际上，一个slot最核心...
2024-01-10
玩转vue的slot内容分发
vue的内容分发非常适合“固定部分+动态部分”的组件的场景，固定部分可以是结构固定，也可以是逻辑固定，比如下拉loading，下拉loading只是中间内容是动态的，而拉到底部都会触发拉取更多内容的操作，因此我们可以把下拉loading做成一个有slot的插件。单个Slot在children这个标签里面放Dom，Vue不会理...
2024-01-10
Vue内容分发slot
前面的话 为了让组件可以组合，需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” )。Vue实现了一个内容分发 API，参照了当前 Web 组件规范草案，使用特殊的 <slot> 元素作为原始内容的插槽。本文将详细介绍Vue内容分发slot编译作用域 在深...
2024-01-10
vue实现留言板todolist功能
通过前面两篇文章的的学习，我们掌握了vue的基本用法. 本文，就利用这些基础知识来实现一个留言板， 老外把他称之为todolist.第一步、使用bootstrap做好布局<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="lib/bootstrap.min.css"/> <script src="lib/jquery-1.7.2.js"></...
2024-01-10
vuejs之Vue Devtools
Vue Devtools大法好这是一篇小白friendly教程Vue Devtools是一款谷歌浏览器插件，专门为调试vue而设计。假设你做了一个vue应用，当你在调试的过程中，打开的控制台是这样的：满眼都是data-v的这种标签，你的组件在什么位置，可能要一个一个标签点开之后找，你的应用的数据是什么状态，可能要靠console打...
2024-01-10
关于vue.js中slot的理解
slot这块看官网文档，起初有点不懂，仔细研究还是最终理解了，slot是用来干嘛的呢，先看下一个例子：<script src="https://unpkg.com/vue/dist/vue.js"></script><div > <children> <span>我是父组件放在自组件中的，没有slot我不会显示</span> </children> </div> ...var vm = new Vue({ el: '#app', co...
2024-01-10
vue 的 solt 子组件过滤
如上图：1、定义了一个类似下拉的组件 mySelect ， 然后里面有自定义的组件 myOptions2、有很多时候，我们希望， mySelect 组件内部的子组件，只能是 myOptions 。 不应该有 <div>666</div>3、在mySelect 里面做一层过滤，去掉不需要的组件下面先看看myOptions.vue 组件代码<template> <div class="options"> <div>这里...
2024-01-10
使用slot-scope复制vue中slot内容
有时候我们的vue组件需要复制使用者传递的内容。比如我们工程里面的轮播组件需要使用复制的slot来达到循环滚动的效果使用者关注轮播内容的静态效果，组件负责让其滚动起来组件:<div class="horse-lamp"> <div class="lamp"> <slot name="lamps"></slot> </div> <div class="lamp"> ...
2024-01-10
vue---splitpane分割
首先安装：npm install vue-splitpane引入使用：import splitPane from 'vue-splitpane'Vue.component('split-pane', splitPane);分割成两列<split-pane v-on:resize="resize" :min-percent='20' :default-percent='30' split="vertical"> <template slot="paneL"> A </template> <temp...
2024-01-10vue实现ToDoList简单实例
一、需求与准备1、准备 使用bootstrap实现页面的基础样式（依赖jquery），使用vue实现功能需要 2、功能需求1）、表单实现输入任务清单后加入到展示项中 2）、点击删除按钮弹出警告框询问是否删除（bootstarp模态框插件） 3)、确定删除时，删除对应项（单项删除，全部删除） 4）、任务列表为空时...
2024-01-10
Vue.observable
1.介绍：如果项目不是足够大的话，为避免代码繁琐冗余，最好不要使用它。Vue.observable 是vue2.6版本新增的，可以实现一些简单的跨组件数据状态共享// 创建store目录，store目录下创建index.jsimport Vue from 'vue'export const store = Vue.observable({ count: 0, name: '李四'})export const mutations = { setCount (count) { st...
2024-01-10
在vue 中使用Stylus
概述什么是StylusStylus是一个CSS预处理器。什么是CSS预处理器关于CSS预处理器，推荐先行阅读这篇文章：为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus现在你应该对CSS预处理器有个大概的认识了，总的来说，CSS预处理器为CSS提供了更多的更加灵活的可编程性，是不是很棒！选型那么...
2024-01-10
【前端】使用vue的slot传递问题
目录结构: 需求: 编写一个table组件(类似iview的table),table-body组件中需要做个树形展示功能,其中一种实现是想通过在table-body设置slot标签,让用户直接在app的table标签里面写上相应代码就可以展示相应内容,预览图: 问题: 这是app的HTML代码(swTable就是table组件):table-body 代码: 这中间隔着一个table.vue,请问怎么...
2024-01-10Vue作用域插槽slot-scope实例代码
vue中的插槽有三种：单个插槽、具名插槽、作用域插槽，这个在官网上能看到（https://cn.vuejs.org/v2/guide/components.html#单个插槽）作用域插槽简单来说就是父组件只管显示样式，数据由子组件来提供。比如上面的代码，el-table-column内的template是传递给其内部solt的显示内容，但是scope的值是由el-table-column内...
2024-01-10
vue-cli修改小图标（shortcut）
1、首先修改build文件夹下webpack.dev.conf.js文件，在new HtmlWebpackPlugin下添加favicon字段（你的小图标），如下：new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, favicon: './src/assets/images/bitbug_favicon.ico' }),2、然后在根目录的index....
2024-01-10
关于vue slot组件以及v-slot指令的一些思考
前言本文只讨论vue2.6.x以上的版本。以前的API已经被depreciated，详见官方文档官方文档已经描述的足够清晰和简单，我只是通过用图例的方式加强印象开门见山vue的slot也就内容分发，仔细思考这个名字就不难发现，他是将父组件的内容分发到子组件中的多个<slot></slot>组件中。所以下图形象描述了...
2024-01-10
（转）vue＜slot＞插槽的使用方式
slot是父组件和子组件的通信方式，可以将父组件的类容显示到子组件当中。简单理解就是，在子组件内占坑，父组件坑。首先是单个插槽，单个插槽是vue的官方叫法，但是其实也可以叫它默认插槽，或者与具名插槽相对，我们可以叫它匿名插槽。因为它不用设置name属性。下面通过一个例子来展示匿名...
2024-01-10
一起学vue指令之v-html
一起学 vue指令 v-html 指令可看作标签属性某些情况下，我们点击百度搜索下一页，服务器应该就返回下一页的数据页面，包含其他资源链接等。返回的数据的本质是一个含HTML代码的字符串。以百度链接为例...
2024-01-10
