KZero's Blog

Accumulation record

Vue常用指令

Posted on In Views: Valine:

什么是指令？

指令就是Vue内部提供的一些自定义属性，这些属性中封装了Vue内部的一些功能，只要使用这些指令就可以使用Vue中的对应的功能。

此内容并不详细，只是为了方便快速查找了解

v-text v-html 绑定文本内容

插值表达式功能：把数据插入指定的位置（不会解析html标签）

v-text功能：绑定文本内容，相当于innerText（不会解析html标签）

v-html功能：绑定文本内容，相当于innerHTML（会解析html标签）

1
2
3
4
5
6
7
8
9
10
<div id="app">
    <div>
        <!-- 插值表达式 -->
        {{ msg }}
    </div>
    <!-- v-text不会解标签 -->
    <div v-text="msg"></div>
    <!-- v-html会解析标签 -->
    <div v-html="msg"></div>
</div>

v-show 逻辑判断（修改样式）

功能：根据true/false切换元素的显示状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
    <p v-show="true">显示</p>
    <!-- 取值false就根本不会创建这个元素 -->
    <p v-show="false">隐藏</p>

    <p v-show="show">显示</p>
    <p v-show="hidden">隐藏</p>

    <p v-show="age >= 18">成年人</p>
    <p v-else>未成年</p>
    请输入年龄：<input type="text" v-model="age">

    <p v-show="score  >= 90">优秀</p>
    <!-- 中间不能插入其他标签 -->
    <p v-else-if="score  >= 60">及格</p>
    <!-- 中间不能插入其他标签 -->
    <p v-else="score  < 60">不及格</p>
    输入成绩：<input type="text" v-model="score">
</div>

v-if 逻辑判断（操作DOM）

功能：根据true/false切换元素的显示状态

v-if是操作DOM所以跟消耗资源所以，频繁切换使用v-show，反之v-if

v-else 和 v-else-if 注意点：

  • 不能单独出现
  • v-if和v-else中间不能出现其他标签内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
    <p v-if="true">显示</p>
    <!-- 取值false就根本不会创建这个元素 -->
    <p v-if="false">隐藏</p>

    <p v-if="show">显示</p>
    <p v-if="hidden">隐藏</p>

    <p v-if="age >= 18">成年人</p>
    <p v-else>未成年</p>
    请输入年龄：<input type="text" v-model="age">

    <p v-if="score  >= 90">优秀</p>
    <!-- 中间不能插入其他标签 -->
    <p v-else-if="score  >= 60">及格</p>
    <!-- 中间不能插入其他标签 -->
    <p v-else="score  < 60">不及格</p>
    输入成绩：<input type="text" v-model="score">
</div>

v-for 根据数据生成列表结构

功能：根据数据生成列表结构

可以遍历：Array | Object | number | string | Iterable

index：索引号（从0开始）

item：每一项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="app">
    <!-- 数组 -->
    <ul>
        <li v-for="item in arr">数组：{{item}}</li>
    </ul>
    <ul>
        <li v-for="(item,index) in arr">数组：{{index+1}} {{item}}</li>
    </ul>
    <!-- 对象 -->
    <ul>
        <li v-for="item in obj">对象：{{item}}</li>
    </ul>
    <ul>
        <li v-for="(val,key) in obj">对象：{{key}}：{{val}}</li>
    </ul>
    <!-- 数组对象 -->
    <ul>
        <li v-for="item in arrObj">数组对象：{{item.name}}</li>
    </ul>
    <!-- 字符串 -->
    <ul>
        <li v-for="item in 'abc'">字符串：{{item}}</li>
    </ul>
    <!-- 数字 -->
    <ul>
        <li v-for="item in 3">{{item}}</li>
    </ul>
</div>

v-on 事件监听（简写 @）

功能：为元素绑定事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="app">
    <!-- 不能直接写函数 -->
    <!-- <button v-on:click="alert('Hello Vue')">按钮</button> -->

    <button v-on:click="fn">v-on指令</button>
    <!-- 简写：@ -->
    <button @click="fn">@简写</button><br>
    <!-- 可以加()，也可以不加 -->
    <button @click="fn()">可加 | 可不加 ()</button>
    <!-- 加()，可以传递参数 -->
    <button @click="fnx('加()可以传递参数')">加 () 可传参</button><br>
    <!-- 获取原生事件对象 -->
    <button @click=fnEven($event)>获取原生事件对象</button>
    <!-- 获取data里的数据 -->
    <button @click="fnData">获取data里的数据</button><br>

    <button @click="fn1">使用fn1(){}</button>
    <button @click="fn2">使用fn2:function(){}</button><br>

    <!-- 常用事件修饰符 -->
    <!-- enter按键事件 -->
    按enter触发事件：<input type="text" @keyup.enter="fnKeyup" v-model="data">
    按对应键值触发事件：<input type="text" @keyup.13="fnKeyup" v-model="data"><br>
</div>

v-on 修饰符

v-on修饰符：

在事件中有很多东西需要处理，比如：事件冒泡，事件捕获，阻止默认行为等。

在Vue中可以用过修饰符来处理。

v-on常见修饰符：

  • .once 只触发一次回调函数

  • .prevent 阻止事件默认行为，调用 event.preventDefault()

  • .stop 阻止事件冒泡，调用event.stopPropagation()

  • .self 只当事件是从侦听器绑定当元素本身触发时才触发回调

  • .capture 添加事件侦听器时使用 capture 模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div id="app">
    <!-- 默认情况下，事件的回调函数被触发，就可以反复执行， -->
    <button @click="fn">反复执行</button>
    <button @click.once="fn">只执行一次</button>

    <!-- a标签有默认行为会进行跳转 -->
    <a href="https://kzero.vip" @click="fn">a标签有默认行为</a>
    <!-- 使用.prevent阻止默认行为 -->
    <a href="https://kzero.vip" @click.prevent="fn">阻止a标签默认行为</a>

    <!-- 默认情况下，嵌套元素中如果监听了相同的事件，那么会触发事件冒泡 -->
    <!-- 事件冒泡：会一层一层向外触发到最顶层 -->
    <div class="grandpa" @click="grandpa">
        <div class="father" @click.stop="father">
            <div class="son" @click="son"></div>
        </div>
    </div>

    <div class="grandpa" @click="grandpa">
        <!-- .self 只有当前元素触发事件才执行回调函数 -->
        <div class="father" @click.self="father">
            <div class="son" @click="son"></div>
        </div>
    </div>

    <!-- 默认情况下是事件冒泡，如果想变成事件捕获，那么就需要使用.capture -->
    <!-- 事件捕获：会一层一层向内触发到最里层 -->
    <div class="grandpa" @click="grandpa">
        <div class="father" @click.capture="father">
            <div class="son" @click="son"></div>
        </div>
    </div>
</div>

v-bind 绑定属性（简写:）

功能：为元素绑定属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div id="app">
    <img v-bind:src="imgUrl" v-bind:title="imgTitle">
    <!-- 简写 : -->
    <img :src="imgUrl" :title="imgTitle">

    <br>
    <button @click="active">按键聚焦内容</button>

    <!-- 绑定属性类名 -->
    <!-- 使用类名 -->
    <p :class="['color','bold','border']">绑定v-bind使用类名</p>
    <!-- 使用属性三元运算符 -->
    <p :class="flag? 'border': ''">使用三元运算符</p>
    <p :class="{ 'border': flag }">内容1</p>
    <p :class="['color',flag?'border':'','bold']">内容2</p>
    <p :class="['color',{'border':flag},'bold']">内容3</p>
    <!-- 使用data里对象 -->
    <p :class="obj">使用data里对象</p>

    <!-- 使用表达式 -->
    <input type="text" :value="age + 1"></input>

    <!-- 绑定属性样式 -->
    <!-- 绑定属性样式的值，要用引号引起来  -->
    <p :style="{color: 'deeppink', 'font-size': '20px'}">绑定样式</p>
    <!-- 绑定属性样式名带 - ，要用引号引起来 -->
    <p :style="{color:'deeppink', 'font-size':'50px'}">绑定样式</p>
    <!-- 绑定属性样式名 使用对象 -->
    <p :style="styleObj1">绑定样式</p>
    <!-- 绑定属性样式名 使用多对象 -->
    <p :style="[styleObj1,styleObj2]">绑定样式</p>
</div>

v-model 数据双向绑定

功能：便捷的设置和获取表单元素的值

只支持：input、textarea、select元素

1
2
3
4
5
6
7
<div id="app">
    <p>
        {{data}}
    </p>
    <input type="text" v-model="data"><br><br>
    <textarea name="" id="" cols="30" rows="10" v-model="data"></textarea>
</div>

v-once 只渲染一次

功能：让当前元素只渲染一次

1
2
3
4
<div id="app">
    <p v-once>原始数据：{{msg}}</p>
    <p>当前数据：{{msg}}</p>
</div>

v-cloak 体验感优化

功能：解决渲染之前显示模版内容，让用户看到模版内的内容

Vue数据绑定过程：

  1. 先将未绑定数据界面展示给用户

  2. 在根据模型中数据和控制的区域，生成绑定数据之后的html

  3. 最后将绑定数据之后的html渲染到界面上

正是在最终的html被生成渲染之前会先显示模版内容

所以如果用户网速比较慢或者网页性能比较差，那么用户会看到模版内的内容

如何解决：

利用v-cloak，配合样式：[v-cloak] {display: none} 先隐藏未渲染的界面

等到生成html渲染之后在重新显示

1
2
3
<div id="app" >
    <p v-cloak>{{msg}}</p>
</div>

自定义指令

自定义指令：在Vue中除了可以使用Vue内置的一些指令外，还可以自定义指令

自定义指令时一定要明确指令的业务逻辑更适合在哪个阶段执行

例如：指令业务逻辑代码中没有用拿到元素事件，那么可以在bind阶段执行

例如：指令业务逻辑代码中用到了元素事件，那么就需要inserted阶段执行

注意：使用是需要加上v-，而在自定了时不需要加上v-

directive方法接收两个参数

第一个参数是接收指令的名称

第二个参数是接收对象

注意：

在自定义指令的适合，在指定指令名称的适合，不需要写v-

指令可以在不同的生命周期阶段执行

bind：指令被绑定到元素上的时候执行

inserted：绑定指令的元素被添加到父元素上的时候调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="app">
    <p v-color>自定义指令</p>
    <p v-color=" 'blue' ">自定义指令</p>
    <input type="text">
    <input type="text" value="使用自定义属性聚焦" v-focus>
</div>
<script>
    Vue.directive('color', {
        // 这里的el就是被绑定指令的那个元素
        bind: function (el, obj) {
            el.style.color = 'deeppink';
            el.style.color = obj.value;
        }
    });
    Vue.directive('focus', {
        inserted: function (el) {
            el.focus();
        }
    })
    var app = new Vue({
        el: '#app',
        data: {
            curColor: 'green',
        }
    })
</script>
CodeKZero WeChat Pay

WeChat Pay

CodeKZero Alipay

Alipay