随笔分类 - Vue
全局事件总线（GlobalEventBus）
摘要：全局事件总线（GlobalEventBus） 一种组件间通信的方式，适用于 任意组件间通信 安装全局事件总线 new Vue({ ..... beforCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm } }) 使用事件总线：
组件的自定义事件（通信 父子）
摘要：组件的自定义事件 一种组件间通信的方式，适用于：子组件 > 父组件 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。 绑定自定义事件： 第一种方式：在父组件中：<Demo @pareven="test"/> 第二种方式：在父组件中： <Demo
总结Vue基础开发流程
摘要：总结基础案例部分开发流程 1. 组件化编码流程 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用。 一个组件在用：放在组件自身即可。 一些组件在用：放在他们共同的父组件上（状态提升）。 实现交互：从绑定事件开始
插件（plugins）
摘要：插件（plugins） 功能：用于增强Vue 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个参数是插件使用者传递的数据。 定义插件：对象.install = function(Vue, option) { Vue.filter(...) ...} const pl
mixin（混入）
摘要：mixin(混入) 功能：可以把多个组件共用的配置提取成一个混入对象 使用方式： 第一步定义混合，例如： { data() {....}, methods: {....}, .... } 第二步使用混合，例如： 全局混入：Vue.mixin(xxx) 局部混入：Vue.mixin['xxx'] 注：
配置项props
摘要：配置项 props 功能：让组件接受外部传过来的数据。 传递数据： <Demo name="码农权"/> 接受数据： 第一种方式（只接受）： props: ['name'] 第二种方式（限制类型） props: { name: String } 第三种方式（限制类型、限制必要性、指定默认值） pro
ref属性
摘要：ref属性 被用来给元素或子组件注册的引用信息（id的替代者） 应用在 html 标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc） 使用方式： 打标识：<h1 ref="xxx">....</h1> 或 <组件标签 ref="xxx"></组件标签> 获取：this.$refs.
关于不同版本的Vue
摘要：关于不同版本的Vue vue.js与vue.runtime.xxx.js 的区别 vue.js是完整版的Vue，包含：核心功能+模板解析器 vue.runtime.xxx.js是运行版的Vue 因为Vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用ren
VueComponent构造函数
摘要：关于VueComponent 假设有一个school组件 school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。 我们只需要写<school>或<school></school>,Vue解析时会帮我们创建school组件的实例对象，即Vu
Vue非单文件组件
摘要：组件 组件的定义：实现局部功能效果的代码集合。（好维护、依赖关系不混乱、复用高） 单文件组件（.vue）与非单文件组件（.html） 单文件组件：一个文件中只包含1个组件。 非单文件组件：一个文件中包含n个组件。 在非单文件组件中创建组件 局部组件 <div id="root"> <!-- 编写组件
vue生命周期
摘要：生命周期 又名：生命周期回调函数、生命周期函数、生命周期钩子。 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。 举个例子 Person和vm的一生 张三的一生（张三的生命周期） 将要出生 呱呱坠地 ==> 检查身体各项指
自定义指令总结
摘要：Vue自定义指令总结： 1、定于语法 （1）局部指令 new Vue({ //directives: {指令名：配置对象} 指令: { bind() {}, inserted() {}, updata() {} } }) //或简写 简写该回调融合了两个钩子回调 //bind与update 即指令与
Vue模板语法
摘要：Vue模板语法有2大类 1、插值语法： 功能：用于解析标签体内容。 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。 2、指令语法 功能：用于解析标签（包括：标签属性，标签体内容、绑定事件） v-bind、v-on等
v-cloak、v-once、v-pre
摘要：v-cloak指令（没有值） 1、本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。 2、使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。 v-once指令 1、v-once所在节点在初次动态渲染后，就视为静态内容了。 2、以后数据的改变不会引
v-html指令
摘要：v-html指令： 作用：向指定节点中渲染包含html结构的内容。 与插值语法的区别 （1）v-html会替换掉节点中的所有内容，{{xxx}}则不会 （2）v-html可以识别html结构。 严重注意：v-html有安全问题！！！ （1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
Vue过滤器
摘要：过滤器 定义：对要显示的数据进行特定格式化后再展示（适用于一些简单逻辑的处理） 语法 全局↓ 局部↓ （1）注册过滤器：Vue.filter(name, callback) 或 new Vue({ fliters: {}}) （2）使用过滤器：{{ xxx | 过滤器名称}} 或 v-bind:属性
Vue收集表单数据
摘要：收集表单数据： 若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。 若：<input type="radio"/>，则v-mode收集的是value值，且要给标签配置value值。 若：<input type="checkbox"/> 1
Vue监视数据的原理
摘要：1、Vue会监视data中所有层次的数据。 2、如何监测对象中的数据？ 通过setter实现监视，且要在new Vue时就传入要检测的数据 （1）对象中后追加的属性，Vue默认不做响应式。 （2）如需给后添加的属性做响应式，要使用如下API Vue.set(target, propertyName/
