Vue.js进阶技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_71879136/article/details/126962813

一、过滤器注：过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
1、使用语法 {{变量 | 过滤器名}} {{变量 | 过滤器名 | 另一个过滤器}} | 管道符
2、定义语法
（1）全局定义：

<body>
    <div id="app">
    <div>{{msg}}</div>
    <div>{{msg | getStar('哈哈哈哈')}}</div>
     </div>
</body>
<script>
    Vue.filter('getStar',function(data,format){
        console.log(data);
        console.log(format);
         return data.replace('TM','**')
        })
    et vm = new Vue({
        el:'#app',
        data:{
           msg:'我是真TM服了'
          },
        methods:{
          }
     })
</script>

    （2）私有过滤器：
       <div>{{msg}}</div>
       <div>{{msg | getStar3('哈哈哈哈')}}</div>

       let vm = new Vue({
       el:'#app',
        data:{
       msg:'我是真TM服了'
        },
        methods:{
        },
       // 私有过滤器
       filters:{
       getStar3(data,format){
        console.log(data);
       return data.replace('TM','**')
        }
        }
3、注意事项
（1）.函数的第一个参数都是data，也就是我们要过滤的值。
（2）.过滤器可以自定义一些参数。
（3）.过滤器函数的返回值就是最终显示的值

二、键盘修饰符
1、（1）1.监听所有按键：v-on:keyup
2.监听指定按键：v-on:keyup.按键码

2、使用按键别名 .enter .tab .delete .esc .space .up .down .down .left .right
3、自动定义按键别名 Vue.config.keyCodes.a = 112

三、自定义指令
1、全局定义全局定义：Vue.directive()
   参数一、指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）
   参数二、对象{bind（el绑定的dom元素）}

 <body>
    <div id="app">
      <div>这是一段文字</div>
      <div v-color="color">这是一段文字</div>
      <div v-color="'blue'">这是一段文字</div>
    </div>
</body>
<script>
   Vue.directive('color',{
      bind(el,binding){
      console.log(el);
      console.log(binding);
      el.style.color = binding.value
    }
    })
    let vm = new Vue({
      el:'#app',
      data:{
        color:'yellow',
        value:''
      },
      methods:{
        }
    })
</script>