directive 自定义指令
我们还可以通过 `Vue` 提供的directive方法来自定义指令
注册指令
`vue` 提供了两种指令注册方式
- 全局指令
- 局部指令
全局指令
![](https://img.haomeiwen.com/i12421083/61e4dcd3440fe614.png)
局部指令
![](https://img.haomeiwen.com/i12421083/1981a1b3c1d0b6a9.png)
在使用指令的时候,需要使用 `v-指令名称` 的方式来调用
ref 获取组件
属性,vue提供的一种用于获取标签(组件)实例对象的简便方式
![](https://img.haomeiwen.com/i12421083/2deb185b61517f96.png)
指令生命周期(钩子函数)
![](https://img.haomeiwen.com/i12421083/544edb42e51295c3.png)
输入框光标案例:
![](https://img.haomeiwen.com/i12421083/dc897d39c4e15daf.png)
![](https://img.haomeiwen.com/i12421083/4dd27a251be9aa29.jpg)
拖拽功能案例:
![](https://img.haomeiwen.com/i12421083/689f5eff4e0315ab.png)
.limit(修饰符,限定范围)
![](https://img.haomeiwen.com/i12421083/f5e1cc6929c1b99b.jpg)
v-on 绑定事件
缩写@
![](https://img.haomeiwen.com/i12421083/17169ad92b284e32.png)
methods (组件的方法集)
在组件选项中,提供了一个 `methods` 选项,用来存放组件中使用的函数方法,且存放在 `methods` 中的函数方法可以通过组件
实例(this)进行访问
通过内联方式绑定事件处理函数
事件绑定函数中的 `this` 指向组件实例
![](https://img.haomeiwen.com/i12421083/76bd0838180fd2fe.png)
事件绑定函数中的第一个参数默认为 `event` 对象
![](https://img.haomeiwen.com/i12421083/ad2419610c9c8283.png)
![](https://img.haomeiwen.com/i12421083/9c8c3066cebce4d2.png)
也可以在事件绑定中直接调用函数(并不会立即执行,也是通过事件触发执行的)
事件对象需要手动传入,名称为 `$event`
![](https://img.haomeiwen.com/i12421083/0d98184fe0a7a077.jpg)
事件修饰符
![](https://img.haomeiwen.com/i12421083/12960bee0c10bdaa.png)
![](https://img.haomeiwen.com/i12421083/e0b59138c16b673b.png)
`vue` 还提供了许多按键修饰符
![](https://img.haomeiwen.com/i12421083/2b2f31baa1b74c97.png)
computed(计算属性,不支持异步,异步要用下面的watch)
在实际的应用中,我们会有一些原始数据,同时在应用中又会有一些数据是根据某些原始数据派生出来的,针对这样的一种情况,
`vue` 定义了一个专门用来处理这种派生数据的选项:`computed`
1.计算属性类似 `getter` 和 `setter` ,当访问某个计算属性的时候,就会调用 `computed` 中同名的函数,函数的返回值将作为该计 算属性的值
2.计算属性的值依赖计算函数中依赖的其它响应式数据
3.计算属性的值可以缓存,如果依赖的其它响应式数据没有发生变化,但多次访问该计算属性,得到结果是最近一次变化产生的值
(相对于调用方法得到结果在某些时候性能要好一些)
![](https://img.haomeiwen.com/i12421083/5550a795871a01cb.png)
![](https://img.haomeiwen.com/i12421083/55dadb23ed326876.jpg)
![](https://img.haomeiwen.com/i12421083/dcce04ce9fb403e4.png)
![](https://img.haomeiwen.com/i12421083/f185772d64644305.jpg)
计算属性的 `getter` 与 `setter`
默认情况下,计算属性函数是一个 `getter` 函数,如果计算属性只有 get 需求,则可以简写
![](https://img.haomeiwen.com/i12421083/8478bc4f8a25ad8d.png)
computed区别于method的两个核心
1.computed是属性调用,而methods是函数调用
2.computed带有缓存功能,而methods不是
computed当其依赖的属性的值发生变化时,计算属性会重新计算,反之,则使用缓存中的属性值。
watch
有的时候,我们需要的派生数据是通过异步的方式处理的,这个时候,计算属性就不太好用了(不能处理异步)。
我们可以使用另外一个选项:`watch`
![](https://img.haomeiwen.com/i12421083/541148fb129b1489.png)
![](https://img.haomeiwen.com/i12421083/316fc8bfdb900de3.jpg)
![](https://img.haomeiwen.com/i12421083/48394a56add85ac5.png)
延迟输入用watch:
![](https://img.haomeiwen.com/i12421083/3e17ae676d6a0867.jpg)
多层监听
对于多层数据的监听,可以使用字符串+点语法
![](https://img.haomeiwen.com/i12421083/0c4869b75b65514f.png)
深度监听
默认情况下,`watch` 只对当前指定的值进行一层监听,如果需要对对象进行深度监听。
深度监听对应的函数名必须为handler,否则无效果,因为watcher里面对应的是对handler的调用
![](https://img.haomeiwen.com/i12421083/771bbd285b53e53e.png)
过滤器
![](https://img.haomeiwen.com/i12421083/273ac3ddbf14561f.png)
注册过滤器
全局过滤器
![](https://img.haomeiwen.com/i12421083/c1dfba9f8c7b9495.png)
局部过滤器
![](https://img.haomeiwen.com/i12421083/74f60a1a8a4d11cc.png)
案例:
![](https://img.haomeiwen.com/i12421083/ef152f636c72df05.png)
![](https://img.haomeiwen.com/i12421083/fa4d62c41ea8f92d.png)
网友评论