CSDN|查漏补缺！这份 VUE 学习知识总结请注意查收！

本文插图
作者 | 新鲜的橘子责编 | 王晓曼出品 | CSDN博客VUE实例的创建该实例中的内容将和和下面的例子相对应：var vm = new Vue({ el:'', data:{ msg:"我的信息", msg1:"<span>我是一个html</span>", mytitle:'title', list:[ {id:1,name:'zhangsan'}, {id:2,name:'lisi'}, {id:3,name:'wangmazi'}, ], obj:{ id:1, name:'orange', age;18 }, flag:'true'，style1:{ color:'pink', 'font-size':'30px' }, style2:{ font-family: monospace; } }, methods:{ click{} } ，filters:{ filter1:function(data){ //代码块 } }})基本指令 1.V-Cloak解决闪烁问题。闪烁问题原因使用插值表达式时若 VUE 还未加载完成则会直接将插值表达式当作文本内容显示。 <h1 v-cloak>{{ msg }}</h1>2.V-Text标签内部的文本会被 mag 变量的值所覆盖。 <h1 v-text="msg"></h1>v-html 当作 html 页面元素解析。如果 msg1 的值是一个 html 标签字符串，则会将其解析为 html 元素。 <h1 v-text>{{ msg1 }}</h1>3.V-bind绑定数据,可以简写成:<input type="button" value="http://news.hoteastday.com/a/btn" v-bind:title="mytitle">4.v-on绑定事件可以简写成@<input type="button" value="http://news.hoteastday.com/a/btn" v-on:click="click">5.v-for在组件中使用 v-for 循环或者在一些特殊情况中，如果 v-for 出现问题，则必须绑定唯一的 key （值为字符串或者数字）（1）迭代数组<ul> <li v-for="(item,index) in list" :key="item.id">index----{{ index }}--{{ item.id }}--{{ item.name }}</li><ul>（2）迭代对象<div v-for="(value,key,index) in obj">{{value}}----{{key}}----{{index}}</div>（3）迭代数字<p v-for="i in 10">这是第{{i}}个p标签</p>6.v-if如果 flag 为 false 则 dom 中不会出现这个 h1 标签。 <h1 v-if="flag">这是一个if控制的h1标签</h1>7.v-show如果 flag 为 false 则仅仅是将 h1 的 display 设置为 none 。 <h1 v-show="flag">这是一个if控制的h1标签</h1>如果页面中的 dom 元素需要频繁显示隐藏建议使用 v-show 指令。 8.v-model实现数据的双向绑定常应用于表单中,在下面这个表单输入值,msg 的数据发生改变同时p标签里面的内容也会同步渲染到页面中。 <input type='text' v-model='msg'><p>{{ msg }}</p>指令1、自定义指令VUE 中的指令都已v-开头2、自定义全局指令第一个参数为指令的名称，第二个参数为对象，在对象里有一些相关的钩子函数，在不同的阶段执行不同的钩子函数。

bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可定义一个在绑定时执行一次的初始画动作。
inserted:被绑定元素插入父节点时调用（父节点存在时即可调用，不必存在于document中）。。
update:所在组件的VNode更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但可通过比较更新后的值来忽略不必要的模板更新
componentUpdated:所在组件的 VNode 及其孩子的 VNode 全部更新时调用。
unbind:只调用一次，指令于元素解绑时调用。

3、钩子函数的参数(el, binding, vnode, oldVnode)钩子函数参数的解释：Vue.directive('focus',{ bind:function(el,binding){}, inserted:function{el.focus}, update:function{}})样式相关写在 bind 里面就行，于 js 行为相关的写在 inserted 里面防止其不生效，例如上面的获取焦点就写在了 inserted 中：Vue.directive('color',{ bind:function(el,binding){ el.style.color=binding.value },})使用定义好的 focus 指令和 color 指令：<input type="text" v-focus v-color="'red'">自定义私有指令：var vm2 = new Vue({ el:'', data:{}, directives:{ 'fontWeight':{ bind:function(el,binding){ el.style.fontWeight = binding.value } } }})<input type="text" v-focus v-fontWeight="'500'">函数简写大多数情况下可能只想在 bind 和 update 钩子函数上做重复的动作，不关心其他钩子函数可以简写为：Vue.directive('color-swatch',function(el,binding){ el.style.backgroundColor =binding.value })1、事件修饰符