Vue自定义指令，计算属性，侦听器，过滤器

1 自定义指令

局部注册： directives: { 指令名：{钩子函数} }

例子：用自定义指令改变输入框的背景颜色（全局注册）

color 自定义指令名 ， inserted就是钩子函数，el代表被绑定的元素，binding是个对象（binding.value是所绑定的值，也就是说如果不打算传值就不许用这个参数，比如让输入框聚焦那个例子就不用直接el.focus()就行了）

什么叫钩子函数？

只要你用某个东西就只能用某些函数，这些函数就叫钩子函数。比如你用directive你就只能用inserted，bind，update这三个函数，而不是自定义的。对比计算属性就很明显感觉得到

 

 补充：如果想变成局部变量：

 

计算属性

作用：把模板中复杂的计算逻辑抽取出来，这样模板会变得更加简单

例如： 将字符串倒序

 

 这样模板内容就很多，不方便观看

 注意：加return ， this

总结： 计算属性用来简化模板语法。

 

计算属性看起来像方法，他与方法有什么区别呢？

 如果msg不发生变化，多次访问用的都是第一次计算的结果。（计算属性基于data中的数据进行缓存）如果要计算的东西耗时长那么他的优点就体现了，节省性能。

而methons每次访问都会重新计算

 

 

侦听器

当页面的值发生变化时调用函数去处理一些**异步的任务**

例子：判断输入框的内容是否为1，为1怎输出不可以为1

 val从模板携带过来的数据

.lazy是让输入框数去焦点时再改变data中的数据，不然会一直触发msg的事件监听。因为msg的事件监听是根据data中的变化触发的

 

过滤器

作用：用于处理数据，比如将数据首字母大写，将日期格式化为指定格式

使用场景一个是插值表达式一个是属性绑定

绑定在那个插值表达式，val就是那个值