Vue 的常用指令以及相关修饰符的含义
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: '<h1>This is a title</h1>'}
})
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 me</button>
</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
修饰符用来将用户输入的值自动转为数字类型。