Vue2.X 常用指令

写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！
学习来源： Vue + Vue-Cli 快速入门教程
李南江老师各平台账号：

• 微博：极客江南
• 微信公众号：李南江
• 腾讯课堂： 李南江
• 网易云课堂：李南江

1.什么是指令?
指令就是Vue内部提供的一些自定义属性,
这些属性中封装好了Vue内部实现的一些功能
只要使用这些指令就可以使用Vue中实现的这些功能

2.Vue数据绑定的特点
只要数据发生变化, 界面就会跟着变化

v-once 指令

v-once指令: 让界面不要跟着数据变化, 只渲染一次

html代码：

<div id="app">
    <p v-once>原始数据: {
  { name }}</p>
    <p>当前数据: {
  { name }}</p>
</div>

vue代码：

let vue = new Vue({
   
    el: '#app',
    data: {
   
        name: "李南江",
    }
});

使用v-once指令后，即使在控制台改动数据，也不会改变

v-cloak 指令

Vue数据绑定过程
1、会先将未绑定数据的界面展示给用户
2、然后再根据模型中的数据和控制的区域生成绑定数据之后的HTML代码
3、最后再将绑定数据之后的HTML渲染到界面上

正是在最终的HTML被生成渲染之前会先显示模板内容
问题： 如果用户网络比较慢或者网页性能比较差, 那么用户会看到模板内容

如何解决这个问题？
利用v-cloak配合 [v-cloak]:{display: none}默认先隐藏未渲染的界面
等到生成HTML渲染之后再重新显示

v-cloak指令作用: 数据渲染之后自动显示元素（保持在元素上直到关联实例结束编译），和 CSS规则如 [v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
html代码：

<div id="app">
    <p v-cloak>{
  { name }}</p>
</div>

css代码：

[v-cloak] {
    display: none }

vue代码：

// 这里就是MVVM中的View Model
let vue = new Vue({
   
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
   
        name: "李南江",
    }
});

运行后，最开始没有内容

等待网络加载完毕后，内容显示，不会直接先显示模板内容。

v-text 指令 和 v-html 指令

什么是v-text指令
v-text就相当于过去学习的innerText

什么是v-html指令
v-html就相当于过去学习的innerHTML

<div id="app">
    <!--插值的方式: 可以将指定的数据插入到指定的位置-->
	<p>++++{
  { name }}++++</p>
    <!--插值的方式: 不会解析HTML-->
	<p>++++{
  { msg }}++++</p>
    <!--v-text的方式: 会覆盖原有的内容-->
	<p v-text="name">++++++++</p>
    <!--v-text的方式: 也不会解析HTML-->
	<p v-text="msg">++++++++</p>
    <!--v-html的方式: 会覆盖原有的内容-->
    <p v-html="name">++++++++</p>
    <!--v-html的方式:会解析HTML-->
    <p v-html="msg">++++++++</p>
</div>

vue代码：

// 这里就是MVVM中的View Model
let vue = new Vue({
   
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
   
        name: "李南江",
        msg: "<span>我是span</span>"
    }
});

代码运行后：

v-if 指令

什么是v-if指令
条件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素

v-if特点:
如果条件不满足根本就不会创建这个元素(重点)

v-if注意点
v-if可以从模型中获取数据
v-if也可以直接赋值一个表达式

v-else指令
v-else指令可以和v-if指令配合使用, 当v-if不满足条件时就执行v-else就显示v-else中的内容

v-else注意点
v-else不能单独出现
v-if和v-else中间不能出现其它内容

v-else-if指令
v-else-if可以和 v-if指令配合使用, 当v-if不满足条件时就依次执行后续v-else-if, 哪个满足就显示哪个

v-else-if注意点
和 v-else一样，v-else-if不能单独出现
v-if和v-else-if中间不能出现其它内容

html代码：

<div id="app">
<!--    <p v-if="show">我是true</p>-->
<!--    <p v-if="hidden">我是false</p>-->
<!--    <p v-if="true">我是true</p>-->
<!--    <p v-if="false">我是false</p>-->
<!--    <p v-if="age >= 18">我是true</p>-->
<!--    <p v-if="age < 18">我是false</p>-->

<!--    <p v-if="age >= 18">成年人</p>-->
<!--    <p>中间的内容</p>-->
<!--    <p v-else>未成年人</p>-->

    <p v-if="score >= 80">优秀</p>
    <p v-else-if="score >= 60">良好</p>
    <p v-else>差</p>
</div>

vue代码：

// 这里就是MVVM中的View Model
let vue = new Vue({
   
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
   
        show: true,
        hidden: false,
        age: 17,
        score: 50
    }
})<