Vue之常用指令

一、概述

　　1、指令是指vue对象的绑定标签内通常有 v- 前缀的特殊属性，每种指令代表一种特殊功能。

　　2、指令连接着data数据与html显示数据，是同步更改的。

　　3、部分指令在vue不同版本中书写的区别，vue1.0+的指令可以在vue2.0+中沿用，反之则不能。

　　　　①对标签内置属性的操作：v-bind: 属性名 ===> : 属性名。　

　　　　②绑定事件：v-on: 事件名 ===> @事件名。

二、内置属性赋值

　　1、基本表达式：<标签名 :属性名="data键名"></标签名>。

　　2、实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="id_div1">
    <p><a :href="url">百度</a></p>
    <p><input :type="type"></p>
</div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {
            url: 'https://www.baidu.com',
            type: 'password',
        },
    })
</script>
</body>
</html>

View Code

三、绑定事件

　　1、基本表达式：<标签名 @事件名="js表达式/vue方法属性名"></标签名>。

　　2、实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="id_div1">
    <p><input type="button" @click="num++" value="+"></p>
    <p><input type="button" @click="cut" value="-"></p>
    <p><span>{{num}}</span></p>
</div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {
            num: 0,
        },
        methods: {
            cut: function () {
                this.num--
            }
        }
    })
</script>
</body>
</html>

View Code

四、控制class属性

　　1、基本表达式：<标签名 : class="data键名/{class名:true, class名: false}/对象式data/数组套对象式data"></标签名>。

　　2、实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <style>
        .cls1 {
            border: orange 5px solid;
        }

        .cls2 {
            color: dodgerblue;
        }

        .cls3 {
            background: lightpink;
        }
    </style>
</head>
<body>
<div id="id_div1">
    <div :class="css1">div1</div>
    <div :class="{cls2:false, cls3:true}">div2</div>
    <div :class="css2">div3</div>
    <div :class="[css1, css2]">div4</div>
</div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {
            css1: 'cls1',
            css2: {
                cls2: true,
                cls3: false,
            },
        },
    })
</script>
</body>
</html>

View Code

五、控制style属性

　　1、直接在data中写style属性。

　　2、实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="id_div1">
    <div :style="style1">div1</div>
    <div :style="[style1, style2]">div2</div>
</div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {
            style1: {
                color: 'red',
            },
            style2: {
                border: '3px orange solid'
            }
        },
    })
</script>
</body>
</html>

View Code

六、条件指令之v-if

　　1、基本表达式：<标签名 v-if="条件表达式/布尔值"></标签名>。

　　2、可以搭配若干个v-else-if和最多一个v-else一起使用。

　　3、实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="id_div1">
    <div v-if="num <= 4">工作日</div>
    <div v-else-if="num == 5">周五</div>
    <div v-else-if="num == 6">周六</div>
    <div v-else="num == 7">周日</div>
</div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {
            num: new Date().getDay()
        },
    })
</script>
</body>
</html>

View Code

七、条件指令之v-show

　　1、基本表达式：<标签名 v-show="条件表达式/布尔值"></标签名>。

　　2、用法与v-if大致相同。

　　3、与v-if的区别：

　　　　①没有组合用法。

　　　　②v-if条件为假时是删除标签，而v-show只是隐藏标签。

　　3、实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="id_div1">
    <div v-if="false">div1</div>
    <div v-show="false">dvi2</div>
    <div>{{msg}}</div>
</div>
<script>
    var tag = document.getElementById('id_div1').children.length
    var vueObj = new Vue({
        el: '#id_div1',
        data: {
            msg: tag
        },
    })
</script>
</body>
</html>

View Code

八、列表指令

　　1、基本表达式(数组式)：<标签名 v-for="临时变量名, 索引 in 数组式data"></标签名>，可以不用索引。

　　2、基本表达式(对象式)：<标签名 v-for="键, 值 in 对象式data"></标签名>，可以不用键。

　　3、实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="id_div1">
    <div>
        <p v-for="l in list1">{{l}}</p>
    </div>
    <div>
        <p v-for="l, index in list1">{{index}} : {{l}}</p>
    </div>
    <dvi>
        <p v-for="v in dict1">{{v}}</p>
    </dvi>
    <div>
        <p v-for="k,v in dict1">{{k}} : {{v}}</p>
    </div>
</div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {
            list1: [
                'tom',
                'jan',
                'pik'
            ],
            dict1: {
                name: 'tom',
                age: 18,
                gender: 'male'
            }
        },
    })
</script>
</body>
</html>

View Code