01-Vue_常用指令

1.1 指令表

指令	说明
v-cloak	作用：解决插值表达式闪烁的问题 注意：需要配合属性选择器 + display:none; 使用
v-text	作用：输出文本
v-html	作用：以浏览器能够解析的方式输出
v-bind	格式：v-bind: 简写：:属性 作用：用于绑定属性的指令，可以写合法的JS表达式
v-on	格式：v-on: 简写：@事件 作用：用于绑定事件
v-model	作用：实现双向绑定（M => V, V => M） 注意：只能用在表单元素中
v-for	作用：for 循环
v-if v-else-if v-else	作用：根据条件展示元素 缺点：直接对DOM节点进行删除和添加，有较高的性能消耗 建议：若元素并非频繁切换，推荐使用v-if
v-show	作用：根据条件展示元素 缺点：对元素进行 display 操作，有较高的初始渲染消耗 建议：若元素需要频繁的切换，建议使用v-show

1.1.0 前期准备

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'Study',
        text: '<strong>加粗了呀</strong>',
        num: 0,
        flag: 'A',
        list: [
            { id: 1, name: '小炎' },
            { id: 2, name: '小天' },
            { id: 3, name: '小若' },
            { id: 4, name: '小修' },
            { id: 5, name: '小瑞' }
        ]
    },
    methods: {
        btn() {
            alert('click')
        }
    }
})

1.1.1 v-cloak

<!-- CSS Code -->
<style>
    p[v-cloak] {
        display: none;
    }
</style>

<!-- Html Code -->
<div id="app">
	<p v-cloak>{{ msg }}</p>
</div>

<!-- Script Code -->
<!-- 为了方便演示，所以不在头部引入 Vue ，而是在这里 -->
<script src='https://cdn.staticfile.org/vue/2.6.9/vue.min.js'></script>

• 打开浏览器调试工具，按如下顺序：Network -> Presets（Disable cache 右边） -> show 3G 勾上

• 运行后发现，当 Vue 还没完全加载完成时，会直接把源代码给显示出来。（咳咳，打码的别在意~）

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iCbGOPic-1615371635419)(./images/v-cloak.png)]

  因为我们的网络不稳定，导致了 Vue 还未加载完成，而 DOM 就已经渲染完了，此时用户最先看到的自然是 DOM 元素。

1.1.2 v-text

<!-- Html Code -->
<div id="app">
	<p v-text="text"></p>
</div>

1.1.3 v-html

<!-- Html Code -->
<div id="app">
	<p v-html="text"></p>
</div>

1.1.4 bind

<!-- Html Code -->
<div id="app">
	<p v-bind:title="msg">TITLE</p>
</div>

1.1.5 v-on

<!-- Html Code -->
<div id="app">
	<button v-on:click='btn'></button>
</div>

1.1.6 v-model

<!-- Html Code -->
<div id="app">
	<input type='text' v-model='num' />
    <p>{{ num }}</p>
</div>

1.1.7 v-for

<!-- Html Code -->
<div id="app">
	<ul v-for="item in list" :key="item.id">
        <li>
            <input type="checkbox" /> 【id】：{{item.id}} -- 【姓名】：{{item.name}}
        </li>
    </ul>
</div>

1.1.8 v-if / v-else-if / v-else

<!-- Html Code -->
<div id="app">
	<p v-if="flag === 'A'">A</p>
	<p v-else-if="flag === 'B'">B</p>
	<p v-else>C</p>
</div>

1.1.9 v-show

1.2 v-for 中 key 的问题

从这幅GIF中，我们可以很清楚的看到，一开始选择的是5号，然后 unshift() 后，复选框选择的位置依然没有跟着变动，而是在原位置一动不动。

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

• 解决这个问题
  添加一个key即可，需要v-bind绑定

  <ul>
      <li v-for="item in list" :key="item.id">
          <input type="checkbox" />
          【id】：{{item.id}} -- 【姓名】：{{item.name}}
      </li>
  </ul>