vue学习笔记10——Vue-directive 自定义指令

1. 全局API的概念
全局API并不在构造器里边，而是先声明全局变量或直接在vue上定义一些新的功能，vue内置了一些全局API，比如Vue.directive。简单说是在构造器外部用Vue提供给我们的API函数来定义新的功能。以下是Vue的全局API

• Vue.extend
• Vue.nextTick
• Vue.set
• Vue.delete
• vue.directive
• Vue.filter
• Vue.component
• Vue.use
• Vue.mixin
• Vue.compile
• Vue.version

2. 复习一下构造器的概念

var app = new Vue({
    el : '#app',
    data : {
        count : 1
    }
})

这就是一个构造器，而全局API写在这种构造器的外面
3. Vue-directive 自定义指令：注册或获取全局指令

<div id="app">
    <div v-fjw="color">{{num}}</div>
    <button v-on:click="add">add</button>
    <button onclick="unbind()">解绑</button>
</div>

Vue.directive("fjw",function(el,binding){// 两个参数，自定义指令的名称，所对应的方法。方法中有三个参数，el,binding,vnode
    console.log(el);    // el代表当前绑定的元素
    console.log(binding);// binding是一个对象，有name,value,等属性    
    console.log(binding.name);// 自定义指令的名称
    console.log(binding.value);// 自定义指令对应的值，存在于data中
    el.style = "color:" + binding.value;
});
var app = new Vue({
    el : '#app',
    data : {
        num : 10,
        color : 'red'
    },
    methods : {
        add : function(){
            this.num++;
        }
    }
})

4. 自定义指令有5个声明周期（也叫钩子函数）

• bind 只调用一次，指令第一次绑定到元素时调用
• inserted 被绑定元素插入到父节点时调用（父节点存在即可调用，不必存在于document中）
• update 被绑定的元素所在的模板更新时调用，而无论绑定值是否变化，通过比较更新前后的绑定值，可以忽略不必要的模板更新
• componentUpdated 被绑定元素所在模板完成一次更新周期时调用
• unbind 指令与元素解除绑定时，只调用一次

// 解绑
function unbind(){
    app.$destroy();
}
Vue.directive("fjw",{
    bind:function(el,binding){
        console.log('1-bind');
        el.style = "color:" + binding.value;
    },
    inserted:function(){
        console.log("2-inserted");
    },
    update:function(){
        console.log("3-update");
    },
    componentUpdated:function(){
        console.log("4-componentUpdated");
    },
    unbind:function(){
        console.log("5-unbind");
    }
})

5. 自定义指令和组件区别
自定义指令Vue.drective定义的是标签属性，组件定义的是标签