Vue中过滤器和自定义指令

Vue特点

Vue.js 使用了基于 HTML 的模板语法
允许开发者声明式地将 DOM 绑定至Vue 实例数据
Vue 将模板编译成虚拟 DOM 渲染函数。可以不用模板，直接写render函数

Vue过滤器

作用：常见文本的格式化

位置：插值表达式，v-bind表达式

私有过滤器：只有当前vm能够使用

methods: {
    filters:{

    },
}

全局过滤器：所有vm实例都共享

全局过滤器：Vue.filter(‘filterName’,function(){ })

1. 声明全局过滤器
   data是管道符传递过来的数据

Vue.filter('dataFormat',function(dataStr,pattern=""){
   var dt=new Date(dataStr);
       var y=dt.getFullYear();
       var m=dt.getMonth();
       var d=dt.getDate();
       if(pattern.toLowerCase() === "yyyy-mm-dd"){
           return y+"-"+m+"-"+d;
       }else{
           var hh=dt.getHours();
           var mm=dt.getMinutes();
           var ss=dt.getSeconds();
           return y+"-"+m+"-"+d+" "+hh+":"+mm+":"+ss;
       }    
});

调用方法：通过管道符调用

## 采用就近原则，优先调用私有过滤器
<td>{{ item.name | dataFormat('yyyy-mm-dd') }}</td>

Vue自定义指令

特点：定义时不加v-,但是调用时需要加v-

不带参数vue指令

1. 声明全局自定义指令

Vue.directive('focus',{
        //指令刚绑定到元素上时，只执行一次
        bind:function(){
           
        },
        //指令刚插入到dom中，只执行一次
        inserted:function(el){
            el.focus(); //el表示原生js对象
        },
        //VNode更新一次时，可执行多次
        updated() {
            
        },
});

2. 调用无参vue指令

<label>
     搜索关键字:
     <input type="text" class="form-control" v-model="keywords" id="search" v-focus>
</label>

带参vue指令

1. 声明带参vue指令

Vue.directive('color',{
     bind:function(el,binding){
         el.style.color = binding.value;
     }
});

2. 调用带参数vue指令

<label>
    搜索关键字:
    <input type="text" class="form-control" v-model="keywords" id="search" v-color="'blue'">
</label>

Vue生命周期函数

1. 第一个生命周期函数:实例创建之前，data和methods中的数据还没有初始化

beforeCreate() {
             
},

2. 第二个生命周期函数：data和methods方法已经初始化好了
   操作Vue属性最早钩子

created() {
   this.show();
},

3. 第三个生命周期函数:通过模板编译，执行vue指令，字符串模板在内存已经生成，但是没有渲染到页面中

beforeMount() {//旧页面

},  

4. 第四个生命周期函数：将编译好的模板 挂载到页面中去。创建阶段——>运行阶段
   操作页面DOM最早钩子

mounted() {

},

5. 第五个周期函数(运行时)：某事件修改data中的数据，页面尚未更新data中的数据

 beforeUpdate() {
                 
},

6. 第六个生命周期函数:某事件修改data中的数据，页面更新了data中的数据
   VM将model中的数据生成新得dom，然后渲染到页面中去

updated() {
                 
},