vue2.0 指令，自定义指令

指令:
文本插入指令，以及防止数据未返回之前的闪烁
(1) v-text
(2) v-html
(3) v-cloak  防止块闪烁
(4) v-once   被包含的变量，仅仅只刷新一次
<div v-cloak v-once>
    <div>{{ textContent }}</div>
    <div>{{{ htmlCotnent }}}</div>
</div>




变量绑定，方法
(3) v-bind 绑定变量; 简写为:
(4) v-on   绑定方法；简写为@
(5) v-model 表单控件的单向绑定；默认value, checked,selected无效；但是当select,checkbox为多个时，需要value进行辅助。且v-model绑定的变量为数组；


(6) v-ref  如同id，使用v-ref绑定一个唯一名称之后，就可以使用this.$refs.refName来获取dom；






(8) v-if/v-else/v-show
(9) v-for
(10) v-pre








自定义指令 (操作dom，以及children)


（1）语法:
    Vue.directive( id, definition );


    全局注册:
Vue.directive( ‘global-directive’, { … } );
var comp = Vue.extend({
   directives: {
‘localDirective’: {} //可以采用驼峰命名
   }
});




 (2) 第二个参数对象：
    生命周期:
    (2.1) bind(){}  
          只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时指定一次的初始化操作。
    (2.2) inserted(){}
 被绑定元素插入父节点时调用。父节点存在即可调用，不必存在于document中。 
    (2.3) update(){}
 指令在bind之后以初始值为参数进行第一次调用，之后每次当绑定值发生变化时调用。update接受到的参数为newValue. oldValue.
    (2.4) componentUpdated(){}
 被绑定元素所在模板完成一次更新周期时调用。
    (2.5) unbind(){}
 只调用一次，指令与元素解绑时使用。

    <div v-if=“isExist” v-my-directive=“param”></div>
    Vue.directive( ’my-directive’, {


bind: function(){
   console.log( ‘bind’, arguments );
},

update: function( newValue, oldValue ){

  console.log( ’update’, newValue, oldValue );
},


unbind: function(){
  console.log( ‘unbind’, arguments );
}
    } );


   
   关于钩子函数的相关参数:
    (1) el： 指令所绑定的元素，可以用来直接操作dom， 相当于this.$refs.refName.
    (2) binding: 一个对象，有一下属性:
 name:  指令名字，不包括v-前缀;
 value: 指令的绑定值；
 oldValue: 指令绑定的前一个值,仅仅在update,componentUpdated钩子中可用。
 expression: 绑定值的字符串形式。
 arg:传递给指令的参数。 如v-my-directive:foo, arg的值就是”foo”
 modifiers： 一个包含修饰符的对象. 如v-my-directive.foo.bar 修饰符对象modifiers的值是
{ foo:ture, bar: true }
    (3) vnode: Vue编译生成的虚拟节点.
    (4) oldVnode: 上一个虚拟节点，仅仅在update和componentUpdated钩子中可用。
    
   举例:
    <div id=“example”>
        <div id=“demo” v-demo=“{color: ‘white’, text: ‘hello!’}”></div>
    </div>
    <script>
Vue.directive( ‘demo’, function( value ){
   console.info( value.color );
   console.info( value.text );
} );
var demo = new Vue({
    el : ‘#demo’
});
    </script>


   简单指令的自定义:
   <div id=“app”>
<div v-lang=“color”>{{num}}</div>
<p><button @click=“add”>add</button></p>
   </div>
   Vue.directive( ‘lang’, function( el, binding ){

console.log( el );
console.log( binding );
        el.style=‘color:’+binding.value;
   } );