Vue框架——Vue指令

Posted aheng

tags:

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

Vue框架——Vue指令

斗篷指令(了解)

v-cloak:避免屏幕闪烁

  • 属性选择器,会将v-cloak属性所在的标签隐藏
  • 当vue环境加载后,会将v-cloak属性解析移除,所以内容{{ num }}就会显示出来
  • 而现在vue已经准备完毕,所以用户会直接看到数值10,而不会看到 页面从{{ num }}闪烁成数值10
<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app" v-cloak>
    <p>{{ num }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 10
        },
    })
</script>

属性指令

  • 1)语法:v-bind:属性名="变量"

  • 2)针对不同属性,使用方式稍微有一丢丢区别

    • ①:自定义属性以及title这些,直接赋值的,使用方式如下(t是变量,‘o‘是常量)

      • <p v-bind:title="t" v-bind:owen="'o'">段落</p>
        
        <p v-bind:title="t" v-bind:owen="'o'">段落</p>
        <script>
            new Vue({
                el: '#app',
                data: {
                    t: '悬浮提示',
                },
            })
        </script>
    • ②:class属性(重点):

      • 绑定的变量:值可以为一个类名 "p1",也可以为多个类名 "p1 p2"

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

      • 绑定的字典:key就是类名,value是绝对该类名是否起作用

      • <!-- 
          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>
    • ③:style属性(了解):

      • 绑定的变量:值是一个字典

      • <p v-bind:style="myStyle"></p>
        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    myStyle: {
                        width: '50px',
                        height: '50px',
                        backgroundColor: 'pink',
                        borderRadius: '50%'
                    }
                },
            })
        </script>

案例:

<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 v-bind:class="{live: isLive == 3}" v-on:click="changeLive(3)">3</button>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            isLive: 1,
        },
        methods: {
            changeLive (index) {
                // this就代表当前vue对象,和app变量等价
                // app.isLive = index;
                this.isLive = index;
            }
        }
    })
</script>  

重点:事件指令与属性指令都可以简写

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

事件补充

<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>
<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>
<script>
    new Vue({
        el: '#app',
        data: {
            c: '',
        },
        methods: {
            hFn (c) {
                this.c = c
            }
        }
    })
</script>

表单指令

  • 语法:v-model="变量"
  • v-model绑定的变量控制的其实就是value属性值
  • v-model要比v-bind:value要对一个监听机制
  • 数据的双向绑定:
    • v-model可以将绑定的变量值映射给表单元素的value
    • v-model还可以将表单元素的新value映射给绑定的变量
<!-- 两个输入框内容会同时变化 -->
<input name="n1" type="text" v-model="v1">
<input name="n2" type="text" v-model="v1">
<script>
    new Vue({
        el: '#app',
        data: {
            v1: ''
        }
    })
</script>

条件指令

  • 1)语法:v-show="变量" | v-if="变量"
  • 2)两者的区别:
    • v-show在隐藏标签时,采用display:none渲染标签,标签通过css隐藏
    • 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">
    <div>
        <p v-show="isShow">show控制显隐</p>
        <p v-if="isShow">if控制显隐</p>
    </div>

    <div>
        <p v-if="0">你是第1个p</p>
        <p v-else-if="0">你是第2个p</p>
        <p v-else>你是第3个p</p>
    </div>

</div>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: false,
        }
    })
</script>

案例

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

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

<script>
    new Vue({
        el: '#app',
        data: {
            isShow: 'red'
        }
    })
</script>

循环指令

  • 语法:v-for="ele in obj" obj是被遍历的对象,ele是遍历得到的每一次结果
  • 遍历可迭代对象的首要结果,都是可迭代对象容器中的值,其次还可以遍历得到索引及键等数据
    • 字符串: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>

js的Array操作

"""
尾增:arr.push(ele)  
首增:arr.unshift(ele)
尾删:arr.pop()
首删:arr.shift()
增删改插:arr.splice(begin_index, count, args)
"""

前台数据库

"""
// 存
// 持久化化存储,永远保存
localStorage.name = "Bob";
// 持久化化存储,生命周期同所属标签(页面),页面关闭,重新打开就会丢失
sessionStorage.name = "Tom";

// 取
console.log(localStorage.name);
console.log(sessionStorage.name);

// 清空
localStorage.clear();
sessionStorage.clear();

// 短板:只能存储字符串,所以对象和数组需要转换为json类型字符串,再进行存储
let a = [1, 2, 3];
localStorage.arr = JSON.stringify(a);
let b = JSON.parse(localStorage.arr);
console.log(b);
"""

综合案例:(留言板)

<style>
    li:hover {
        color: red;
        cursor: pointer;
    }
</style>

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

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

以上是关于Vue框架——Vue指令的主要内容,如果未能解决你的问题,请参考以下文章

Vue框架——Vue指令

Vue框架简介,实例成员,事件,过滤器,文本事件和属性指令

web框架之Vue渐进式框架-安装入门简介(python3入门)

Vue框架——Vue导读Vue实例(挂载点el数据data过滤器filters)Vue指令(文本指令v-text事件指令v-on属性指令v-bind表单指令v-model)

前端-vue框架介绍

Vue框架