Vue中对于指令的介绍

Vue指令

文章目录

Vue指令
- 1、介绍
- 2、指令介绍
- - 2.1、v-html
  - 2.2、v-show和v-if
  - 3.2、v-else 和 v-else-if
  - 3.3、v-on
  - 3.4、v-bind
  - 3.5、v-for
  - 3.6、v-for 中的key
  - 3.7、v-model
- 3、指令修饰符
- - 3.1、按键修饰符
  - 3.2、监听v-model修饰符·
  - 3.3、事件修饰符

1、介绍

Vue 会根据不同的【指令】，针对标签实现不同的【功能】。

指令：带有v-前缀的特殊标签属性

2、指令介绍

官网指令介绍：https://v2.cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4

2.1、v-html

我们使用常规的差值表达式是无法解析网页链接的，所以我们就需要“v-html”指令来实现。

v-html可以动态的设置innerHTML属性

<body><div id="app"><!-- {{msg}} --><div v-html="msg"></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {msg:' <a href="https://www.baidu.com">百度</a>'}})</script>
</body>

2.2、v-show和v-if

v-show
1. 作用：控制元素显示隐藏
2. 语法：v-show = "表达式” 表达式值true显示,false隐藏
3. 原理：切换display:none控制显示隐藏
4. 场景：频繁切换显示隐藏的场景
v-if
1. 作用：控制元素显示隐藏（条件渲染)
2. 语法：v-if = “表达式” 表达式值true显示, false隐藏
3. 原理:基于条件判断，是否创建或移除元素节点
4. 场景:要么显示，要么隐藏，不频繁切换的场景

3.2、v-else 和 v-else-if

作用:辅助v-if 进行判断渲染
语法: v-elsev-else-if = “表达式”
注意:需要紧挨着v-if 一起使用

<body><div id="app"><p v-if="gender === 1">性别:男</p><p v-else>性别:女</p><hr><p v-if="score>=90">成绩评定A:奖励电脑一台</p><p v-else-if="score>=70">成绩评定B:奖励周末郊游</p><p v-else-if="score>=60">成绩评定c:奖励零食礼包</p><p v-else>成绩评定D:惩罚一周不能玩手机</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {gender: 2,score: 80}})</script>>
</body>

3.3、v-on

作用:注册事件=添加监听+提供处理逻辑
语法:
1. v-on:事件名=“内联语句”
2. v-on:事件名= “methods中的函数名”

可以使用’@‘来代替’v-on:‘

内联语句：

<body><div id="app"><button v-on:click="count--">-</button><span>{{count}}</span><button v-on:click="count++"> +</button><button @click="count++"> +</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {count: 100},})</script>
</body>

method方式：

    <div id="app"><button v-on:click="count--">-</button><span>{{count}}</span><button v-on:click="count++"> +</button><button @click="fun">函数处理+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {count: 100},methods: {fun() {app.count++;this.count++;}}})</script>

在methods中访问data中的数据，需要用过app来引用，但是以防变量名的更改，所以可以通过使用this来指向当前的实例来获取data中的对象。

函数传参调用：

    <div id="app"><div class="box"><h3>小黑自动售货机</h3><button @click="buy(5)">可乐5元</button><button @click="buy(10)">咖啡10元</button></div><p>银行卡余额:{{ money }}元</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {money: 100},methods: {buy(price) {this.money -= price;}}})</script>

3.4、v-bind

作用:动态的设置html的标签属性→src url title …
语法: v-bind:属性名=“表达式”
“v-bind:“的简写：”:”

    <div id="app"><img v-bind:src="img" v-bind:title="msg"><img :src="img" :title="msg"></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {img: 'https://gitee.com/mannor/resouces/raw/master/PicGo/image-20230807220043572.png',msg: '在linux中拉取代码'}})</script>

3.5、v-for

作用：基于数据循环，多次渲染整个元素→数组、对象、数字…
遍历数组语法:
v-for = “(item, index) in 数组名”

item：代指的是数组的内容；index：是指当前遍历的数组的下标。甚至不使用index的时候index还可以省略。

 <div id="app"><h3>mannor水果店</h3><ul><li v-for="(item,index) in list ">{{list[index]}}</li></ul><ul><li v-for="item in list ">{{item}}</li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {list: ["西瓜", "芒果", "香蕉", "鸭梨", "西红柿"]}})</script>

3.6、v-for 中的key

语法：key属性=“唯一标识”
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用

v-for的默认行为会尝试原地修改元素（就地复用：元素被更改了，但是填充元素的容器并没有被删除)。
注意点:
1. key的值只能是字符串或数字类型
2. key的值必须具有唯一性
3. 推荐使用id 作为 key (唯一），不推荐使用index作为key（会变化，不对应)

3.7、v-model

作用：给表单元素使用，双向数据绑定可以快速获取或设置表单元素内容
- 数据变化→视图自动更新
- 视图变化→数据自动更新
语法：v-model = ‘变量’

 <div id="app">账户: <input type="text" v-model="username"><br><br>密码: <input type="password" v-model="password"> <br><br><button @click="login">登录</button><button @click="reset">重置</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',password: ''},methods: {login() {console.log(this.username, this.password);},reset() {this.username = '';this.password = '';}}})</script>

3、指令修饰符

通过".”指明一些指令后缀，不同后缀封装了不同的处理操作，其作用是简化代码

3.1、按键修饰符

@keyup.enter→键盘回车

<body><div id="app"><input type="text" @keyup.enter="fun"> </input>></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {},methods: {fun() {console.log("输入框以回车框的形式提交");}}});</script>
</body>

3.2、监听v-model修饰符·

v-model.trim→去除首尾空格
v-model.number →将输入框中的数字字符转为数字

<body><div id="app">姓名：<input type="text" v-model.trim="text"></input>年龄：<input type="text" v-model.number="text"></input></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {text: 0,},});</script>
</body>

3.3、事件修饰符

@事件名.stop→阻止冒泡
@事件名.prevent →阻止默认行为（阻止链接的跳转）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 200px;height: 200px;background-color: pink;margin-top: 20px;}.son {width: 100px;height: 100px;background-color: skyblue;}</style>
</head>
<body><div id="app"><h3>@事件名.stop → 阻止冒泡</h3><div @click="fatherFn" class="father"><div @click.stop="sonFn" class="son">儿子</div></div><h3>@事件名.prevent → 阻止默认行为</h3><a @click.prevent href="http://www.baidu.com">阻止默认行为</a></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',age: '',},methods: {fatherFn() {alert('老父亲被点击了')},sonFn() {alert('儿子被点击了')}}})</script>
</body>
</html>