Vue
的常用指令{{ }}
用来在 Vue
模板中插入变量。
<div id="app">
{{ message }}
div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
v-text
v-text
指令用来设置元素的文本内容。
<div id="app">
<span v-text="message">span>
div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
v-html
v-html
指令用来设置元素的 HTML 内容。
<div id="app">
<div v-html="html">div>
div>
new Vue({
el: '#app',
data: {
html: 'This is a title
'
}
})
v-show
v-show
指令用来根据条件展示元素。
<div id="app">
<p v-show="show">Hello Vue!p>
div>
new Vue({
el: '#app',
data: {
show: true
}
})
v-if
v-if
指令用来根据条件控制元素的显示与否。
<div id="app">
<p v-if="show">Hello Vue!p>
div>
new Vue({
el: '#app',
data: {
show: true
}
})
v-if
可以与 v-else
一起使用,用来控制元素的显示与否。
或者 v-else-if
用来设置多个条件。
<div id="app">
<p v-if="show">Hello Vue!p>
<p v-else-if="age > 18">You are old enough to vote.p>
<p v-else>You are not old enough to vote.p>
div>
new Vue({
el: '#app',
data: {
show: true,
age: 20
}
})
v-if
与 v-show
的区别v-if
指令会在元素插入或删除时,触发一次 DOM 操作,而 v-show
指令只会在初始渲染时触发一次 DOM 操作。v-if
指令切换条件时,元素所在的容器元素会被移除或插入到 DOM 中,而 v-show
指令不会触发 DOM 操作。v-if
指令会有更高的切换开销,因为需要频繁地插入、删除 DOM 元素;v-show
指令初始渲染时,元素的 display 样式会被设置,之后元素的 display 样式会被隐藏或显示,不会触发 DOM 操作。v-if
指令可以用于条件判断,而 v-show
指令可以用于简单控制元素的显示与否。v-for
v-for
指令用来遍历数组或对象,并对每个元素进行渲染。
<div id="app">
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}li>
ul>
div>
new Vue({
el: '#app',
data: {
items: ['apple', 'banana', 'orange']
}
})
v-for
也可以用来遍历数字,并对每个元素进行渲染。
<div id="app">
<ul>
<li v-for="num in 10" :key="num">{{ num }}li>
ul>
div>
new Vue({
el: '#app'
})
v-for
也可以与 v-if
一起使用,用来控制元素的显示与否。
<div id="app">
<ul>
<li v-for="(item, index) in items" :key="index" v-if="index % 2 === 0">{{ item }}li>
ul>
div>
new Vue({
el: '#app',
data: {
items: ['apple', 'banana', 'orange']
}
})
v-on
v-on
指令用来绑定事件。
<div id="app">
<button v-on:click="handleClick">Click mebutton>
div>
new Vue({
el: '#app',
methods: {
handleClick: function() {
console.log('Button clicked!')
}
}
})
v-on
也可以绑定按键事件。
<div id="app">
<input type="text" v-on:keyup.enter="handleEnter">
div>
new Vue({
el: '#app',
methods: {
handleEnter: function() {
console.log('Enter key pressed!')
}
}
})
v-bind
v-bind
指令用来绑定属性。
<div id="app">
<img v-bind:src="imageUrl">
div>
new Vue({
el: '#app',
data: {
imageUrl: 'https://cn.vuejs.org/images/logo.png'
}
})
v-bind
也可以绑定 class。
<div id="app">
<div v-bind:class="{ active: isActive }">Hello Vue!div>
div>
new Vue({
el: '#app',
data: {
isActive: true
}
})
v-bind
也可以绑定样式。
<div id="app">
<div v-bind:style="{ color: activeColor }">Hello Vue!div>
div>
new Vue({
el: '#app',
data: {
activeColor: 'blue'
}
})
v-model
v-model
指令用来实现表单输入和应用状态之间的双向绑定。
<div id="app">
<input type="text" v-model="message">
<p>{{ message }}p>
div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
v-model
也可以绑定数组。
<div id="app">
<input type="text" v-model="items">
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}li>
ul>
div>
new Vue({
el: '#app',
data: {
items: ['apple', 'banana', 'orange']
}
})
v-model
也可以绑定对象。
<div id="app">
<input type="text" v-model="user.name">
<p>{{ user.name }}p>
div>
new Vue({
el: '#app',
data: {
user: {
name: 'John'
}
}
})
v-model
的解析其本质是一个语法糖,实际上会被编译成如下代码:
<input type="text" :value="message" @input="message = $event.target.value">
其中 :value
用来绑定应用状态的值,@input
用来监听用户输入并更新应用状态。
指令可以带有修饰符,以表示特殊的含义或功能。
.stop
.stop
修饰符用来阻止事件冒泡。
.prevent
.prevent
修饰符用来阻止默认事件。
.capture
.capture
修饰符用来捕获事件。
.self
.self
修饰符用来只响应自身事件。
.once
.once
修饰符用来只触发一次事件。
.native
.native
修饰符用来绑定原生事件。
.sync
.sync
修饰符用来实现双向绑定。
.trim
.trim
修饰符用来自动过滤用户输入的首尾空格。
.number
.number
修饰符用来将用户输入的值自动转为数字类型。