Vue全局过滤器 自定义指令

                           Vue全局过滤器

Vue.filter('maySlice',function(value){

    //全局过滤器

    return value.slice(0,4)

})

                          自定义指令

定义一个v-big指令 和 v-text功能类似 但会把绑定的数值放大10倍

定义一个v-fbind指令和v-bind功能类似 但可以让其说绑定的input元素默认获取焦点

(1)局部指令

        new Vue({                                            new Vue({

            directives:{指令名：配置对象}    或     directives:{指令名：回调函数}

        })                                                               })   

2.配置中常用的3个回调

(1) bind指令与元素成功绑定时调用

(2)inserted指令所在元素被插入页面时调用

(3)update指令所在模板结构被重新解析时调用

3.备注

1.指令定义时如果不加 v-  但使用时要加 v-

2.指令名如果是多个单词 要使用kebab-case命名方式 不要使用camelCase命名  

 

     

当前的值是

     

放大10倍后的n的值是

      点我加1

     

---

     

   

new Vue({

   el:"#root",

   data:{

       n:1

   },

   directives:{          //自定义指令

       //big函数什么时候会被调用 1.指令与元素成功绑定时 

       big(element,binding){                          // element,binding固定参数

         element.innerText = binding.value*10

       },

       fbind:{                //里面this指向window    //指令与元素成功绑定时(一上来)

           bind(element,binding){

            element.value = binding.value

           },

           //指令所在元素被插入页面时

           inserted(element,binding){

            element.focus()

           },

           //指令所在的模板被重新解析时

           update(element,binding){

            element.value = binding.value

           }} }})

                       全局自定义指令

        Vue.directives:{指令名：配置对象}          

或     Vue.directives:{指令名：回调函数}

Vue.directives('fbind',{                 //定义全局指令          //里面this指向window

           //指令与元素成功绑定时(一上来)

           bind(element,binding){

            element.value = binding.value

           },

           //指令所在元素被插入页面时

           inserted(element,binding){

            element.focus()

           },

           //指令所在的模板被重新解析时

           update(element,binding){

            element.value = binding.value

           }

})