1.1 内容渲染指令
内容渲染指令
用来辅助开发者
渲染 DOM 元素的文本内容
。常用的内容渲染指令有如下 3 个:
v-text 指令的缺点会覆盖元素内部原有内容
{{ }} 插值表达式:在实际开发中用的最多,只是内容的占位符,不会覆盖原有内容
v-html 指令的作用:可以把带有标签的字符串,渲染成真正的HTML内容
1.2 属性绑定指令
注意:
插值表达式只能用在元素的内容节点中,不能用在元素的属性节点中
如果需要为元素的属性动态绑定属性值,则需要用到v-bind属性绑定指令。
简写是英文的 :
在使用v-bind 属性绑定期间,如果绑定内容需要进行动态拼接,则字符串的外面应该包裹单引号,例如 <div :title=" 'box' + index ">这是一个 div</div>
1.3 事件绑定指令
vue 提供了v-on 事件绑定指令,用来辅助程序员为DOM元素绑定事件监听。
简写@事件名称
例如: <button @click="add(1)">+1</button>
1.3.1 事件对象$event
$event
是 vue 提供的
特殊变量
,用来表示
原生的事件参数对象 event
。$event 可以解决事件参数对象 event 被覆盖的问题,他是固定写法必须是$event
1.3.2 事件修饰符
在事件处理函数中调用
event.preventDefault()
或
event.stopPropagation()
是非常常见的需求。因此,
vue 提供了
事件修饰符
的概念,来辅助程序员更方便的
对事件的触发进行控制
。常用的 5 个事件修饰符如下
事件修饰符加在事件后,语法格式如下:
<a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>
按键修饰符
在监听
键盘事件
时,我们经常需要
判断详细的按键
。此时,可以为
键盘相关的事件
添加
按键修饰符
,例如:
1.4 双向绑定指令
vue 提供了 v-model 双向数据绑定指令,用来辅助开发者在不操作 DOM 的前提下,快速获取表单的数据。
![](https://i-blog.csdnimg.cn/blog_migrate/471acc4091432c9b122f3311be2493fc.png)
v-model 指令的修饰符
为了方便对用户输入的内容进行处理
,vue 为 v-model 指令提供了 3 个修饰符,分别是:
示例用法如下:
![](https://i-blog.csdnimg.cn/blog_migrate/6d916d603d7dc0f00107a2a978f67262.png)
注意:v-model 只用于表单元素
1.5 条件渲染指令
条件渲染指令
用来辅助开发者
按需控制 DOM 的显示与隐藏
。条件渲染指令有如下两个,分别是:
v-if
v-show
v-if 和 v-show 的区别
实现原理不同:
v-if 指令会
动态地创建或移除 DOM 元素
,从而控制元素在页面上的显示与隐藏;
v-show 指令会动态为元素
添加或移除 style="display: none;" 样式
,从而控制元素的显示与隐藏;
性能消耗不同:
v-if
有更高的
切换开销
,而
v-show
有更高的
初始渲染开销
。因此:
如果需要
非常频繁地切换
,则使用 v-show 较好
如果在
运行时条件很少改变
,则使用 v-if 较好
v-else
v-if 可以单独使用,或配合 v-else 指令一起使用:
注意
:v-else 指令
必须配合
v-if 指令一起使用,否则它将不会被识别!
v-else-if
v-else-if 指令,顾名思义,充当 v-if 的“else-if 块”,可以连续使用:
![](https://i-blog.csdnimg.cn/blog_migrate/8c9493502cf71997dd86af9a3505cbe6.png)
注意:v-else-if 指令必须配合 v-if 指令一起使用,否则它将不会被识别!
1.6 列表渲染指令
vue 提供了
v-for
列表渲染指令,用来辅助开发者
基于一个数组来循环渲染一个列表结构
。v-for 指令需要使
用
item in items
形式的特殊语法,其中:
items 是
待循环的数组
item 是
被循环的每一项
v-for 中的索引
v-for 指令还支持一个
可选的
第二个参数,即
当前项的索引
。语法格式为
(
item
,
index
)
in items
,示例代码如下:
注意:v-for 指令中的 item 项和 index 索引都是形参,可以根据需要进行重命名。例如 (user, i) in userlist
使用 key 维护列表的状态
当
列表的数据变化
时,默认情况下,vue 会
尽可能的复用
已存在的 DOM 元素,从而
提升渲染的性能
。但这种 默认的性能优化策略,会导致
有状态的列表无法被正确更新
。
为了给 vue 一个提示,以便它能跟踪每个节点的身份,
从而在
保证
有状态的列表被正确更新
的前提下,
提升渲 染的性能
。此时,需要为每项提供一个
唯一的 key 属性
:
key 的注意事项
①
key 的值只能是
字符串
或
数字
类型
②
key 的值
必须具有唯一性
(即:key 的值不能重复)
③
建议把
数据项 id 属性的值
作为 key 的值(因为 id 属性的值具有唯一性)
④
使用
index 的值
当作 key 的值
没有任何意义
(因为 index 的值不具有唯一性)
⑤
建议使用 v-for 指令时
一定要指定 key 的值
(既提升性能、又防止列表状态紊乱)
2. 过滤器
过滤器
(
Filters
)是 vue 为开发者提供的功能,常用于
文本的格式化
。过滤器可以用在两个地方:
插值表达式
和
v-bind 属性绑定
。
过滤器应该被添加在 JavaScript 表达式的
尾部
,由“
管道符
”进行调用,示例代码如下:
2.1 定义过滤器
在创建 vue 实例期间,可以在
filters 节点
中定义过滤器,示例代码如下:
2.2
私有过滤器
和
全局过滤器
在 filters 节点下定义的过滤器,称为“
私有过滤器
”,因为它
只能在当前 vm 实例所控制的 el 区域内使用
。
如果希望
在多个 vue 实例之间共享过滤器
,则可以按照如下的格式定义
全局过滤器
:
2.3 连续调用多个过滤器
过滤器可以
串联地
进行调用,例如:
2.3 连续调用多个过滤器
示例代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/d2de8adbf55f40cac9afe7ef7c7c8866.png)
2.4 过滤器传参
过滤器的
本质
是
JavaScript 函数
,因此可以接收参数,格式如下:
所有评论(0)