【Vue】各v-指令用法
文章目录
-
- 一、更新元素
-
- 1.1、v-html
- 1.2、v-text
- 二、渲染元素
-
- 2.1、v-show
- 2.2、v-if、v-else、v-else-if
- 2.3、v-for
- 三、绑定元素
-
- 3.1、方法绑定 v-on 或 `@`
- 3.2、属性绑定 v-bind 或 `:`
- 3.3、双向绑定 v-model
- 四、其他指令
-
- 4.1、v-once
- 4.2、v-cloak
- 4.3、v-pre
- 4.4、v-slot 或 `#`
一、更新元素
1.1、v-html
-
更新元素的 innerHTML。
-
注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
-
示例：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">
{{myhtml}}
<div v-html="myhtml">在 v-html 里面设置内容无效div>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: "#app",
data: {
myhtml: '1111111'
},
})
script>
body>
html>
- 结果：
1.2、v-text
- 更新元素的
textContent。如果要更新部分的textContent，需要使用{{ Mustache }}插值。 - 语法：
<span v-text="msg">span>
<span>{{msg}}span>
- 示例：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">
<span v-text="msg">在 v-text 里面设置内容无效span>
<br />
<span>我是：{{msg}}span>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "textContent"
},
})
script>
body>
html>
- 结果：
二、渲染元素
2.1、v-show
- 根据表达式之真假值，设置元素的 CSS 中的
display: none属性。 - 来实现控制元素的显隐，只会编译一次
- 如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">
<p v-if="isShow">v-if控制显隐p>
<p v-show="isShow">v-show控制显隐p>
<button @click="handleClick">切换button>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: true
},
methods: {
handleClick() {
this.isShow = !this.isShow
}
}
})
script>
body>
html>
- 未点击之前：
- 点击切换之后：
2.2、v-if、v-else、v-else-if
- 根据表达式的真假值来有条件地渲染元素。
- 相应组件的渲染是
销毁-重建的过程，而不是设置CSS样式display:none控制的 - v-if 是动态的向 DOM 树内添加或者删除 DOM 元素，若初始值为 false，就不会编译了。
- 而且v-if不停的销毁和创建比较消耗性能，如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">
<span v-if="value < 0">value 小于 0span>
<span v-else-if="value === 0">value 等于 0span>
<span v-else>value 大于 0span>
<button @click="handleClick">切换button>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el:"#app",
data:{
value:-1
},
methods:{
handleClick(){
// 实现 3 个 span 标签来回切换
this.value > 0 ?this.value = -1:++this.value
}
}
})
script>
body>
html>
2.3、v-for
- 基于源数据多次渲染元素或模板块。
- 此指令之值，必须使用特定语法
alias in expression - 语法：
<div v-for="item in items">div>
<div v-for="(item, index) in items">div>
<div v-for="(val, key) in object">div>
<div v-for="(val, name, index) in object">div>
- 示例：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">
<ul>
<li v-for="item in dataArray">item = {{item}}li>
<li v-for="(item,index) in dataArray">item = {{item}}、index = {{index}}li>
<li v-for="(val, key) in dataObject">val = {{val}}、key = {{key}}li>
<li v-for="(val, name, index) in dataObject">val = {{val}}、name = {{name}}、index = {{index}}li>
ul>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el:"#app",
data:{
dataArray:['aa','bb','cc'],
dataObject:{name: "jj",age: 18}
}
})
script>
body>
html>
- 结果：
三、绑定元素
3.1、方法绑定 v-on 或 @
- 绑定事件监听器，事件类型由参数指定，
v-on简写就是@。 - 表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
- 修饰符有：
.stop // 调用 event.stopPropagation()。
.prevent // 调用 event.preventDefault()。
.capture // 添加事件侦听器时使用 capture 模式。
.self // 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} //只当事件是从特定键触发时才触发回调。
.native // 监听组件根元素的原生事件。
.once // 只触发一次回调。
.left // 只当点击鼠标左键时触发。
.right // 只当点击鼠标右键时触发。
.middle // 只当点击鼠标中键时触发。
.passive // 模式添加侦听器
- 示例：
<button v-on:click="doThis">button>
<button v-on:[event]="doThis">button>
<button v-on:click="doThat('hello', $event)">button>
<button @click="doThis">button>
<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>
<button v-on="{ mousedown: doThis, mouseup: doThat }">button>
- 实例：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">
v-on用来绑定事件：
<button v-on:click="num++">++button>{{num}}<br>
v-on 可以简写成@：
<button @click="num--">--button>{{num}}<br>
vue的属性表达式中不可以直接写业务逻辑<br>
<button v-on:click="alert(666)">Vue-alert-报错button>
<button onclick="alert(777)">js-alert-正确button><br>
事件绑定，调用函数<br>
<button v-on:click="show1">调用无参函数button>
<button v-on:click="show2(5,10)">调用传参函数button>
<button v-on:click="show3(5,10,$event)">调用传$event函数button><br>
可以使用 $event提供的属性 接收 文本框的内容，$event是一个事件对象，里面有很多属性可以操作<br>
<input type="text" value="" v-on:input="show4($event)" />{{mytext}}<br>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: "#app",
data: {
num: 0,
mytext: ''
},
// 所有的自定义函数都写在这里
methods: {
show1(ev) { // 接收一个未定义的参数相当于：$event
console.log("无参函数被调用了，接收一个未定义的参数时：");
console.log(ev);
},
show2(a, b) {
console.log('传普通参的函数被调用了：' + (a + b));
},
show3(a, b, ev) {
console.log('传$event参数的函数被调用了：');
console.log(ev);
},
show4(ev) {
console.log(ev.target.value);
this.mytext = ev.target.value;
}
}
})
script>
body>
html>
- 运行结果：
3.2、属性绑定 v-bind 或 :
v-bind的缩写为:- 动态地绑定一个或多个属性，或一个组件 prop 到表达式。
- 例如：动态切换背景色
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<style>
.red {
background-color: red;
}
.green {
background-color: green;
}
style>
<body>
<div id="app">
<p class="red">设置背景色p>
<p class="isActive ? 'red':'green'">动态切换背景色p>
<p v-bind:class="isActive ? 'red':'green'"> v-bind 动态切换背景色p>
<p :class="isActive ? 'red':'green'"> : 动态切换背景色p>
<button @click="handleClick">切换button>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: "#app",
data: {
isActive: true
},
methods: {
handleClick() {
this.isActive = !this.isActive
}
}
})
script>
body>
html>
- 运行结果：
- 例如：对象形式写法
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<style>
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
style>
<body>
<div id="app">
<p :class="classObj">class对象写法p>
<p :class="classArr">class数组写法p>
<hr>
<p :style="styleObj">style对象写法p>
<p :style="styleArr">style数组写法p>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: "#app",
data: {
classObj: {
red: true,
green: true,
blue: true
},
styleObj: {
backgroundColor: 'red',
},
classArr: ['red', 'green', 'blue'],
styleArr: [{
backgroundColor: 'red'
}, ]
},
mounted() {
this.classArr.push('yj') // 向数组中追加属性
this.styleArr.push({
fontSize: '20px'
}) // 向数组中追加属性
}
})
Vue.set(app.classObj, 'yellow', true) // 向对象中追加属性
Vue.set(app.styleObj, 'fontSize', '40px') // 向对象中追加属性
script>
body>
html>
- 运行结果
3.3、双向绑定 v-model
-
在表单控件或者组件上创建双向绑定
-
只能作用于：
或或