2022.12.27 Vue总结

2022.12.27 vue总结

过滤器

1. 过滤器的作用是可以过滤修改文本，让页面显示的是被过滤后的值
2. 它的用法如下

  ` Vue.filter('setMsg',function(data,fomate){
        console.log(data)
        console.log(fomate)
        return data.replace('人','**')
    })`

写在script标签里面，setMsg是过滤方法的名字，可以随便起。第二个参数是个方法，data的意思是过滤之前的数据，fomate也是一个用来传递的数据。
我们需要用的是这个返回值return，返回值里面对数据进行修改，也就是过滤。
视图层的代码是这样的

<div id="ap">
        {{msg | setMsg(666)}}
    </div>

在数据后面写个 | 符号，setMsg是过滤器方法的名字，666就是fomate的值。我们在实际操作中也可以对fomate传递的数据进行操作。
3 它的用处是对一些信息进行过滤屏蔽，比如把敏感词汇换成**。

键盘修饰符

1. 键盘修饰符的作用是可以对键盘事件进行操作。比如敲了某个键会触发什么方法。
2. 它一般需要写在input标签里。

        <input type="text" @keyup.m="keyup">
        <input type="text" @keyup.space="keyup">
        <input type="text" @keyup.65="keyup">

3.m就是对m键进行监听 .space就是对空格键进行监听，.65就是对键值是65的按键进行监听。一般我们需要提前查询好对应键的键值。
4如果用的vue.js版本比较低，我们还需要进行自定义按键别名，例如@keyup.m在低版本的vue.js里就无法触发。我们需要进行自定义

 <script>
  Vue.config.keyCodes.m = 77
  </script>

自定义指令

1 自定义指令就是自己定义一个方法，然后进行使用。

<div v-color="color">快放元旦了</div>
 <div v-color="'green'">快放元旦了</div>
<script>
    Vue.directive('color',{
        bind(el,binding){
        console.log(el)
         console.log(binding)
          el.style.color = 'red'
          el.style.color = binding.value
        },
        inserted(el,binding){
        },
        update(el,binding){
        }
    })
     let vm = new Vue({
        el:'#app',
        data:{
          color: 'red', 
        },
        methods:{
            
        },
    </script>

2 其中这个color是自定义指令的名字，第二个括号里面是三个方法
el的意思是dom，binding的意思是返回一个对象。可以打印出来看看。
3 我们可以通过bind改变标签字体的颜色,比如上面就改为了红色。也可以通过binding.value的值 进行改变。它的值很有意思，需要自己多实验实验看看。
4 另外，这个方法名可以直接为数字如123456等，但是写成字符串了，就必须要在data里有对应的值。另外如果要直接使用颜色名，如图中的green则必须再加一个单引号，这样binding.value的值才能是green。