Vue.js学习笔记（二）——指令

什么是指令？

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

Vue.js给我们提供的指令有很多，例如

v-model

、

v-for

、

v-on

、

v-bind

等

Vue.js学习笔记（二）——指令

v-model

它负责监听用户的输入事件，从而更新数据。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{ message }}</p>
        <input type="text" name="" id="" v-model="message">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: 'hello vue'
        }
    })
</script>

</html>

v-model

能实现双向数据绑定，即模型数据变化视图数据跟着变化，视图数据变化模型数据跟着变化，它是双向的。

方向一：模型到视图的变化。一旦模型数据发生变化，视图上面立马显示最新的数据。

方向二：视图到模型的变化。一般视图上面有数据变化，模型里面可以获取到最新的数据。

v-for

用于循环遍历数组或对象数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>my info</h2>
        <p>id：{{ id }}</p>
        <p>名字：{{ username }}</p>
        <p>是否vip：{{ isVip }}</p>
        <hr>
        <h2>使用v-for遍历</h2>
        <p>遍历habby数组，不带索引</p>
        <ul>
            <li v-for="ele in habby">{{ ele }}</li>
        </ul>
        <p>遍历habby数组，带索引</p>
        <ul>
            <li v-for="(ele, index) in habby">{{ index }} : {{ ele }}</li>
        </ul>
        <p>遍历habby数组，带索引，使用 + 进行拼接</p>
        <ul>
            <li v-for="(ele, index) in habby">{{ index + ' : ' + ele }}</li>
        </ul>
        <hr>
        <h2>遍历friend对象数组</h2>
        <p>遍历friend对象数组</p>
        <ul v-for="ele in friend">
            <li>{{ ele.id }}</li>
            <li>{{ ele.username }}</li>
            <li>{{ ele.age }}</li>
        </ul>
        <p>遍历friend对象数组，属性名 和 属性值</p>
        <ul>
            <li v-for="(val, key) in friend">{{ key + ':' + val['username'] + '-' + val['age']}}</li>
        </ul>
    </div>    
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id: 1,
            username: 'andy',
            isVip: true,
            habby: ['sing', 'jump', 'rap'],
            friend: [
                {
                    id: 1,
                    username: 'sundy',
                    age: 18
                },
                {
                    id: 2,
                    username: 'dawei',
                    age: 23
                },
                {
                    id: 3,
                    username: 'siri',
                    age: 12
                }
            ]
        }
    })
</script>
</html>

v-html

将数据里面的html标签被解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-html='tip'>

        </div>
    </div>    
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            tip: `<h2>html标签被解析</h2>`
        }
    })
</script>
</html>

Vue.js学习笔记（二）——指令

v-text

数据里面的html标签不被解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-text='tip'>

        </div>
    </div>    
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            tip: `<h2>html标签不被解析</h2>`
        }
    })
</script>
</html>

Vue.js学习笔记（二）——指令

v-bind

该指令可以绑定属性，例如我们绑定图片的src属性，Vue实例对象提供图片地址。如果不通过该指令而直接绑定数据，是无法显示图片的。

完整写法—— v-bind:属性名
简化写法—— :属性名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>百度logo</h2>
        <p>直接使用src，无法访问图片</p>
        <img src='imgLogo' alt="logo">
        <hr>
        <p>v-bind完整写法</p>
        <img v-bind:src='imgLogo' alt="logo">
        <hr>
        <p>v-bind简化写法</p>
        <img :src='imgLogo' alt="logo">
    </div>    
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            imgLogo: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
        }
    })
</script>
</html>

Vue.js学习笔记（二）——指令

v-if

v-else-if

v-else

以上三种指令用于条件渲染，相当于

if

、

if...else...

、

if...else if...

语法。

通过案例演示：模拟是否登录的场景，当isLogin为true时表示已经登录，显示用户名和退出；当isLogin为false时表示未登录，显示注册和登录。这里只是为了演示这两个指令的用法，所以可以手动更改isLogin的值。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--未登录-->
    <!-- v-if的结果为真的时候显示 -->
    <ul v-if="!isLogin">
        <li><a href="#">注册</a></li>
        <li><a href="#">登录</a></li>
    </ul>
    <!--已经登录-->
    <ul v-else>
        <li><b>{{ userName }}</b></li>
        <li><a href="#">退出</a></li>
    </ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            title: 'hi vuejs!',
            isLogin: false, // false表示没登录，true表示已登录
            userName: '张三', 
        }
    });
</script>
</html>

当isLogin为false时，表示未登录，显示 v-if 指令下的内容

Vue.js学习笔记（二）——指令
当isLogin为true时，表示已登录，显示 v-else 指令下的内容

Vue.js学习笔记（二）——指令
注意：使用 v-else 或者 v-else-if 指令时，前一兄弟元素必须有 v-if 或 v-else-if 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input v-model="type"></input>
        <div v-if="type === 'A'">
            A
          </div>
          <div v-else-if="type === 'B'">
            B
          </div>
          <div v-else-if="type === 'C'">
            C
          </div>
          <div v-else>
            Not A/B/C
          </div>
    </div>    
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            type: 'A'
        }
    })
</script>
</html>

v-cloak

该指令不需要表达式。

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

简单来说就是因为我们使用了Mustache 标签(双大括号)，在页面加载的时候，会有闪烁的现象，所以为了防止闪烁现象的发生，我们可以在css规则里定义 [v-cloak] { display: none } ，在不想出现闪烁的标签上加上

v-cloak

即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*<!--在style标签里面设置一个 v-cloak 属性选择器，设置属性值-->*/
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--v-cloak 在不希望出现闪烁的地方加上 v-cloak 指令-->
        <p v-cloak>{{ tip }}</p>
        <!--最后 vue 删除所有的 v-cloak-->
    </div>    
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            tip: `<h2>标题</h2>`
        }
    })
</script>
</html>

v-show

该指令控制显示和隐藏，它的值有true和false两个状态，相当于切换css里面

display

属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 当isShow值为true时显示该段文字，当isShow值为false时隐藏该段文字 -->
        <p v-show="isShow">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, culpa similique. Aliquid architecto velit totam mollitia, id ex commodi? Quas dolor commodi totam harum quod voluptatibus veritatis, officia pariatur consequatur.</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isShow: true
        }
    })
</script>
</html>

当isShow值为true时显示

Vue.js学习笔记（二）——指令
当isShow值为false时隐藏

v-pre

该指令不需要表达式。

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 使用v-pre -->
        <p v-pre>{{ tip }}</p>
        <hr>
        <!-- 不使用v-pre -->
        <p>{{ tip }}</p>
    </div>    
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            tip: `使用v-pre指令，不会显示这段文本，因为而是显示{{ tip }}，但如果不使用v-pre指令，则会显示这段文本`
        }
    })
</script>
</html>

Vue.js学习笔记（二）——指令

v-on

该指令用于绑定事件。

修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
完整写法： v-on:事件名.修饰符(可以省略修饰符)
简化写法： @事件名.修饰符(可以省略修饰符)

用法

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event property：v-on:click=“handle(‘ok’, $event)”。

从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。

示例：

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)：

<my-component @my-event="handleThis"></my-component>

<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

使用

v-on

指令注意点：

v-on 用来做事件监听（绑定），后面的事件类型不需要加上前缀 on
事件的回调函数是写在Vue实例化对象的 methods 属性内
事件的回调函数可以有括号也可以没有括号，这要取决于自己的业务逻辑需要
事件的回调函数加括号与不加括号的区别：如果没有加括号，则Vue.js会自动传递一个 event 事件对象；如果加括号，则Vue.js不会自动传递事件对象，则需要在括号里面加上参数 $event ，当该事件需要传递参数时，就需要将需要传递的参数放到括号内。

Vue.js学习笔记（二）——指令

什么是指令？

以上是一些指令的简单介绍和用法，想了解更多的可以参考官方文档：https://cn.vuejs.org/v2/api/

继续阅读

vue中父组件调用子组件的方法

Vue监视数据原理

vue项目：npm打包-S和-D区别：

vue滑动插件：vue-drag-verify

vue插件的使用

使用Vue自定义组件出现的错误

Vue+原生JS实现点击粘贴到剪贴板

vue时间段选择器实现的功能

VueX 做状态管理( state , mutations , getters , actions 概念)

vue 中英文切换

【GIT】git命令行代码提交流程及注意事项

Django项目实战——3—(图形验证码后端逻辑、短信验证码、短信验证码后端逻辑)1、图形验证码后端逻辑2、短信验证码3、短信验证码后端逻辑

vue3 transitionvue3 transition组件和vue2 transition组件

vue学习笔记day12 vue的生命周期

父子组件间传值的实现父子组件间传值的实现

手把手教你配置：Jenkins+Github+Webhook +Nginx自动化打包部署Vue项目