-
1、过滤器
-
概念
Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由“管道”符指示。
-
作用
在我们页面显示值之前加一层过滤,展示我们过滤后的值
-
注意事项
过滤器可以用在两个地方:双花括号插值和 v-bind 表达式
-
使用语法
-
{ {变量 | 过滤器名}}
-
{ {变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器,后面过滤器的data就是前面表达式传过来的值
-
定义语法
-
全局定义:
-
通过Vue提供的filter方法定义:Vue.filter()
-
参数:过滤器的名字和过滤器执行函数
-
私有定义:
-
filters这个是实例化Vue的一个参数,和data,methods平级的,里面放的就是我们这个实例的私有过滤器。
-
2、键盘修饰符
- 监听所有按键:v-on:keyup
- 监听指定按键:v-on:keyup.按键码
-
- vue提供的按键别名
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
- 列:监听enter按键;v-on:keyup.enter
-
自定义按键别名
-
Vue.config.keyCodes.f1 = 112
-
3、自定义指令
-
全局定义
-
使用这个方法进行全局定义:Vue.directive()
-
参数:
1. 指令的名字(定义的时候不加v-,使用vue指令的时候加上v-)
2. 对象,里面包含三个钩子方法
- bind 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
- inserted 这个元素已经渲染到界面上之后执行
- update 当元素有更新的时候执行
- el:指令所绑定的元素,可以用来直接操作 DOM 。
- binding:一个对象,包含以下属性:
- name:指令名,不包括 v- 前缀。
- value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。
-
oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated钩子中可用。
3. 这三个方法的参数有哪些
- el:指令所绑定的元素,可以用来直接操作 DOM 。
- binding:一个对象,包含以下属性:
-
oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated钩子中可用
-
name:指令名,不包括 v- 前缀。
-
value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。
-
-
私有定义
-
实例里有个directives属性,这个属性是个对象
-
里面放的就是我们指令,这个对象键就是指令的名字,后面的对象就是指令的内容,和全局定义是一样的
-
简写直接写一个函数,函数名就是指令的名字,其他和全局定义是一样的
- .left
- .down
- .up
- .space
- .esc
- .delete (捕获“删除”和“退格”键)
- .tab
- .enter
-
-
-
-
-
-
-
-
-
-
-
vue的过滤器、修饰符和自定义属性
猜你喜欢
转载自blog.csdn.net/qq_53694927/article/details/126960917
今日推荐
周排行