1、vue指令的基本使用

v-cloak

//设置v-cloak样式，防止样式优先级被高级的样式覆盖掉，处理方式，添加 !important;

[v-cloak] {

display:none !important;

}

v-text 都能够解决 插值表达式闪烁的问题

<div>

<p>{{msg}}</p>

<p v-text="msg"></p>

</div>

v-text会覆盖元素原本的内容，但插值表达式只能替换表达式的占位符

若内容带html标签，则用v-html进行放入插值

 

v-bind绑定标签属性值（缩写 : ）

<input v-bind:title="msg"/>

 

v_on绑定事件（缩写为 @ ）

<input v-on:click="show"/>

 

v-for 循环

<p v-for="item in list">{{item.id}}</p>

<p v-for="(item,i) in list">{{i}}------------------{{item}}</p>

<p v-for="(val,key) in list">{{val}}------------------{{key}}</p>

<p v-for="(val,key,i) in list">{{val}}------------------{{key}}</p>

<p v-for="count in 10">{{count}}</p>循环十次

<!--key属性只能使用number获取string-->

<!--必须使用v-bind属性绑定-->

<!--在使用v-for时，尽量使用key，防止一些特殊情况的错误-->

<p v-for="item in list" :key="item.id">{{item.id}}</p>

 

 

v-if v-show是标签隐藏或显示

v-if特点，每次都不重新删除或创建元素

有较高的切换性能的消耗

v-show，每次不会重新进行DOM的删除或创建，只是切换display:none的样式

有较高的初始渲染消耗

 

 

自定义指令

参数1：指令名称，在使用是需要用V-指令名称指名指令

参数2：

<input type="text" v-focus>

<input type="text" v-focus="传参(对象，binding)">

Vue.directive('focus',){

bind:function(el,binding){//只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置

 

},

inserted:function(el){//被绑定元素插入父节点时调用

el.focus();

},

update:function(el){//所在组件的 VNode 更新时调用

}

}

指令钩子函数会被传入以下参数：

• el：指令所绑定的元素，可以用来直接操作 DOM 。
• binding：一个对象，包含以下属性：

• • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

 

 

自定义私有指令

Vue vm2=new Vue({

   directives:{

     focus:function(el,binding){

     }

  }

})

在 bind 和 update 时触发相同行为，而不关心其它的钩子。可以简写

Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value })