Vue.js 指令
本质上就是 HTML 自定义属性
Vue.js 的指令就是以v-开头的自定义属性
内容处理
v-once 指令
使元素内部的插值表达式只生效一次
<div id="app">
<p>此内容会自动更改：{
{ content }}</p>
<p v-once>此内容不会随数据变化自动更改：{
{ content }}</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
content: "内容文本"
}
})
</script>
v-text 指令
元素内容整体替换为指定纯文本数据
<div id="app">
<p v-text="content">此内容会被覆盖</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
content: "内容文本"
}
})
</script>
v-html 指令
元素内容整体替换为指定的 HTML 文本
<div id="app">
<p v-html="content">此内容会被覆盖</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
content: "<span>内容文本</span>"
}
})
</script>
属性绑定
v-bind 指令
v-bind 指令用于动态绑定 HTML 属性
<div id="app">
<p v-bind:title="title">标签内容</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
title: "这是title属性内容"
}
})
</script>
Vue.js 还为 v-bind 指令提供了简写方式
<div id="app">
<p :title="title">标签内容</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
title: "这是title属性内容"
}
})
</script>
如果需要一次绑定多个属性，还可以绑定对象
<div id="app">
<p v-bind="attrObj">标签内容</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
attrObj: {
id: 'box',
title: '示例内容'
}
}
})
</script>
与插值表达式类似，v-bind 中也允许使用表达式
<div id="app">
<p :class=" 'demo' + 3 ">标签内容</p>
<p :class=" prefix + num ">标签内容</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
prefix: 'demo',
num: 5
}
})
</script>
Class 绑定
class 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 class 属性共存
<div id="app">
<p v-bind:class="cls">标签内容</p>
<p class="a" :class="cls">标签内容</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
cls: 'x'
}
})
</script>
对于 class 绑定，Vue.js 中还提供了特殊处理方式
<div id="app">
<p :class="{ b: isB, c: isC, 'class-d': true }">标签内容</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
isB: true,
isC: false
}
})
</script>
对于 class 绑定，Vue.js 中还提供了特殊处理方式
<div id="app">
<p :class="[ 'a', {b: isB}, 'c' ]">标签内容</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
isB: true
}
})
</script>
Style 绑定
style 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 style 属性共存
对于 class 绑定，Vue.js 中还提供了特殊处理方式
<div id="app">
<p :style="styleObj">标签内容</p>
<p style="width:100px;" :style="styleObj">标签内容</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
styleObj: {
width: "200px",
hetght: "100px",
border: "1px solid #ccc"
}
}
})
</script>
当我们希望给元素绑定多个样式对象时，可以设置为数组
<div id="app">
<p :style="[ styleObj1, styleObj2 ]">标签内容</p>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
styleObj1: {
width: "200px",
hetght: "100px"
},
styleObj1: {
border: "1px solid #ccc",
color: "bule"
}
}
})
</script>
渲染指令
v-for 指令
用于遍历数据渲染结构，常用的数组与对象均可遍历
<div id="app">
<ul>
<li v-for="item in arr"> {
{ item }} </li>
</ul>
<ul>
<li v-for="value in obj"> {
{ value }} </li>
</ul>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
arr: ["内容1", "内容2", "内容3"],
obj: {
content1: "内容1",
content2: "内容2",
content3: "内容3"
}
}
})
</script>
使用 v-for 的同时，应始终指定唯一的 key 属性，可以提高渲染性能并避免问题
<div id="app">
<ul>
<li v-for="item in arr" :key="item.id"> {
{ item }} </li>
</ul>
</div>
<!-- ===================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
arr: [
{
id: 1,
content: "内容1"
},
{
id: 2,
content: "内容2"
}
]
}
})
</script>
通过 <template> 标签设置模板占位符，可以将部分元素或内容作为整体进行操作
<div id="app">
<template v-for="item in items">
<span>标签内容</span>
<span>标签内容</span>
</template>
</div>
v-show 指令
用于控制元素显示与隐藏，适用于显示隐藏频繁切换时使用
<div id="app">
<p v-show="true">这个元素会显示</p>
<p v-show="false">这个元素会隐藏</p>
</div>
<template> 无法使用 v-show 指令
v-if 指令
用于根据条件控制元素的创建与移除
<div id="app">
<p v-if="false">这个元素不会创建</p>
<p v-else-if="true">这个元素会创建</p>
<p v-else="else">这个元素不会创建</p>
</div>
给使用 v-if 的同类型元素绑定不同的 key
处于性能考虑，应避免将 v-if 与 v-for 应用于同一标签