【精讲】vue框架过滤器（全局及局部）、自定义指令（内含注释）

第一部分：过滤器（全局及局部）

第二部分：自定义指令（全局及局部）

第一部分：过滤器（全局及局部）

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>
       <div id="root">
           <p>原数据:{{num}}</p>
           
           <h2>{{num | toLowerCase(1) | myslice}}</h2>
       </div>

       <script type="text/javascript">
           // 全局过滤器这里的filter不加s 局部要加内部第一个是过滤数据名第二个是回调函数内部是截取字符串前四位
           Vue.filter('myslice',function(value){
               return value.slice(0,4)
           })


           new Vue({
               el:'#root',
               data() {
                   return{
                       num:'abCDEfgjs',
                   }
               },
               // 局部过滤器
               filters:{
                   // 过滤器第一个是函数名(自定义命名) 后面跟的是函数内部有两个形参，第一个是固定参数，第二个是根据你的需求
                   //传入(判断)
                   toLowerCase:function(value,styles){
                       if(styles==1){
                           // 将字母转化为大写
                           return value.toUpperCase()
                       }else{
                           // 将字母转化为小写
                           return value.toLowerCase()
                       }
                   }
               }
           })
       </script>
   </body>
</html>

第二部分：自定义指令（全局及局部）

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script type="text/javascript" src="js/vue.js"></script>
   </head>
   <body>

       <div id="root">
           <h2>原数据：{{num}}</h2>
           <p>扩大:<span v-big="num"></span></p>
           <input type="text" v-myfocusto="num">
           <button @click="num++">+1</button>
       </div>

       <script type="text/javascript">
           // 注 element绑定的是原数据 binding绑定的是会被更改的数据值
           // 全局自定义指令
           Vue.directive('myfocusto',{
               //一上来就绑定的时候
               big(element,binding){
                   element.value=binding.value*10;//绑定num的值时
                   element.focus();//聚焦
               },
               // 当元素插入页面的时候调用
               inserted(element,binding){
                   element.focus()
               },
               //更新的时候数据在发生变化的时候
               update(element,binding){
                   element.value=binding.value*10 //绑定的值
               }
           })


           // 局部自定义指令
           new Vue({
               el:'#root',
               data() {
                   return{
                       num:0
                   }
               },
               directives:{
               //更新时与绑定时调用第一个参数指：原数据第二个是绑定的数据
               big(element,binding){
                   element.innerText = binding.value*10//绑定num的值
               },

               myfocus:{
                   //一上来就绑定的时候
               big(element,binding){
                   element.value=binding.value*10;//绑定num的值时
                   element.focus();//聚焦
               },
               // 当元素插入页面的时候调用
               inserted(element,binding){
                   element.focus()
               },
               //更新的时候数据在发生变化的时候
               update(element,binding){
                   element.value=binding.value*10 //绑定的值
               }
               }
               }
           })
       </script>
   </body>
</html>