VUE相关指令

Vue.js核心指令详解

最新推荐文章于 2024-10-11 22:01:15 发布

原创最新推荐文章于 2024-10-11 22:01:15 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨Vue.js框架中的核心指令，包括文本类指令、v-bind、v-on、v-model等，讲解它们的功能、用法及注意事项，帮助开发者掌握Vue.js的动态数据绑定和DOM操作技巧。

一,文本类指令

相互绑定的两种方式:1,绑定的变量是一样的,2,{[]}插值表达式中的变量值和绑定的变量一致

v-text:文本格式,原文本会被替换
v-html:可以解析带html标签的文本信息
v-once:文本只能被赋值一次

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文本类指令</title>
    <style>
        p {
            line-height: 20px;
            background-color: #83c44e;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--html全局属性语法: 全局属性名="属性值"-->
        <p v-bind:title="title" a="a" b="b">这是P</p>
        <!-- v-model也是对文本操作的指令,操作的是表单元素的value文本 -->
        <input type="text" v-model="msg">
        <!--下面的四种形式跟着上面输入的内容一起变化-->
        <p>{{ msg }}</p>
        <p v-text='msg'>原文本</p>
        <p v-html='msg'></p>
        <p v-once>{{ msg }}</p>
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script>
    new Vue ({
        //指令:出现在html标签中可以被vue解析处理的全局属性
        e1: "#app",
        data: {
            title: '',
            msg: "message"
        }
    })
</script>
</html>

二,避免闪烁

在vue更改html中的值得时候,刷新的快会产生闪烁的现象

两种方式1,把Vue的源文件直接导入到html文件的开始

2,在需要更改的div里面加入v-cloak属性,在css中利用属性查找,查找到以后display:none
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>避免闪烁问题的两种方式</title>
    <script src="js/vue-2.5.17.js"></script>
    
</head>
<body>
    <div id="app" v-cloak>
        {{ msg }}
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            msg: "message"
        }
    })
</script>
</html>

三,v-bind指令

1,该指令绑定的是属性(Html标签的全局属性)

2,绑定之后的属性的属性值可以由变量控制

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>v-bind指令</title>
    <style>
        .abc {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--绑定之后属性的值可以由变量控制-->
        <p v-bind:abc="abc">哀其不幸，怒其不争。</p>
        <!--绑定后,操作的普通字符串-->
        <p v-bind:title="'t2'">不满足是向上的齿轮。</p>
        <!--多类名:单一变量操作-->
        <!--1,给一个变量赋值两个 2,标签中放入一个列表,分别赋值(建议)-->
        <p v-bind:title="t3">渡尽劫波兄弟在，相逢一笑泯恩仇。</p>
        <p v-bind:title="[t4,tt4]">躲进小楼成一统，管它冬夏与春秋。</p>
        <!--绑定class的{}语法 {key:value}  key就是实际的类名,value就是表示类的显隐,只能存在true和false,或者是变量代表着两个值-->
        <p v-bind:class="{abc:false}">横眉冷对千夫指，俯首甘为孺子牛。</p>
        <p v-bind:class="{abc: t5}" v-on:click="fn">改造自己，总比禁止别人来得难。</p>
        <!--class的[] {} 结合使用-->
        <p v-bind:class="[{p6: t6}, {pp6: tt6}]">单是说不行，要紧的是做.</p>
        <!--v-bind:指令可以简写为:(冒号)-->
        <p :class="'simple'">简写</p>
        <!--操作style:style一般是多条样式(1,可以在vue中添加2,可以在标签中直接添加)-->
        <div :style="div_style"></div>
        <div :style="{width: '100px', height: '100px', backgroundColor: 'blue'}"></div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            abc:'博闻强识',
            t1: 'p1的title',
            t3:'p pp',
            t4: 'p',
            tt4: 'pp',
            t5: false,
            t6: true,
            tt6: true,
            div_style: {
                width: "200px",
                height: "200px",
                backgroundColor: "cyan"
            }
        },
        methods: {
            //t5的点击特效,相互切换
            fn () {
                this.t5 = !this.t5;
            }
        }
    })
</script>
</html>

四 v-on指令(简写@)

后面绑定的是事件,直接操作的是方法名

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>v-on指令</title>
    <style>
        p {
            width: 100px;
            height: 100px;
            background-color: orange
        }
    </style>
</head>
<body>
    <div id="app">
        <p @click="fn1"></p>
        <!--直接绑定方法名,不会携带自定义参数,但回调时只能取到自定义参数,事件参数ev丢失-->
        <p @click="fn2"></p>
        <!--带()的方法绑定,只传自定义参数,回调时只能取到自定义参数,事件参数ev丢失-->
        <p @click="fn3(10)"></p>
        <!-- 带()的方法绑定,传入自定义参数同时,显式传入事件$event,回调时可以取到自定义参数及事件参数ev -->
        <p @click="fn4($event, 10, 20)"></p>
        <p @click="fn5(10, $event, 20)"></p>
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script>
    new Vue ({
        e1:'#app',
        methods: {
            //定义新的方法(可以简写),当点击事件触发时,函数体代码执行
            fn1:function () {
                console.log('click')
            },
            fn2 (ev) {
                console.log(ev);
            },
            fn3 (num) {
                console.log(num);
            },
            fn4 (ev, n1, n2) {
                // console.log(ev);
                console.log(n1);
                console.log(n2);
            },
            fn5 (n1, ev, n2) {
                console.log(ev);
            }
        }
    })
</script>
</html>

五,v-model指令

数据的双向绑定:v-model绑定的是value,所以可以省略

(也就是把输入的值全部赋值给v-model绑定的值,必须在vue中给赋值"")

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>v-model指令</title>
</head>
<body>
    <div id="app">
        <form action="">
            <!--v-model相同的两个,其中一个改变,就会同时改变-->
            <input type="text" v-model="val" name="txt1">
            <textarea v-model="val1"></textarea>
            <p v-text="val1"></p>
            <!--单一复选框:val2值为true|false的变量,控制单选框是否被选中-->
            <input type="checkbox" v-model="val2" name="ck1">
            <!--val3值"选中|未选中"为自定义,控制单选框是否被选中(下面已经把选中和未选中的值改变,赋值的时候需要注意了)-->
            <!--正常情况下,选中的状态提交后台是on, 未选中的状态不提交后台-->
            <input type="checkbox" v-model='val3' true-value="选中" false-value="未选中" name="ck2" />
            <!-- 多复选框 :v-model需要绑定一个变量-->
            <!--该变量为数组数据,存放的是复选框选中的值,出现在vue中给val4赋值的对应复选框选中的状态-->
            <div>
                篮球<input type="checkbox" value="lq" v-model="val4" name="ck3">
                足球<input type="checkbox" value="zq" v-model="val4" name="ck3">
                乒乓球<input type="checkbox" value="ppq" v-model="val4" name="ck3">
            </div>
            <!--单选框-->
            <div>
                男:<input type="radio" value="男" v-model='val5' name="sex" />
                女:<input type="radio" value="女" v-model='val5' name="sex" />
            </div>
            <button type="submit">提交</button>
        </form>
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script>
    new Vue({
        el: "#app",
        //v-model分别在不同的表单中代表的值又或者是默认值
        data: {
            val1: "",
            val2: false,
            val3: "选中",
            val4: ['lq', 'ppq'],
            val5: "女",
        }
    })
</script>
</html>

六,条件渲染:

1,条件渲染的值为true|false

2,true代表标签显示方式渲染

3,false v-if不渲染到页面,v-show以display:none渲染到页面,但是不会显示

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>条件渲染相关指令</title>
    <script src="js/vue-2.5.17.js"></script>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
        }
        .r {background-color: red}
        .o {background-color: orange}
    </style>
    <style type="text/css">
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrap, .main {
            width: 500px;
            height: 240px;
        }
        li {
            float: left;
            background-color: #666;
            margin-right: 20px;
        }
        ul:after {
            content: "";
            display: block;
            clear: both;
        }
        .red {background-color: red}
        .green {background-color: green}
        .blue {background-color: blue}
    </style>
</head>
<body>
    <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>

        <!--使用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>
        <div class="wrap red" v-if="tag == 0" key="0">0</div>
        <div class="wrap green" v-else-if="tag == 1" key="1">1</div>
        <div class="wrap blue" v-else="tag == 2" key="2">2</div>
        <!--v-if相关分支操作,在未显示情况下,是不会被渲染到页面中-->
        <!--通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度-->
        <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>
</body>
<script>
    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>
</html>

七,列表渲染

1,一般列表渲染需要建立缓存,需要使用变量key,而使用变量key必须使用v-bind绑定
2,v-for变量数组[]时,接收两个值时,第一个为元素值,第二个值为元素的索引
3,v-for接收三个值时(并且接受的是个字典时),用(元素值,元素键,元素的索引)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>列表渲染的相关命令</title>
</head>
<body>
    <div id="app">
        <h1>{{ msg }}</h1>
        <ul>
            <li>{{ list[0] }}</li>
            <li>{{ list[1] }}</li>
            <li>{{ list[2] }}</li>
            <li>{{ list[3] }}</li>
            <li>{{ list[4] }}</li>
        </ul>
        <ul>
            <li v-for="n in list">{{ n }}</li>
        </ul>
        <ul>
            <li v-for="(n, i) in list" :key="i">value:{{ n }} | index: {{ i }}</li>
        </ul>

        <ul>
            <!--想要取vue中的值时,直接在插值文本中取就好-->
            <li>{{ dic['name'] }}</li>
            <li>{{ dic.age }}</li>
            <li>{{ dic.gender }}</li>
        </ul>
        <!--当接受的三个变量-->
        <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>
</body>
<script src="js/vue-2.5.17.js"></script>
<script>
    new Vue ({
        el: '#app',
        data: {
            msg: '列表渲染',
            list: [1,2,3,4,5],
            dic: {
                name: '小VV',
                age: 88888,
                gender: '神'
            },
            persons: [
                {name: "zero", age: 8},
                {name: "egon", age: 78},
                {name: "liuXX", age: 77},
                {name: "yXX", age: 38}
            ]
        }
    })
</script>
</html>

八,todoList案例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>todolist案例</title>
</head>
<body>
    <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>
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script>
    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>
</html>