Vue指令及自定义指令

Vue常见的指令：

v-for 、 v-if 、v-bind、v-on、v-show、v-else
v-for：循环判断指令，常于key绑定一起写，key的作用主要是为了高效的更新虚拟DOM。
v-if 和 v-else：条件判断指令。
v-show ：显示指令
v-bind:主要用于属性绑定，缩写为 ：。
v-on：它是来绑定事件监听器,这样我们就可以做一些交互了，缩写为：@。

v-if 和v-show的区别：
二者都可以用来显示一个块的东西，
v-if 拥有更高的切换消耗，并且当条件不存在时，其元素是真的消失了，display：none。
v-show 拥有更高的初始渲染消耗，当条件不存在时，其元素是显示隐藏，其内容还在。

常见的指令大概就这么些吧，下面介绍自定义指令。

自定义指令：

Vue中自定义指令是通过directive命令来定义的。

其定义方式有两种，一种是Vue.directive(‘xxx’, function(el, bind, vNode){})，其中el为dom，vNode为vue的虚拟dom，bind为一较复杂对象，包含指令很多信息。

第二种就是下面代码块所示：

Vue.directive('指令名称', {
  bind: function () {
  },
  inserted: function () {
  },
  update: function () {
  },
  componentUpdated: function () {
  },
  unbind: function () {
  }
})

自定义指令的生命周期

自定义指令有5个生命周期，分别是bind，inserted，update，componentUpdate，unbind。

• bind：只调用一次，指令第一次绑定到元素时候调用，定义一个绑定时只执行一次的初始化动作。
• inserted：被绑定元素插入父节点的时候调用（父节点存在即可调用，不必存在document中）
• update：被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化；通过比较更新前后的绑定值，忽略不必要的模板更新。
• componentUpdate：被绑定元素所在模板完成一次更新周期的时候调用。
• unbind：只调用一次，指令与元素解绑的时候调用。

div id="app">
    <input type="text" v-model="msg" v-focus v-color>
    <!--<input v-focus type="text">-->
    <h2>{{msg}}</h2>
</div>

<script>
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    })
    // 注册一个全局自定义指令 `v-color`
    Vue.directive('color',{
        bind:function (el) {
            el.style.color = 'red';
        }
    })

    var vm = new Vue({
        el: '#app',
        data: {
            msg:'Hello World!'
        },
        methods: {}
    });