Vue的学习（二）

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官网也确实能够进行网页跳转