一.基本指令
1.v-cloak
v-cloak不需要表达式,它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和CSS的display:none;配合使用:
<div id="app" v-cloak>
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '这是一段文本'
}
})
</script>
这时虽然已经加了指令v-cloak, 但其实并没有起到任何作用,当网速较慢、Vue.js文件还没加载完时,在页面上会显示
{{ message }}的字样,直到Vue创建实例、编译模板时,DOM才会被替换,所以这个过程有闪动的。只要加上一句CSS就可以解决这个问题了:
[v-cloak] {
display: none;
}
在一般情况下,v-cloak是一个解决初始化慢导致页面闪动的最佳实践,对于简单的项目很实用,但是在具有工程化的项目里,比如后面进阶篇介绍webpack和vue-router时,项目的HTML结构只有一个空的div元素,剩余的内容都是由路由去挂载不同组件完成的,所以不再需要v-cloak.
2. v-once
v-once 也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容,例如:
<div id="app">
<span v-once>{{ message }}</span>
<div v-once>
<span>{{ message }}</span>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '这时一段文本'
}
})
</script>
v-once在业务中很少使用,当你需要进一步优化性能时,可能会用到。
二. 条件渲染指令
1. v-if、v-else-if、v-else
与JavaScript的条件语句if、else、else if类似,Vue-js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件,例如:
<div id="app">
<p v-if="status === 1">当status为1时显示该行</p>
<p v-else-if="status === 2">当status为2时显示该行</p>
<p v-else>否则显示该行</p>
</div>
<script>
var app = new Vue ({
el: '#app',
data: {
status: 1
}
})
</script>
v-else-if要紧跟v-if,v-else要紧跟v-else-if或v-if,表达式的值为真时,当前元素/组件及所有子节点将被渲染,为假时被移除。如果一次判断的是多个元素,可以在Vue.js内置的<template>元素上使用条件指令,最终渲染的结果不会包含该元素,例如:
<div id="app">
<template v-if="status === 1">
<p>这是一段文本</p>
<p>这是一段文本</p>
<p>这是一段文本</p>
</template>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
status: 1
}
})
</script>
Vue在渲染元素时,出于效率考虑,会尽可能地复用已有的元素而非重新渲染,比如下面的示例:
<div id="app">
<template v-if="type === 'name'">
<label>用户名:</label>
<input placeholder="输入用户名">
</template>
<template v-else>
<label>邮箱:</label>
<input placeholder="输入邮箱">
</template>
<button @click=“handleToggleClick”>切换输入类型</button>
</div>
<script>
var app = new Vue ({
el: '#app',
data: {
type: 'name'
},
methods: {
handleToggleClick: function() {
this.type = this.type === 'name' ? 'mail' : 'name';
}
}
})
</script>
2. v-show
v-show的用法与v-if基本一致,只不过v-show是改变元素的CSS属性display。当v-show表达式的值为false时,元素会隐藏,查看DOM结构会看到元素上加载了内联样式 display:none;
<div id="app">
<p v-show="status === 1">当status为1时显示该行</p>
</div>
<script>
var app = new Vue ({
el: '#app',
data: {
status: 2
}
})
</script>
渲染后的结果为:
<p style="display: none;">当status为1时显示该行</p>
提示:v-show 不能在<template>上使用。
3. v-if 与 v-show的选择
v-if和v-show具有类似的功能,不过v-if才是真正的条件渲染, 它会根据表达式适当地销毁或重建元素或绑定的事件或子组件。若表达式初始值为false,则一开始元素/组件并不会渲染,只有当条件第一次变为真时才开始编译。
而v-show只是简单的CSS属性切换,无论条件真或否,都会被编译。相比之下,v-if更适合条件不经常改变的场景,因为它切换开销相对较大,而v-show适用于频繁切换条件。
三. 列表渲染指令v-for
1.基本用法
当需要将一个数组遍历或枚举一个对象循环显示时,就会用到列表渲染指令v-for。它的表达式需结合in来使用,类似item in items的形式,看下面的示例:
<div id="app">
<ul>
<li v-for="book in books">{{ book.name }}</li>
</ul>
</div>
<script>
var app = new Vue ({
el: '#app',
data: {
books: [
{ name: '《Vue.js实战》'},
{ name: '《JavaScript语言精粹》'},
{ name: 'JavaScript高级程序设计'}
]
}
})
</script>
2. 数组更新
Vue的核心是数据与视图的双向绑定,当我们修改数组时,Vue会检测到数据变化,所以用v-for渲染的视图也会立即更新。Vue包含了一组观察数组变异的方法,使用它们改变数组也会触发视图更新:
Push()
Pop()
Shift()
Unshift()
Splice()
Sort()
Reverse()
如,我们将之前一个示例的数据books添加一项:
app.books.push({
name: '《CSS揭秘》',
author: '[希] Lea Verou'
});
使用以上方法会改变被这些方法调用的原始数组,有些方法不会改变原数组,如:Filter()、Concat()、Slice()。它们返回的是一个新数组,在使用这些非变异方法时,可以用新数组来替换原数组。
3. 过滤与排序
当你不想改变原数组,想通过一个数组的副本来做过滤或排序的显示时,可以使用计算属性来返回过滤或排序后的数组,如:
<div id="app">
<ul>
<template v-for="book in filterBooks">
<li>书名:{{book.name}}</li>
<li>作者:{{book.author}}</li>
</template>
</ul>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
books :[
{
name:'《Vue.js》',
author:'刘杰',
},
{
name:'《JavaScript》',
author:'Douglas',
},
{
name:'《JavaScript高级程序设计》',
author:'Nicholas',
},
]
},
computed:{
filterBooks:function(){
return this.books.filter(function(book){
return book.name.match(/JavaScript/);
})
}
}
})
</script>
四. 方法与事件
1.基本用法
@click等同于v-on:click,是一个语法糖。在method中定义方法可以供@click调用,@click后面的方法可以不跟括号()。如果该方法有参数,默认会将原生事件对象event传入。Vue提供了一个特殊变量$event,用于访问原生Dom事件,例如可以阻止链接打开。
<div id="app">
<a href="www.baidu.com" @click="handleClick('禁止打开',$event)"></a>
</div>
<script>
var app = new Vue({
el:'#app',
methods:{
handleClick:function(message,event){
event.preventDefaulit();
window.alert(message);
}
}
})
</script>
2.修饰符
上述中的event.preventDefaulit()可以使用修饰符实现,在@绑定的事件后加小圆点“.”,再跟一个后缀使用修饰符。Vue支持以下修饰符:
- .stop
- .prevent
- .capture
- .self
- .once
具体用法如下:
<!--阻止单击事件冒泡-->
<a @click.stop="handle"></a>
<!--提交时间不再重载页面-->
<form @submit.prevent="handle"></form>
<!--修饰符串联-->
<a @click.stop.prevent="handle"></a>
<!--只有修饰符-->
<form @submit.prevent></form>
<!--添加事件监听器-->
<div @click.capture="handle">...</div>
<!--只当事件在该元素本身(而不是子元素)触发时触发回调-->
<div @click.self="handle">...</div>
<!--只触发一次-->
<div @click.once="handle">...</div>
<!--监听键盘-->
<input @keyup.13="submit">