码迷，mamicode.com
首页 > 其他好文 > 详细

第三篇：Vue指令

时间：2020-02-14 10:28:17      阅读：62      评论：0      收藏：0      [点我收藏+]

标签：v-cloak   模拟请求   就是   tms   har   btn   set   model   位置   

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

标签：v-cloak   模拟请求   就是   tms   har   btn   set   model   位置   

原文地址：https://www.cnblogs.com/cnhyk/p/12306291.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！