vue指令详解
v-text
-
预期：String
-
详细：
更新元素的
textContent。如果要更新部分的textContent，需要使用{{ Mustache }}插值。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>{{message}}</h2> <h2 v-text="message"></h2> </div> <script src="../js/vue.js"> </script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script> </body> </html>
v-html
-
预期：String
-
详细：
更新元素的
innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用v-html组合模板，可以重新考虑是否通过使用组件来替代<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>{{url}}</h2> <h2 v-html="url"></h2> </div> <script src="../js/vue.js"> </script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', url: '<a href="http://www.baidu.com">百度一下</a>' } }) </script> </body> </html>
v-show
-
预期：any
-
用法：
根据表达式之真假值，切换元素的
displayCSS 属性。当条件变化时该指令触发过渡效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app" v-show="message!=null"> {{message}} </div> <script src="../js/vue.js"> </script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script> </body> </html>解释：
通过参数message是否等于null，如果不等于null，则为“true”，否则为“false”，然后v-show指令，等于true的时候显示，false的时候隐藏。
里面还可以用三目运算符
v-if
-
预期：any
-
用法：
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是
<template>，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。
当和
v-if一起使用时，v-for的优先级比v-if更高。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app" v-if="message"> {{message}} </div> <script src="../js/vue.js"> </script> <script> const app = new Vue({ el: '#app', data: { message: true } }) </script> </body> </html>
v-else
-
不需要表达式
-
限制：前一兄弟必须有v-if或v-else-if
-
用法：
为
v-if或者v-else-if添加“else 块”。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app" v-if="message==1">值为1</div> <div v-else>值为不1</div> <script src="../js/vue.js"> </script> <script> const app = new Vue({ el: '#app', data: { message: 2 } }) </script> </body> </html>
v-else-if
-
类型：any
-
限制：前一兄弟元素必须有v-if或v-else-if
-
用法：
表示v-if的“else if块”，可以链式调用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div v-if="message==='A'">A</div> <div v-else-if="message=='B'">B</div> <div v-else-if="message=='C'">C</div> <div v-else>CHAR</div> </div> <script src="../js/vue.js"> </script> <script> const app = new Vue({ el: '#app', data: { message: 'B' } }) </script> </body> </html>
v-for
-
预期：
Array | Object | number | string | Iterable (2.6 新增) -
用法：
基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法
alias in expression，为当前遍历的元素提供别名：<div v-for="item in items"> {{ item.text }} </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>v-for默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个key的特殊属性：<div v-for="item in items" :key="item.id"> {{ item.text }} </div>当和
v-if一起使用时，v-for的优先级比v-if更高
v-on
-
缩写：@
-
预期：Function | Inline Statement | Object
-
参数：event
-
修饰符：
.stop - 调用
event.stopPropagation()。.prevent - 调用
event.preventDefault()。.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
-
用法：
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个
$event属性：v-on:click="handle('ok', $event)"。从
2.4.0开始，v-on同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app" v-on:click="log"> 点击我 </div> <script src="../js/vue.js"> </script> <script> const app = new Vue({ el: '#app', data: { }, methods: { log: function () { console.log("点击我"); } } }) </script> </body> </html><!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 动态事件 (2.6.0+) --> <button v-on:[event]="doThis"></button> <!-- 内联语句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 动态事件缩写 (2.6.0+) --> <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> <!-- 对象语法 (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
v-bind
-
缩写： ：
-
预期：any (with argument) | Object (without argument)
-
参数：attrOrProp (optional)
-
修饰符：
.prop- 被用于绑定 DOM 属性 (property)。(差别在哪里？).camel- (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持).sync(2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的v-on侦听器
-
用法：
动态地绑定一个或多个特性，或一个组件 prop 到表达式。
在绑定
class或style特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时，可以绑定到一个包含键值对的对象。注意此时
class和style绑定不支持数组和对象。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app" > <div v-bind:title="message"></div> <div :title="message"></div> </div> <script src="../js/vue.js"> </script> <script> const app = new Vue({ el: '#app', data: { message: 'aaa' } }) </script> </body> </html><!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 动态特性名 (2.6.0+) --> <button v-bind:[key]="value"></button> <!-- 缩写 --> <img :src="imageSrc"> <!-- 动态特性名缩写 (2.6.0+) --> <button :[key]="value"></button> <!-- 内联字符串拼接 --> <img :src="'/path/to/images/' + fileName"> <!-- class 绑定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"> <!-- style 绑定 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 绑定一个有属性的对象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 通过 prop 修饰符绑定 DOM 属性 --> <div v-bind:text-content.prop="text"></div> <!-- prop 绑定。“prop”必须在 my-component 中声明。--> <my-component :prop="someThing"></my-component> <!-- 通过 $props 将父组件的 props 一起传给子组件 --> <child-component v-bind="$props"></child-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg>
v-model
-
预期：随表单控件类型不同而不同
-
限制：
<input> <select> <textarea> components -
修饰符：
-
用法：
再表单控件或者组件上创建双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> </div> <script src="../js/vue.js"> </script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script> </body> </html>
v-slot
v-pre
-
不需要表达式
-
用法
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>{{message}}</h2> <h2 v-pre>{{message}}</h2> </div> <script src="../js/vue.js"> </script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script> </body> </html>
v-cloak
-
不需要表达式
-
用法
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如
[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [v-cloak] { display: none; } </style> </head> <body> <div id="app" v-cloak> {{message}} </div> <script src="../js/vue.js"> </script> <script> //再vue解析之前，div中有一个属性v-cloak //再vue解析之后，div中没有一个属性v-cloak setTimeout(function () { const app = new Vue({ el: '#app', data: { message: '你好啊' } }) },1000) </script> </body> </html>
v-once
-
不需要表达式
-
详细
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<h1 v-once>v-once:{{message}}</h1>
</div>
<script src="../js/vue.js">
</script>
<script>
const app = new Vue({
el : '#app',
data : {
message : '你好啊',
}
})
</script>
</body>
</html>
浏览器控制台：
app.message
"你好啊"
app.message='lalala'
"lalala"