Vue指令——常用指令

一、什么是vue指令

指令是可以写在DOM元素中的小命令，他们以 v- 为前缀，vue就能识别这是一个指令并保持语法的一致性。
开始接触vue的时候，一定会使用到其中的几个指令，比如： v-if 、 v-for … 这些都是vue预设的，用起来是相当的方便。

二、常用指令

（一）v-cloak

    可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。

    常用场景：当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码（ 如插值表达式 {{msg}} ）。我们可以使用 v-cloak 指令来解决这一问题。

<style>
    [v-cloak] {
        display: none;
    }
</style>

<template>
    <h1 v-cloak>{{msg}}</h1>
</template>

<script>
export default {
  data () {
    return {
      msg: '这是一个标题'
    }
  }
}
</script>

注：
① Vue1.x 中，允许将 Vue 实例挂载在 body 上，而 Vue2 是不允许的，想对整个页面实例化，需要另外用一个 div 来容纳整个页面内容，对其进行实例化。
② v-cloak无效的可能：
在实际项目中，我们常通过 @import 来加载 css 文件

@import "style.css"
@import "index.css"

而 @import 是在页面 DOM 完全载入后才会进行加载，如果我们将 [v-cloak] 写在 @import 加载的 css 文件中，就会导致页面仍旧闪烁。
为了避免这种情况，我们可以将 [v-cloak] 写在 link 引入的 css 中，或者写一个 内联 css 样式 ，这样就得到了解决。

（二）v-text

    v-text解决差值表达式闪烁问题，会覆盖标签内部原先的内容，相当于innerText。

（三）v-html

    能够解析标签属性，并将值渲染在页面上。

<div id="app">
    <p v-text="msg"></p>
    <p v-html="msg"></p>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el : "#app",
        data : {
            msg : "<h1>这是一个h1元素内容</h1>"
        }
    });
</script>

结果：

（四）v-once

    被定义了 v-once 指令的元素或组件（包括元素或组件内的所有子孙节点）只能被渲染一次。首次渲染后，即使数据发生变化，也不会被重新渲染。一般用于静态内容展示。（一般用于性能优化）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-weN9I60H-1600754352814)(/tfl/pictures/202009/tapd_38938575_1599445097_85.png)]

（五）v-show

    用于控制节点的显示/隐藏。隐藏时，v-show是给元素加了一个display:none 的属性，只是简单地基于 CSS 切换，适用于元素的 !!#ff0000 频繁切换!!。

（六）v-if

    “真正”的条件渲染，确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染，
如果是 false 的话就会被注释

（七）v-else

    v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

（八）v-else-if

    [2.1.0 新增] 充当 v-if 的 “else-if 块”，可以连续使用，必须紧跟在 v-if 或者 v-else-if 的元素之后。

综合例子：

<div id="app">
	<p>输入的成绩对应的等级是:</p>
	<p v-if="score >= 90">优秀</p>
	<p v-else-if="score >= 75">良好</p>
	<p v-else-if="score >= 60">及格</p>
	<p v-else>不及格</p>
	<input type="text" v-model="score">
</div>
<script src="js/vue.js"></script>
<script>
	new Vue({
	   el: '#app',
	   data: {
		  score: 90
	   }
	});
</script>

（九）v-bind

    动态地绑定一个或多个 attribute，或一个组件 prop 到表达式，缩写：: 。
    在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。（之后细说）

<!-- 基础绑定 -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

（十）v-on

    绑定事件监听器。缩写：@。
    事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件，用在自定义元素组件上时，也可以监听子组件触发的 自定义事件 。

事件修饰符	作用
.stop	阻止冒泡
.prevent	阻止默认行为，如：表单提交、链接跳转
.capture	实现捕获触发事件机制
.self	只有被监听的事件触发元素本身时才触发
.once	只触发一次回调（可以连同其他事件修饰符串连使用）

<!-- 初始：无事件修饰符 -->
<div class="parent-div" @click="handleParentDiv()">
    <button class="child-btn" @click="handleChildBtn()">子按钮</button>
</div>

<!-- .stop事件修饰符 -->
<!-- 此时点击“子按钮”不会触发handleParentDiv事件 -->
<div class="parent-div" @click="handleParentDiv()">
	<button class="child-btn" @click.stop="handleChildBtn()">子按钮</button>
</div>

<!-- .prevent事件修饰符 -->
<a href="https://www.baidu.com/" @click.prevent>点击阻止跳转</a>

<!-- .capture事件修饰符 -->
<!-- 此时点击了div4，则顺序是2→4→3→1 -->
<div class="div1" v-on:click="show1">
  1
  <div class="div2" v-on:click.capture="show2">
      2
      <div class="div3" v-on:click="show3">
          3
          <div class="div4" v-on:click="show4">
              4
          </div>
      </div>
  </div>
</div>
<script>
export default {
  name: 'App',
  data () {
    return {}
  },
  methods: {
    handleParentDiv () {
      alert('父级div被点击了')
    },
    handleChildBtn () {
      alert('子级button被点击了')
    },
    show1 () {
      console.log('这是div1的方法')
    },
    show2 () {
      console.log('这是div2的方法')
    },
    show3 () {
      console.log('这是div3的方法')
    },
    show4 () {
      console.log('这是div4的方法')
    }
  }
}
</script>

<style>
# app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.parent-div {
  width: 300px;
  height: 100px;
  background: red;
  display:flex;
  justify-content:center;
  align-items:center;
}
.div1{
  width: 200px;
  height: 200px;
  background: hotpink;
}
.div2{
  width: 150px;
  height: 150px;
  background: blueviolet;
  margin: auto;
}
.div3{
  width: 100px;
  height: 100px;
  background: darkorange;
  margin: auto;
}
.div4{
  width: 50px;
  height: 50px;
  background: blanchedalmond;
  margin: auto;
}
</style>

（十一）v-model

    双向数据绑定。只能用于表单元素中，如：<input>（包括radio、text、checkbox、address、email…） 、<select> 、<textarea>

修饰符	作用
.lazy	转为监听 change 事件，而不是input事件
.number	自动将用户的输入值转为数值类型
.trim	自动过滤用户输入的首尾空白字符

（十二）v-for

1. 遍历数组

<div id="app">
<p v-for="(item,index) in userlist" :key="item.name">
	索引：{{index}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}
</p>
</div>
<script src="js/vue.js"></script>
<script>
	new Vue({
	   el: '#app',
	   data: {
	      userlist: [
	        { name: 'Tom', age: 20 },
	        { name: 'Mike', age: 30 }
	      ]
	   }
	});
</script>

【结果】
索引：0 --- 姓名：Tom --- 年龄：20
索引：1 --- 姓名：Mike --- 年龄：30

2. 遍历对象

<div id="app">
	<p v-for="(val, key, index) in userInfo" :key="val">
		{{val}} --- {{key}} --- {{index}}
	</p>
</div>
<script src="js/vue.js"></script>
<script>
	new Vue({
	   el: '#app',
	   data: {
	      userInfo: {
	        name: 'Tom',
	        age: 20,
	        from: 'China'
	      }
	   }
	});
</script>

【结果】
Tom --- name --- 0
20 --- age --- 1
China --- from --- 2

3. 迭代数字

<div id="app">
	<p v-for="index in 5" :key="index">这是第{{index}}个数字</p>
</div>
<script src="js/vue.js"></script>
<script>
	new Vue({
	   el: '#app',
	   data: {}
	});
</script>

【结果】
这是第1个数字
这是第2个数字
这是第3个数字
这是第4个数字
这是第5个数字

注：
① in + 数组/ 对象/ 对象数组 / 数字 ，如果in后面是 数字 的话，index值从1开始，否则index从0开始。
② 从2.2.0开始，在组件中使用v-for时，必须使用 v-bind 绑定key属性，且key必须是唯一的。
③ key属性只能使用 number 或 string 类型，不能使用对象。

---

key的作用

    主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
    有相同父元素的子元素必须有 唯一的 key 。重复的 key 会造成渲染错误。
    它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：

• 完整地触发组件的生命周期钩子
• 触发过渡

参考文档： vue key的作用

---