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">
<div v-html="msg">div>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el: "#app",
data: {
msg:
' 百度'
}
})
script>
body>
2.2、v-show和v-if
-
v-show
-
作用：控制元素显示隐藏
-
语法：v-show = "表达式” 表达式值true显示,false隐藏
-
原理：切换display:none控制显示隐藏
-
场景：频繁切换显示隐藏的场景
-
-
v-if
-
作用：控制元素显示隐藏（条件渲染)
-
语法：v-if = “表达式” 表达式值true显示, false隐藏
-
原理:基于条件判断，是否创建或移除元素节点
-
场景:要么显示，要么隐藏，不频繁切换的场景
-
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/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el: "#app",
data: {
gender: 2,
score: 80
}
})
script>>
body>
3.3、v-on
-
作用:注册事件=添加监听+提供处理逻辑
-
语法:
- v-on:事件名=“内联语句”
- 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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el: "#app",
data: {
list: ["西瓜", "芒果", "香蕉", "鸭梨", "西红柿"]
}
})
script>
3.6、v-for 中的key
-
语法：key属性=“唯一标识”
-
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用
v-for的默认行为会尝试原地修改元素（就地复用：元素被更改了，但是填充元素的容器并没有被删除)。
-
注意点:
- key的值只能是字符串或数字类型
- key的值必须具有唯一性
- 推荐使用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/[email protected]/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/[email protected]/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/[email protected]/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>Documenttitle>
<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/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
age: '',
},
methods: {
fatherFn() {
alert('老父亲被点击了')
},
sonFn() {
alert('儿子被点击了')
}
}
})
script>
body>
html>