vue2 - 局部过滤器 全局过滤器，自定义局部指令 自定义全局指令

1.过滤器 局部过滤器

    <!--使用一个过滤器，单个参数-->
    <div>{{"levi" | filterTest1}}</div>
    <!--使用一个过滤器，多个参数-->
    <input type="text" v-bind:value="'levi' | filterTest2('ackerman')">
    <!--使用多个滤器-->
    <input type="text" v-bind:value="'levi' | filterTest2('ackerman') | filterTest1">

  filters: {
    filterTest1(args){
      return args.toUpperCase();
    },
    filterTest2(args1,args2){
      return args1.toUpperCase()+args2.toLowerCase();
    }
  }

 

2.全局过滤器

定义在script标签中

  //全局过滤器
  Vue.filter('mySlice',function(value){
    return value.slice(0,4)
  })

 

3.自定义指令

指令定义时不加v-，但使用时要加v-

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

注意：指令中的this是window

 

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

<div id="root">
  <li>{{num}}</li>
  <!--num*10-->
  <li v-big="num"></li>
</div>

<script>
  const vm=new Vue({
    el: "#root",
    data: {
      num: 10
    },
    directives: {
      //big函数何时会被调用？
      //1.指令与元素成功绑定时（一上来）
      //2.指令所在的模板被重新解析时。
      big(element,binding){
        console.log(binding);
        element.innerText=binding.value*10;
      }
    }
  })
</script>

对象式：定义一个v-fours-bind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点

<div id="root">
  输入：<button @click="num++">num++</button>
  输出：<input type="text" v-focus-bind:value="num">
</div>

<script>
  const vm=new Vue({
    el: "#root",
    data: {
      num: 10
    },
    directives: {
      focusBind: {
        //指令与元素成功绑定时（一上来）
        bind(element,binding){
          element.value=binding.value;
        },
        //指令所在元素被插入页面时
        inserted(element,binding){
          element.focus();
        },
        //指令所在的模板被重新解析时
        update(element,binding){
          element.value=binding.value;
        }
      }
    }
  })
</script>

全局指令：整个vue项目都可以使用

<script>
  Vue.directive('focusBind',{
    //指令与元素成功绑定时（一上来）
    bind(element,binding){
      
    },
    //指令所在元素被插入页面时
    inserted(element,binding){
      
    },
    //指令所在的模板被重新解析时
    update(element,binding){
      
    }
  })
</script>