第三篇：Vue指令

Posted 2021-03-10 cnhyk

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第三篇：Vue指令相关的知识，希望对你有一定的参考价值。

Vue指令

1、文本指令相关

v-*是Vue指令，会被vue解析，v-text="num"中的num是变量（指令是有限的，不可以自定义）
v-text是原样输出渲染内容，渲染控制的标签自身内容会被替换掉（
123
会被num替换）
v-html可以解析渲染html语法的内容

<div id="app">
    <!-- 插值表达式 -->
    <p>{{ msg }}</p>
    <!-- eg:原文本会被msg替换 -->
    <p v-text='msg'>原文本</p>
    <!-- 可以解析带html标签的文本信息 -->
    <p v-html='msg'></p>
    <!-- v-once控制的标签只能被赋值一次 -->
    <p v-once>{{ msg }}</p>
</div>
<script type="text/javascript">
    // 指令: 出现在html标签中可以被vue解析处理的全局属性
    new Vue({
        el: "#app",
        data: {
            msg: "message"
        }
    })
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本指令</title>
</head>
<body>
<div id="app">
    <p>{{ num | add(100) }}</p>
    <p v-text="num"></p>
    <p v-text="num">123</p>
    <p v-text="info"></p>
    <p v-html="info"></p>
</div>
</body>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 10,
            info: '<i style="color: red">info内容</i>'
        },
        filters: {
            add: function (a, b) {
                return a + b;
            }
        },
 
    })
</script>
</html>

js基本数据类型：字符串，数字，布尔，undefined

2、斗篷指令

由于html代码是从上往下加载的，导致刚开始并不会渲染到数据，例如：{{num}}，页面只会显示{{num}}

虽然加载很快，但肉眼可见的有一瞬间的闪烁，为了避免这个问题，我们可以采取：

将vue.js在顶部导入，但不推荐，因为官方推荐在最后面导入
使用斗篷指令

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /**
        1）属性选择器，会将v-cloak属性所在的标签隐藏
        2）当vue环境加载后，会将v-cloak属性解析移除，所以内容{{ num }}就会显示出来
        3）而现在vue已经准备完毕，所以用户会直接看到数值10，而不会看到 页面从{{ num }}闪烁成数值10
        */
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <p v-on:click="fn">{{ num }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // v-cloak：避免屏幕闪烁
    new Vue({
        el: '#app',
        data: {
            num: 10
        },
        methods: {
            fn () {
                if (this.num <= 0) {
                    return false;
                }
                this.num -= 2
            }
        }
    })
</script>
</html>

3、属性指令

1）语法：v-bind:属性名="变量"

2）针对不同属性，使用方式稍微有一丢丢区别

i）自定义属性以及title这些，直接赋值的，使用方式如下（t是变量，‘o‘是常量）
```
<p v-bind:title="t" v-bind:owen="'o'">段落</p>
```
ii）class属性(重点):

绑定的变量：值可以为一个类名 "p1"，也可以为多个类名 "p1 p2"

绑定的数组：数组的每一个成员都是一个变量

绑定的字典：key就是类名，value是决定该类名是否起作用（类似开关）
iii）style属性(了解)：

绑定的变量：值是一个字典

<!-- 给自定义全局属性绑定变量 -->
<p v-bind:abc="abc"></p>
<!-- 以原字符串形式绑定全局属性 -->
<p v-bind:title="'abc'"></p>
 
<!-- 单类名绑定 -->
<p v-bind:class="c1"></p>
<!-- 多类名绑定 -->
<p v-bind:class="[c2, c3]"></p>
<!-- 类名状态绑定 -->
<p v-bind:class="{c4: true|false|var}"></p>
<!-- 多类名状态绑定 -->
<p v-bind:class="[{c5: true}, {c6: flase}]"></p>
 
<!-- 样式绑定 -->
<div :style="div_style"></div>
<div :style="{width: '100px', height: '100px', backgroundColor: 'blue'}"></div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data: {
            abc: "abc",
            c1: "p1",
            c2: "p2",
            c3: "p3",
            div_style: {
                width: "200px",
                height: "200px",
                backgroundColor: "cyan"
            }
        }
    })
</script>
<!-- v-bind: 指令可以简写为 : -->

<!--
a是变量，值就是类名
b就是类名，不是变量
c是变量，值为布尔，决定b类是否起作用
d是变量，值可以为一个类名 'p1' 也可以为多个类名 "p1 p2 ..."
calss="p1 b p2 p3"
-->
<p v-bind:class="[a, {b: c}]" v-bind:class="d"></p>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            a: 'p1',
            c: true,
            d: 'p2 p3',
        },
    })
</script>

案例：

有三个按钮，初始化默认第一个为黄绿色，当选中其他的按钮，颜色也变为黄绿色

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>属性指令</title>
    <style>
        .p1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .p2 {
            border-radius: 50%;
        }
 
        .live {
            background-color: yellowgreen;
        }
 
    </style>
</head>
<body>
    <div id="app">
        <!--
        1）标签的属性没有被v-bind绑定，就是同原来一样，基本使用
        2）当被v-bind绑定，就会被vue控制，'值就会变为变量'
        换而言之：如果一个属性要被vue控制，填写变量，就要用v-bind来处理
        -->
        <p class="p1 p2"></p>
        <p v-bind:class="pc" style="color: red; background-color: orange;" v-bind:title="t" v-bind:owen="'o'">段落</p>
 
        <p v-bind:class="pc1"></p>
 
        <p v-bind:class="[pc, cp]"></p>
 
        <p v-bind:class="{p1: 1, p2: 0}"></p>
 
        <!-- a是变量，值就是类名 | b就是类名，不是变量 | c是变量，值为布尔，决定b类是否起作用 -->
        <p v-bind:class="[a, {b: c}]"></p>
 
        <hr>
        <!--
        1）v-bind: 可以简写为 :
        2）v-on: 可以简写为 @
        -->
        <button v-bind:class="{live: isLive == 1}" v-on:click="changeLive(1)">1</button>
        <button v-bind:class="{live: isLive == 2}" v-on:click="changeLive(2)">2</button>
        <button :class="{live: isLive == 3}" @click="changeLive(3)">3</button>
        <hr>
 
        <p style="width: 50px; height: 50px; background-color: pink"></p>
        <p v-bind:style="myStyle"></p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            t: '悬浮提示',
            pc: 'p1',
            cp: 'p2',
            pc1: 'p1 p2',
            a: 'A',
            c: true,
            isLive: 1,
            myStyle: {
                width: '50px',
                height: '50px',
                backgroundColor: 'pink',
                borderRadius: '50%'
            }
        },
        methods: {
            changeLive (index) {
                // this就代表当前vue对象，和app变量等价
                // app.isLive = index;
                this.isLive = index;
            }
        }
    })
</script>
</html>

属性指令简写

<!--
1）v-bind: 可以简写为 :
2）v-on: 可以简写为 @
-->
 
<button v-bind:class="{live: isLive == 1}" v-on:click="changeLive(1)">1</button>
<button :class="{live: isLive == 2}" @click="changeLive(2)">2</button>
<button :class="{live: isLive == 3}" @click="changeLive(3)">3</button>

4、事件指令

事件指令：

1）在实例成员methods中声明事件方法

2）标签通过事件指令绑定声明的方法：v-on:事件名=‘事件方法名‘

        eg：`<button v-on:click="btnClick">按钮</button>`，不加（）会自动传入ev（$event）

3）标签通过事件指令绑定声明的方法，且自定义传参：v-on:事件名="事件方法名()"

 eg: `<button v-on:click="btnClick()">按钮</button>`  不传任何参数

 eg: `<button v-on:click="btnClick($event)">按钮</button>`  传入事件对象，同不写()

 eg: `<button v-on:click="btnClick(10)">按钮</button>`  只传入自定义参数，当然也可以传入事件对象

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <button v-on:click="btnClick">{{ btn1 }}</button>
 
        <button v-on:click="btnClick">{{ btn2 }}</button>
        <hr>
 
        <!-- 直接绑定事件名：系统会在触发事件时(点击时)调用事件方法(fn1)，传给事件方法一个参数(事件对象) -->
        <button v-on:click="fn1">按钮3</button>
 
        <!-- 绑定的事件名后跟着()，不是主动调用事件方法，而是表示在触发事件调用时，传入的参数全由用户自己决定 -->
        <button v-on:click="fn2($event, 10, 20)">按钮4</button>
 
        <hr>
        <button v-on:click="fn(btn1)">{{ btn1 }}</button>
 
        <button v-on:click="fn(btn2)">{{ btn2 }}</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 对比DOM驱动：1）js选择器获取目标标签 2）为目标标签绑定事件 3）在事件中完成相应逻辑
    // var btn = document.getElementsByTagName('button')[0];
    // btn.onclick = function () {
    //     console.log(111111111111);
    // };
 
    /**
     * 一、数据驱动
     *  1）操作是一个功能，使用需要一个方法来控制 2）方法名是变量，所以控制变量就可以控制该方法
     *
     *
     * 二、事件指令
     *  1）在实例成员methods中声明事件方法
     *  2）标签通过事件指令绑定声明的方法： v-on:事件名="事件方法名"
     *      eg: <button v-on:click="btnClick">按钮</button>
     *  3）标签通过事件指令绑定声明的方法，且自定义传参： v-on:事件名="事件方法名()"
     *      eg: <button v-on:click="btnClick()">按钮</button>  不传任何参数
     *      eg: <button v-on:click="btnClick($event)">按钮</button>  传入事件对象，同不写()
     *      eg: <button v-on:click="btnClick(10)">按钮</button>  只传入自定义参数，当然也可以传入事件对象
     */
    new Vue({
        el: '#app',
        data: {
            btn1: '按钮1',
            btn2: '按钮2',
        },
        methods: {
            btnClick () {
                console.log(666)
            },
            fn1 (ev) {
               console.log(ev.clientX, ev.clientY);  // ev.clientX ev指代事件对象，点clientX求的是鼠标点击页面位置的x轴像素
            },
            fn2(ev, n1, n2) {
                console.log(ev, n1, n2);
                console.log(ev.clientX, ev.clientY);
            },
            fn (msg) {
                console.log(msg);
            }
        }
    })
</script>
</html>

事件指令可以简写为@符号：

<!-- v-on: 指令 简写 @ -->
<!-- 不传参事件绑定，但事件回调方法可以获取事件对象 -->
<p @click="fn"></p>
<!-- ()可以传入具体实参 -->
<p @click="fn()"></p>
<!-- ()情况下，事件对象应该显式传入 -->
<p @click="fn($event)"></p>

事件补充和伪类选择器复习

@click: 单击
@dblclick：双击
@mouseover：悬浮
@mouseout：离开
@mousedown：按下
@mouseup：抬起

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>伪类与事件</title>
    <style>
        body {
            /* 不允许文本选中 */
            user-select: none;
        }
        .d1:hover {
            color: orange;
            /* 鼠标样式 */
            cursor: pointer;
        }
        /* 只有按下采用样式，抬起就没了 */
        .d1:active {
            color: red;
        }
        /* div标签压根不支持 :visited 伪类 */
        .d1:visited {
            color: pink;
        }
 
        .d2.c1 {
            color: orange;
        }
        .d2.c2 {
            color: red;
        }
        .d2.c3 {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="d1">伪类操作</div>
        <br><br><br>
        <!--
        click: 单击
        dblclick：双击
        mouseover：悬浮
        mouseout：离开
        mousedown：按下
        mouseup：抬起
        -->
        <div :class="['d2', c]" @click="hFn('c1')" @mouseover="hFn('c2')" @mousedown="hFn('c3')">事件处理</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            c: '',
        },
        methods: {
            hFn (c) {
                this.c = c
            }
        }
    })
</script>
</html>

5、表单指令

1）语法：v-model="变量"
2）v-model绑定的变量控制的其实就是value属性值
3）v-model要比v-bind:value要对一个监听机制
4）数据的双向绑定：
v-model可以将绑定的变量值映射给表单元素的value
v-model还可以将表单元素的新value映射给报道的变量

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>表单指令</title>
</head>
<body>
    <div id="app">
        <form action="" method="">
<!--            <input name="n1" type="text" :value="v1">-->
<!--            <input name="n2" type="text" :value="v1">-->
 
            <!--
                1）语法：v-model="变量"
                2）v-model绑定的变量控制的其实就是value属性值
                3）v-model要比v-bind:value要对一个监听机制
                4）数据的双向绑定：
                    v-model可以将绑定的变量值映射给表单元素的value
                    v-model还可以将表单元素的新value映射给报道的变量
            -->
            <input name="n1" type="text" v-model="v1">
            <input name="n2" type="text" v-model="v1">
            <p @click="v1 = '点击了'">{{ v1 }}</p>
 
            <button type="submit">提交</button>
        </form>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            v1: '123'
        }
    })
</script>
</html>

<div id="app">
    <!-- v-model针对于表单元素 -->
    <form action="" method="get">
        <!-- 1、双向绑定：服务于文本输入框 -->
        <!-- v-model存储的值为输入框的value值 -->
        <div>
            <input type="text" name="usr" v-model="in_val">
            <input type="password" name="ps" v-model="in_val" >
            <textarea name="info" v-model="in_val"></textarea>
        </div>
 
        <!-- 2、单选框 -->
        <div>
            <!-- 单选框是以name进行分组，同组中只能发生单选 -->
            <!-- v-model存储的值为单选框的value值 -->
            男：<input type="radio" name="sex" value="男" v-model="ra_val">
            女：<input type="radio" name="sex" value="女" v-model="ra_val">
            {{ ra_val }}
        </div>
 
        <!-- 3、单一复选框 -->
        <!-- v-model存储的值为true|false -->
        <!-- 或者为自定义替换的值 -->
        <div>
            <input type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />
            {{ sin_val }}
        </div>
 
        <!-- 4、多复选框 -->
        <!-- v-model存储的值为存储值多复选框value的数组 -->
        <div>
            <input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
            <input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
            <input type="checkbox" value="不挑" name="cless" v-model='more_val' />
            {{ more_val }}
        </div>
    </form>
</div>
 
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            in_val: '',
            // 默认值可以决定单选框默认选项
            ra_val: '男',
            // 默认值为true，单一复选框为选中，反之false为不选中
            sin_val: '',
            // 数组中存在的值对应的复选框默认为选中状态
            more_val: ['喜好女的','不挑']
        }
    })
</script>

6、条件指令

语法：v-show="变量" 和 v-if="变量"

两者的区别：

v-show在隐藏标签时，采用display:none渲染标签，标签通过css隐藏
v-if在隐藏标签时，不会渲染在页面上

v-if的家族：

3）v-if有家族：v-if | v-else-if | v-else
    v-if是必须的，必须设置条件
    v-else-if可以为0~n个，必须设置条件
    v-else可以为0~1个
   上方分支成立会屏蔽下方所有分支，从上至下依次类推

<div id="app">
    <button @click="toggle">显隐切换</button>
    <!-- v-if -->
    <div class="box r" v-if="isShow"></div>
    <!-- v-show -->
    <div class="box o" v-show="isShow"></div>
    <!-- 1.条件渲染的值为true|false -->
    <!-- 2.true代表标签显示方式渲染 -->
    <!-- 3.false v-if不渲染到页面,v-show以display:none渲染到页面,但也不会显示 -->
 
    <!-- v-if v-else-if v-else 案例 -->
    <ul>
        <li @mouseover="changeWrap(0)">red</li>
        <li @mouseover="changeWrap(1)">green</li>
        <li @mouseover="changeWrap(2)">blue</li>
    </ul>
    <!-- red页面逻辑结构 -->
    <div class="wrap red" v-if="tag == 0" key="0">...</div>
    <!-- green页面逻辑结构 -->
    <div class="wrap green" v-else-if="tag == 1" key="1">...</div>
    <!-- blue页面逻辑结构 -->
    <div class="wrap blue" v-else key="2">...</div>
    <!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 -->
    <!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 -->
 
    <!-- v-show 案例 -->
    <ul>
        <li @mouseover="changeMain(0)">red</li>
        <li @mouseover="changeMain(1)">green</li>
        <li @mouseover="changeMain(2)">blue</li>
    </ul>
    <!-- red页面逻辑结构 -->
    <div class="main red" v-show="whoShow(0)">...</div>
    <!-- green页面逻辑结构 -->
    <div class="main green" v-show="whoShow(1)">...</div>
    <!-- blue页面逻辑结构 -->
    <div class="main blue" v-show="whoShow(2)">...</div>
</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            isShow: false,
            tag: 0,
            flag: 0
        },
        methods: {
            toggle () {
                this.isShow = !this.isShow;
            },
            changeWrap (num) {
                this.tag = num;
            },
            changeMain (num) {
                // this.flag num
                this.flag = num;
            },
            whoShow (num) {
                // this.flag num
                return this.flag == num;
            }
        }
    })
</script>

案例：

点击按钮，展现不同颜色的div标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        body {
            margin: 0
        }
        button {
            width: 60px;
            line-height: 40px;
            float: right;
        }
        .bGroup:after {
            display: block;
            content: '';
            clear: both;
        }
        .box {
            /* vw: view width  vh: view height*/
            width: 100vw;
            height: 200px;
        }
        .red {
            background-color: red;
        }
        .green {
            background-color: green;
        }
        .blue {
            background-color: blue;
        }
 
        button.active {
            background-color: cyan;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="bGroup">
            <button :class="{active: isShow === 'red'}" @click="isShow = 'red'">红</button>
            <button :class="{active: isShow === 'green'}" @click="isShow = 'green'">绿</button>
            <button :class="{active: isShow === 'blue'}" @click="isShow = 'blue'">蓝</button>
        </div>
        <div>
            <div v-if="isShow === 'red'" class="box red"></div>
            <div v-else-if="isShow === 'green'" class="box green"></div>
            <div v-else class="box blue"></div>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: 'red'
        }
    })
</script>
</html>

7、循环指令

语法：v-for="ele in obj" obj是被遍历的对象，ele是遍历得到的每一次结果

除了遍历出可迭代对象，还可以遍历出索引以及key等数据

/**
* 遍历可迭代对象的首要结果，都是可迭代对象容器中的值，其次还可以遍历得到索引及键等数据
*      字符串：v-for="v in str"  |  v-for="(v, i) in str"
*      数组：v-for="v in arr"  |  v-for="(v, i) in arr"
*      对象：v-for="v in obj"  |  v-for="(v, k) in obj"  |  v-for="(v, k, i) in obj"
* 注：v-for遍历要依赖于一个所属标签，该标签及内部所有内容会被遍历复用
*/

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>循环指令</title>
</head>
<body>
    <div id="app">
        <!-- 遍历数字
        5
        【1】【2】【3】【4】【5】
        -->
        <p>{{ d1 }}</p>
        <i v-for="e in d1">【{{ e }}】</i>
        <hr>
 
        <!-- 遍历字符串
        abc
        【a】【b】【c】
        【0a】【1b】【2c】
        -->
        <p>{{ d2 }}</p>
        <i v-for="e in d2">【{{ e }}】</i>
        <i v-for="(e, i) in d2">【{{ i }}{{ e }}】</i>
        <hr>
 
        <!-- 遍历数组
        [ 1, 3, 5 ]
        【1】【3】【5】
        【01】【13】【25】
        -->
        <p>{{ d3 }}</p>
        <i v-for="e in d3">【{{ e }}】</i>
        <i v-for="(e, i) in d3">【{{ i }}{{ e }}】</i>
        <hr>
 
        <!-- 遍历对象
        { "name": "Bob", "age": 17.5, "gender": "男" }
        【Bob】【17.5】【男】
        【name-Bob】【age-17.5】【gender-男】
        【name-Bob-0】【age-17.5-1】【gender-男-2】
        -->
        <p>{{ d4 }}</p>
        <i v-for="e in d4">【{{ e }}】</i>
        <i v-for="(e, k) in d4">【{{ k }}-{{ e }}】</i>
        <i v-for="(e, k, i) in d4">【{{ k }}-{{ e }}-{{ i }}】</i>
        <hr>
 
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            d1: 5,
            d2: 'abc',
            d3: [1, 3, 5],
            d4: {
                name: "Bob",
                age: 17.5,
                gender: "男"
            }
        }
    })
</script>

<div id="app">
    <h1>{{ msg }}</h1>
    <!-- v-for="item in items" -->
    <!-- 遍历的对象: 数组[] 对象(字典){} -->
    <ul>
        <li>{{ list[0] }}</li>
        <li>{{ list[1] }}</li>
        <li>{{ list[2] }}</li>
        <li>{{ list[3] }}</li>
        <li>{{ list[4] }}</li>
    </ul>
 
    <!-- n为遍历的元素值 -->
    <ul>
        <li v-for="n in list">{{ n }}</li>
    </ul>
 
    <!-- 一般列表渲染需要建立缓存 -->
    <!-- 列表渲染是循环,需要赋值变量给key,使用key需要v-bind:处理 -->
    <!-- v-for变量数组[]时,接收两个值时,第一个为元素值,第二个为元素索引 -->
    <ul>
        <li v-for="(n, i) in list" :key="i">value:{{ n }} | index: {{ i }}</li>
    </ul>
 
    <ul>
        <li>{{ dic['name'] }}</li>
        <li>{{ dic.age }}</li>
        <li>{{ dic.gender }}</li>
    </ul>
 
    <!-- v-for变量对象{}时,接收三个值时,第一个为元素值,第二个为元素键,第三个为元素索引 -->
    <ul>
        <li v-for="(v, k, i) in dic" :key="k">value:{{ v }} | key:{{ k }} | index: {{ i }}</li>
    </ul>
 
 
    <!-- 遍历的嵌套 -->
    <div v-for="(person, index) in persons" :key="index" style="height: 21px;">
        <div v-for="(v, k) in person" :key="k" style="float: left;">{{ k }} : {{ v }}&nbsp;&nbsp;&nbsp;</div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            msg: "列表渲染",
            list: [1, 2, 3, 4, 5],
            dic: {
                name: 'zero',
                age: 88888,
                gender: 'god'
            },
            persons: [
                {name: "zero", age: 8},
                {name: "egon", age: 78},
                {name: "liuXX", age: 77},
                {name: "yXX", age: 38}
            ]
        }
    })
</script>

商品循环案例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>循环案例</title>
    <style>
        .box {
            width: 280px;
            border: 1px solid #eee;
            border-radius: 5px;
            overflow: hidden; /* 隐藏超出父级显示范围外的内容 */
            text-align: center; /* 文本相关的属性大多默认值是inherit */
            float: left;
            margin: 10px;
        }
        .box img {
            width: 100%;
        }
 
    </style>
</head>
<body>
    <div id="app">
        <!--
        <div class="box">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg" alt="">
            <p>纯种拆家专家</p>
        </div>
        -->
 
        <div class="box" v-for="obj in goods">
            <img :src="obj.img" alt="">
            <p>{{ obj.title }}</p>
        </div>
 
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /* 伪代码，模拟请求后台数据
    let data = null;
 
    import jq
    $.ajax({
        url: '',
        type: 'get',
        data: {
 
        },
        success (response) {
            data = response.data
        },
    });
    */
 
    // 前台先制作假数据进行测试
    let goods = [
        {
            "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
            "title": "纯种拆家专家"
        },
        {
            "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
            "title": "纯种拆家专家"
        },
        {
            "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
            "title": "纯种拆家专家"
        }
    ];
 
    new Vue({
        el: '#app',
        data: {
            goods,
        }
    })
</script>
</html>

8、todolist案例

<div id="app">
    <div>
        <input type="text" v-model="val">
        <button type="button" @click="submitMsg">提交</button>
    </div>
    <ul>
        <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li>
    </ul>
    {{ list }}
</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            val: "",
            list: []
        },
        methods: {
            submitMsg () {
                if (this.val) {
                    this.list.push(this.val);
                    this.val = ""
                }
            },
            removeMsg(index) {
                this.list.splice(index, 1)
            }
        }
    })
</script>

留言板案例：
根据todolist案例，改变为一个留言板案例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <style>
        li:hover {
            color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <form>
            <input type="text" v-model="info">
            <button type="button" @click="sendInfo">留言</button>
        </form>
        <ul>
            <li v-for="(info, index) in info_arr" @click="deleteInfo(index)">{{ info }}</li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            info: '',
            // 三目运算符： 条件 ? 结果1 : 结果2
            info_arr: localStorage.info_arr ? JSON.parse(localStorage.info_arr) : [],
        },
        methods: {
            sendInfo () {
                // 完成留言：将info添加到info_arr
                // 增 push unshift | 删 pop shift
                if (this.info) {
                    // 留言
                    this.info_arr.push(this.info);
                    // 清空输入框
                    this.info = '';
                    // 前台数据持久化(缓存)
                    localStorage.info_arr = JSON.stringify(this.info_arr);
                }
            },
            deleteInfo(index) {
                // 删
                this.info_arr.splice(index, 1);
                // 同步给数据库
                localStorage.info_arr = JSON.stringify(this.info_arr);
            }
        }
    })
</script>
 
<script>
    let arr = [1, 2, 3];
    console.log(arr);
    // 参数：开始索引，操作长度，操作的结果们，splice函数可以完成增删改插所有功能
    arr.splice(1, 2);
    console.log(arr);
</script>
<script>
    let a = [1, 2, 3];
    localStorage.arr = JSON.stringify(a);
    let b = JSON.parse(localStorage.arr);
    console.log(b);
 
</script>
</html>

前台数据库

两种前台数据库类型的区别

localStorage 永久存储
sessionStorage 生命周期同所属页面标签

    localStorage | sessionStorage
    1）操作就类似于obj，直接 .key 语法访问 value
    2）localStorage永久存储
    3）sessionStorage生命周期同所属页面标签
 
    // 前台数据库
 
    // 存
    // 持久化化存储，永远保存
    // localStorage.name = "Bob";
    // 持久化化存储，生命周期同所属标签(页面)，页面关闭，重新打开就会丢失
    // sessionStorage.name = "Tom";
 
    // 取
    // console.log(localStorage.name);
    // console.log(sessionStorage.name);
 
    // 清空
    // localStorage.clear();
    // sessionStorage.clear();
    
    // 删除单个key：value
    // localStorage.removeItem(key)
 
    // 短板：只能存储字符串，所有对象和数组需要转换为json类型字符串，再进行存储

以上是关于第三篇：Vue指令的主要内容，如果未能解决你的问题，请参考以下文章

第三十三篇 vue

saltstack-gdlwolf自学总结第三篇： salt常用指令

vue学习第三篇：vue之node.js的简单介绍

Vue入门教程第三篇（条件与循环）

嵌入式编程第三篇：MDK中链接脚本解析

vscode代码片段生成vue模板