Vue instruction

1, textual instructions related

v- * is Vue instruction is parsed vue, v-text num = "num" is variable (instruction is limited, is not customizable)
v-text content is outputted as rendering, the rendering control content tag itself would be replaced (
123
Will be replaced num)
v-html content may resolve to render html syntax

<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 basic data types: string, number, Boolean, undefined

2, instruction cape

Since html code is loaded from the down, resulting in the beginning and does not render the data, for example: {{num}}, the page will display {{num}}

Although load quickly, but visible flicker for a moment, in order to avoid this problem, we can take:

At the top of the vue.js import, but not recommended, because the official recommended import in the final surface
Use cloak instruction

<!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, attribute command

1) syntax: v-bind: attribute name = "variable"

2) for different properties, use a slightly difference Diudiu

i) the title and custom properties, direct assignment of use is as follows (t is variable, 'o' is a constant)
```
<p v-bind:title="t" v-bind:owen="'o'">段落</p>
```
ii) class attribute (emphasis):

Variable bindings: The value can be a class name "p1", may also be more than one class name "p1 p2"

Array bound: every member of the array is a variable

Binding dictionaries: key is the class name, value is the name of the class decide whether to play a role (similar to the switch)
iii) style attributes (Learn):

Variable bindings: The value is a dictionary

<!-- 给自定义全局属性绑定变量 -->
<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>

Case:

There are three buttons, the default initialization of a yellow-green, elected in the other button, the color changes to yellow green

<!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>

Properties command shorthand

<!--
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, incident command

Event Instruction:

1) declare instance members in the event method in methods

Method 2) by the label binding event instruction statement: v-on: the event name = "method name event '

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

Method 3) label binding statement by the event instruction and custom parameter passing: v-on: event name = "event method name ()"

 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>

Incident command can be abbreviated as @ symbol:

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

Event supplements and pseudo-class selectors Review

@click: Click
@dblclick: Double-click
@mouseover: suspension
@mouseout: leave
@mousedown: Press
@mouseup: Lift

<!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, form instructions

1) syntax: v-model = "variable"
2) variable v-model bound control is actually value the property value
3) v-model than the v-bind: value to a sensing mechanism for
two-way tie 4) data set:
value variable v-model can be bound to a value mapping form elements of
v-model can also be a new value mapping form elements to the report of the variables

<!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, the conditional instruction

Syntax:v-show="变量" andv-if="变量"

Difference between the two:

v-show in the hidden tabs, using display: none render labels, tags hidden by css
v-if hidden in the label, does not render on the page

v-if the family:

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>

Case:

Click the button to show the different color of div tags

<!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, loop instruction

Syntax: v-for = "ELE in obj" object obj is traversed, ele is traversed to get results every time

In addition to the iterables traversal, and may also traverse the index data such as 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>

Commodity circulation Case:

<!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 Case

<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>

Message Board Cases:
According todolist case, change to a message board case

<!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>

Reception database

Reception difference between the two types of database

localStorage permanent storage
sessionStorage lifecycle with your page tags

    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类型字符串，再进行存储

Part III: Vue instruction