指令（ Directives ）是 Vue 模板中最常用的一项功能，它带有前缀 v－，能帮我们快速完成DOM操作，循环渲染，显示和隐藏。
基本指令
v-text
v-text 解析文本，更新元素的 textContent 。
用 {{}} 在 HTML中输出 data的值时， 有一个问题： 当网速慢或者JavaScript出错时，会暴露 {{xxx}}，而 v-text 可以避免这个问题
<span v-text="msg"></span>
v-html
v-html 解析 html ， 更新元素的 innerHTML。
<div v-html="htmlStr"></div>
v-bind
v-bind通常用来动态绑定属性的，格式是v-bind：属性名 = "值"，简写:属性名 = "值"
<div v-bind:class="className">v-bind绑定 class</div>
v-bind 可以缩写为 : ，所以上面的也可以写作:
<div :class="className">v-bind绑定 class</div>
v-bind 应用
绑定 class
1. 变量语法
v-bind:class = "变量"
这里的变量的值，通常是在css定义好的类名
2. 对象语法
v-bind:class = {classname1：boolean，classname2：boolean}
对象的键是类名，值是布尔值。
- 这里的classname1，classname2其实就是样式表中的类名
- 这里的boolean通常是一个变量，也可以是常量、计算属性等，这种方法也是绑定class最常用的方式。
当 class 的表达式过长或逻辑复杂时，可以绑定一个计算属性，这是一种很友好和常见的用法 ： demo
3. 数组语法
把一个数组传给 v-bind:class，以应用一个 class 列表，在数组语法中也可以使用对象语法： demo
绑定内联样式
v-on
v-on 用来绑定事件监听器， 它的缩写是 @
<div id="app">
<span>{{count}}</span>
<button v-on:click="add">add</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
count: 0
},
methods: {
// 方法写在 Vue 实例的 methods 属性内，并且是函数形式
add() {
this.count++;
// 函数内的 this 指向的是当前 Vue 实例本身，因此可以直接使用 this.xxx 的形式来访问或修改数据
}
}
});
</script>
v- cloak
v- cloak 在 Vue 渲染完指定的整个DOM后才进行显示， 一般与display：none进行结合使用，解决初始化慢导致的页面闪动问题。
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
v-once
只渲染元素和组件一次。
渲染完成后，元素/组件及其所有子节点将被视为静态内容并跳过，可以用于优化更新性能。
<div id="app">
<p>这里没有使用 v-once :{{onceData}}</p>
<p v-once>这里使用了 v-once :{{onceData}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
onceData: '12344'
}
})
</script>
在控制台输入app.onceData = 90看看会发生什么~~
条件渲染指令
v-if, v-else-if ,v-else
<div v-if="type === 'name'">
用户名：
<input type="text" placeholder="请输入用户名">
</div>
<div v-else>
密码：
<input type="text" placeholder="请输入密码">
</div>
<button v-on:click="changeType">点击切换</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
type: 'name'
},
methods: {
changeType: function () {
this.type = (this.type === 'name' ? 'password' : 'name')
}
}
})
</script>
v-if 的弊端
在上面的例子中，在输入框中输入任何值，点击切换后，发现我们输入的值仍在.....
这是因为： Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 因此会出现乌龙，只会渲染变化的元素，也就是说，input元素被复用了（仅仅是替换了它的 placeholder）。
针对 v-if 的弊端的解决办法 --- 用 key 管理可复用的元素
Vue 提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可。
<div v-if="type === 'name'">
用户名：
<input type="text" placeholder="请输入用户名" key= "name">
<!-- 加上唯一的key值 -->
</div>
<div v-else>
密码：
<input type="text" placeholder="请输入密码" key = "password">
<!-- 加上唯一的key值 -->
</div>
<button v-on:click="changeType">点击切换</button>
v-show
v-show 实际上是改变display 属性，带有 v-show 的元素始终会被渲染并保留在 DOM 中。
<div id="app">
<p v-show="visible">v-show 实际上只是简单地切换元素的 CSS 属性 display</p>
<button @click= "changeView">点击切换</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
visible: true
},
methods: {
changeView: function() {
this.visible = !this.visible
}
}
})
</script>
v-if 和v-show 比较
- v-if 有更高的切换开销 —— 判断是否加载DOM，需要就渲染，不需要时移除）
- v-show有更高的初始渲染开销 —— 始终保留在DOM中，切换CSS display
列表渲染指令v-for
当需要将一个数组遍历或枚举一个对象属性的时候循环显示时，就会用到列表渲染指令 v-for。
用法： v-for 写在要遍历的元素上，类似于下面这样：
<li v-for="item in items">
{{ item.message }}
</li>
当 v-if 和 v-for一起使用时。v-for 比 v-if 优先级更高
遍历一个数组
参数： item 、index(可选）
<div id="app">
<ul>
<li v-for="(item,index) in myBooks"> {{index}} -- {{item.bookname}} -- {{item.author}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
myBooks: [
{bookname: '长腿叔叔',author:'简·韦伯斯特'},
{bookname: '我们仨',author:'杨绛'},
{bookname: '岛上书店',author:'美）加布瑞埃拉·泽文'}
]
}
})
</script>
遍历一个对象
参数： value、 key（可选） 、index（可选）
注意： 顺序不可改变 ，必须是 value,key,index 这样的顺序
<div id="app">
<ul>
<li v-for="(value,key,index) in obj">
{{index}} - {{key}} - {{value}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
obj: {
book: '如何阅读一本书',
learning: 'vue'
}
}
})
</script>
网友评论