-
【Vue】所有指令详解
一、更新元素
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
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 结果：
1.2、v-text
- 更新元素的
textContent。如果要更新部分的textContent，需要使用{{ Mustache }}插值。 - 语法：
<span v-text="msg">span> <span>{{msg}}span>- 1
- 2
- 3
- 示例：
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>- 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
- 结果：
二、渲染元素
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>- 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
- 未点击之前：
- 点击切换之后：
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>- 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
- 34
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>- 1
- 2
- 3
- 4
- 示例：
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>- 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
- 结果：
三、绑定元素
3.1、方法绑定 v-on 或
@- 绑定事件监听器，事件类型由参数指定，
v-on简写就是@。 - 表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
- 修饰符有：
.stop // 调用 event.stopPropagation()。 .prevent // 调用 event.preventDefault()。 .capture // 添加事件侦听器时使用 capture 模式。 .self // 只当事件是从侦听器绑定的元素本身触发时才触发回调。 .{keyCode | keyAlias} //只当事件是从特定键触发时才触发回调。 .native // 监听组件根元素的原生事件。 .once // 只触发一次回调。 .left // 只当点击鼠标左键时触发。 .right // 只当点击鼠标右键时触发。 .middle // 只当点击鼠标中键时触发。 .passive // 模式添加侦听器- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 示例：
<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>- 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
- 34
- 35
- 36
- 37
- 38
- 实例：
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>- 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
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 运行结果：
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>- 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
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 运行结果：
- 例如：对象形式写法
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>- 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
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 运行结果
3.3、双向绑定 v-model
-
在表单控件或者组件上创建双向绑定
-
只能作用于：
或或
-
