指令:
文字插入指令，以及防止資料未返回之前的閃爍
(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;
   } );