vue的全局指令

vue有四个全局指令：directive、extent、set、component

directive:自定义指令

//写一个改变颜色的指令
Vue.directive('amie',function(el,binding,vnode){
        el.style='color:'+binding.value;
});

//HTML
<div v-amie="'red'"></div>

可以看出其实指令的实际是操作dom元素，第一个参数就是element,第二个是参数是传给指令的值，第三个。。。。

extent:作用和组件差不多,但是每次挂载都要new一次在$mount挂载(可以挂载到实例范围以外的地方)，不像组件那样可以多次复用不需要new

var authorExtend = Vue.extend({
    template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",
    data(){
    　　return{
          authorName:'amie',
          authorUrl:'http://www.qq.com'
       }
    }
});
//挂载
new authorExtend().$mount('.author');

//HTML
<div class="author"></div>

set:改变Vue实例data的值

Vue.set(dataObj,'count',4);

一般我们会用 vm.data1 = 123 这样来修改，这样没问题

但是修改的数据是Object类型的属性值，Vue是检测不了变化的（这是受限于js的内部机制）

例如：vm.dataObj.count = 4来改变值，Vue检测不了dataObj.count的变化从而没办法在dom更新

这个时候用set就可以告诉Vue改变了data中dataObj的count属性

component:定义全局组件，在任意Vue实例内都可以使用

Vue.component('zhangamie',{
    template: `<div>
           {{ name }}
    </div>`,
    data() { 
        return {
            name: '小咩咩'
        }
    }
})

mixin:全局混入选项（混入的选项和原来的并存）

Vue.mixin({
    data() {
        return {
            newData: 999
        }
    }
})

以后所有新建的Vue实例都会在它们的data里面混进这个newData，但是如果这个newData在实例中再次被定义，会被实例中的data覆盖

先后顺序是：全局的mixin-->局部-->原生的mixin,顺序后的会覆盖顺序前的（覆盖只会覆盖选项内部的值，不会覆盖整个选项）

vue的全局指令

推荐阅读