Vue的学习(二)
特殊attribute
key
-
引用自官方文档
key
的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
最常见的用例是结合
v-for
:
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用:
- 完整地触发组件的生命周期钩子
- 触发过渡
例如:
<transition>
<span :key="text">{{ text }}</span>
</transition>
当 text
发生改变时,<span>
总是会被替换而不是被修改,因此会触发过渡。
v-for
我们可以用
v-for
指令基于一个数组来渲染一个列表。v-for
指令需要使用item in items
形式的特殊语法,其中items
是源数据数组,而item
则是被迭代的数组元素的别名。
- 参考代码
<div id="app">
// 这里v-for遍历数组时需要用到item in items的特殊语法,其中items是被遍历数组的名称,item是所遍历的元素的别称
<h1 v-for="item in arrs">
{{item}}
</h1>
<hr>
// 这里的a、b都是别称,可以使用其他任意合法字符代替
// b表示下标,即数组内元素的索引,a表示元素的值
<h1 v-for="(a,b) in arrs">
{{b+":"+a}}
</h1>
<hr>
// 此处的c、d与上方的a、b同理
<h1 v-for="(c,d) in arrs">
{{d}} : {{c}}
</h1>
</div>
<script>
var example1 = new Vue({
el:"#app",
data:{
arrs:[111,222,333]
}
});
</script>
运行结果如下:
111
222
333
__________________________
0:111
1:222
2:333
__________________________
0 : 111
1 : 222
2 : 333
v-text 与 v-html
v-text只能打印对应的字符,而无法支持HTML代码
v-html不仅能打印对应的字符,而且能支持HTML代码
- 参考代码
<div id="app">
<h2 v-text="title"></h2>
<h2 v-html="title"></h2>
</div>
<script>
var example2 = new Vue({
el:"#app",
data:{
title:"Web<em>前端</em>开发工程师"
}
});
</script>
运行结果如下:
Web<em>前端</em>开发工程师
Web前端开发工程师
v-bind
- 缩写: :
API v-bind:
作用是将元素节点的属性与Vue实例中的属性绑定在一起
- 参考代码
<div id="app">
<h1 v-bind:title="messages">
淡淡的淡定
</h1>
<a v-bind:href="link">Vue官网</a>
</div>
<script>
var app1 = new Vue({
el:"#app",
data:{
messages:"碧蓝航线咸鱼指挥官",
link:"https://cn.vuejs.org"
}
});
</script>
运行结果就是当鼠标移动到淡淡的淡定上方时,会出现碧蓝航线咸鱼指挥官的一行小字;点击Vue官网也确实能够进行网页跳转