Vue-基础(四)

/*不带参数的自定义指令*/
/*获取元素焦点*/
Vue.directive(‘focus‘,{     //‘focus‘定义名称
    inserted:function(el){  //inserted：钩子函数，被绑定元素插入父节点时调用；el：表示指令所绑定的元素
        el.focus();
    }
})
/*自定义指令的使用*/
<input type="text" v-focus>

/*带参数的自定义指令*/
/*改变元素背景色*/
Vue.directive(‘color‘,{
　　inserted:function(el,binding){
　　　　el.style.backgroundColor=binding.value.color;
　　}
})
/*使用*/
<input type="text" v-color="{color:‘orange‘}">  //第一种
<input type="text" v-color="msg">  Vue实例中：data：{color:‘orange‘}  //第二种

/*自定义指令：获取焦点元素和改变背景颜色*/
directives:{
    focus:{
        inserted:function(el){
            el.focus();
        }
    },
    color:{
        inserted:function(el,binding){
                el.style.background = binding.value.color;
        }
    }
}

/*在实例中计算属性的用法*/
var vm = new Vue({
    computed:{
        reverseMsg:function(){
                return this.msg.split(‘‘).reverse().join(‘‘);
        }
    }
})

/*在实例中侦听器的用法*/
/*改变两个值的前后顺序，在数据发生变化时数值也能立即改变*/
/*firstName：第一个的值、lastName：第二个的值、fullName：两个按顺序排放后的值*/
var vm = new Vue({
    data:{
        firstName:‘xxx‘,
        lastName:‘aaa‘,
        fullName:‘xxx aaa‘
    },
    watch:{
        firstName:function(val){//val为变化之后的值
            this.fullName = val + ‘ ‘ + this.lastName;
        }，
        lastName:function(val){
            this.fullName = this.firstName + ‘ ‘ + val;
        }
    }
})

computed:function(){
    return this.firstName + ‘ ‘ + this.lastName;
}

/*自定义过滤器*/
/*全局指令*/
Vue.filter(‘过滤器名称‘,function(value){
    //业务逻辑
　　return //返回值 ;
})
/*局部指令(实例内)*/
filters:{
　　过滤器名称:function(value){
　　　　//业务逻辑
　　　　return //返回值
　　}
}

/*过滤器的使用*/
//其中upprt、lower、formatID都是过滤器
<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div :id="id | formatId"></div>

/*带参数的过滤器*/
Vue.filter(‘过滤器名称‘,function(value,arg1){
　　//value为过滤器传递过来的参数data，默认在第一个
})
/*过滤器的使用*/
<div>{{data | format(‘yyy-MM-dd‘)}}</div>

/*主要阶段*/

//挂载(初始化相关属性)
beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用
created：在实例创建完成之后被立即调用
brforeMount：在挂载开始之前被调用
mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子

//更新(元素组件的变更操作)
beforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前
updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子

//销毁(销毁相关属性)
beforeDestroy：实例销毁之前调用
destroyed：实例销毁之后调用