想看上一节请点击上面的链接。
是不是感觉自己会的并不多,可是用起来却很舒服啊,对,这就是Vue.js的魅力,但是我们要沉住气啊,还有很多需要学的啊。
接下来我们继续Vue.js的基本指令吧。
v-cloak
v-vloak不需要表达式,它会在Vue示例结束编译时从绑定的HTML元素上移除,经常和CSS的display:none;配合使用:
<div id = "app" v-cloak>
{{ messsage }}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'这是一段文本'
}
})
</script>
这时虽然已经加了指令c-cloak,但其实并没有起到任何作用,当网速较慢,Vue.js文件华美加载完成时,在页面会显示{{message}}的字样,直到Vue创建实例、编译模板时,DOM才会被替换,所以这个过程屏幕时有闪烁的。只要有一句话就可以解决这个问题了:
[v-cloak]{
display:none;
}
在一般情况下,v-cloak时一个解决初始化慢导致页面闪动的最佳实践,对于简单的项目很实用,但是在具有工程化的项目里,比如后面进阶篇将介绍webpack和vue-router时,项目的HTML结构只有一个空的div元素,剩余的内容都是由路由去挂载不同组件完成的,所以不再需要v-cloak。
v-once
v-once是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容,例如:
<div id = "app" v-cloak>
<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在业务中很少使用,当你选哟进一步优化性能时,可能会用到。
接下来我们介绍一下条件渲染指令,
v-if、v-else-if、v-else
其实我们在前面介绍了一些了,这些与JavaScript的条件语句if、else、else if类似,Vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件,例如:
<div id = "app">
<p v-if="status === 1">当statitus为1时显示该行</p>
<p v-else-if="status === 2">当statitus为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>元素上使用条件指令,最终渲染的结果不会包含该元素,例如:
Vue在渲染元素时,由于效率的考虑,会尽可能的复用已有的元素而非重新渲染,比如接下来的示例(这里展示全部代码,方方便测试):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
</head>
<body>
<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 src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
type:'name'
},
methods:{
handleToggleClick:function(){
this.type = this.type === 'name'?'mail':'name';
}
}
})
</script>
</body>
</html>
接下来展示效果
不难看出,在键入内容后,点击切换按钮,虽然DOM变了,但之前在输入框键入的内容并没有改变,只是替换了placeholder的内容,说明<input>元素被复用了。
如果你不喜欢这样,可以使用Vue.js提供的key属性,它可以让你自己决定是否要复用元素,key的值必须是唯一的:
<template v-if="type === 'name'">
<label>用户名:</label>
<input placeholder = "请输入用户名" key="name-input">
</template>
<template v-else>
<label>邮箱:</label>
<input placeholder = "请输入邮箱" key="mail-input">
</template>
给连个元素都增加key后,就不会被复用了,切换类型时,切换类是时键入的内容也会被删除。
v-show
v-show的用法与v-if基本一致,只不过v-show是改变元素的CSS属性display。当v-show表达式的值为false时,元素会被隐藏,查看DOM结构会看到元素上加载了内联样式display:none;,
<p v-show="status === 1">当 status 为 1 时显示该行</p>
// 渲染的结果为
<p style="display: none;">当 status 为 1 时显示该行</p>
这里要注意:v-show不能在<template>上使用。
这里介绍了v-if和v-show,而且他们具有类似的功能,不过v-if才是真正的条件渲染,它会根据表达式适当的销毁或重建元素及绑定的时间或子组件。若表达式初始值为false,则一开始元素/组件并不会渲染,只有当条件第一次变为真时才开始编译。
而v-show只是简单的CSS属性切换,无论条件真与否,都会被编译。相比之下,v-if更适合条件不经常改变的场景,因为它切换开销相对较大,而v-show适用于频繁切换条件。
列表渲染指令v-for
当需要将一个数组遍历或者枚举一个对象循环显示时,就会用到列表渲染指令v-if。它的表达式需要结合in来使用,类似item in items的形式。那咱们看个例子:
显示效果
在表达式中,books是数据,book是当前数组元素 的别名,循环出的每个<li>内的元素都可以访问相应的当前数据book。列表渲染也支持用of来代替in作为分隔符,它更接近JavaScript迭代器的语法:
与v-if一样,v-for也可以内置标签<template>上,将多个元素进行渲染:
<template v-for="book in boos">
<li>书名: {{book.name}}</li>
<li>作者: {{book.author}}</li>
</template>
除了数组外,对象的属性也是可以遍历的,例如:
<span v-for="value in user" >{{ value }} </span>
data:{
user:{
name:'Aresn',
gender:'男',
age:26
}
}
渲染后的结果为:
<span>Aresn </span><span>男</span><span>26 </span>
遍历对象属性时,有两个可选参数,分别时键名和索引:
<li v-for= " (value, key, index) in user" >
{ { index } } - { { key } } : { { value } }
</li>
展示的结果:
v-for还可u迭代整数渲染后的结果为:
1 2 3 4 5 6 8 9 10
数组更新
Vue的核心是数据与视图的双向绑定,当我们修改数组时,Vue会检测到数据变化,所以用v-for渲染的视图也会立即更新。Vue包含了一组观察数组变异的方法,使用它们改变数组也会触发视图更新:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
例如我们将之前的一个示例的数据books添加一项:
app.books.push({
name:'《CSS揭秘》',
author:'[希] Lea Verou'
});
使用以上方法会改变这些方法的调用的原始数组,有些方法不会改变原始数组,例如:
filter()
concat()
slice()
它们返回的是一个新数组,在使用这些非变异方法时,可以用新的数组来替换原数组,还是之前展示书目的示例,我们找出含有JavaScript关键词的数目,例如:
渲染结果中,第一项《Vue.js》被过滤掉了,只显示了书名中含有JavaScript的选项。
Vue在检测到数组变化时,并不是直接重新渲染整个列表,而是最大化的复用DOM元素。替换的数组中,含有相同元素的项不会被重新渲染,因此可以大胆地用新数组来替换旧数组,不用翻新性能问题。
需要注意的是,在以下的数组中,Vue是不能检测到的,也不能触发视图更新:
通过 索引直接设置项,比如app.books[3] = {.........}。
修改数组长度,比如app.books.length = 1。
解决第一个问题可以用两种方法实现同样的效果,第一种使用了Vue内置的set方法:
Vue.set('app.books',3,{
name:'《CSS揭秘》',
author:'[希] Lea Verou'
});
如果是在webpack中使用组件化的方式(进阶篇中将介绍),默认是没有导入Vue的,这时可以使用$set,例如:
this.$set('app.books',3,{
name:'《CSS揭秘》',
author:'[希] Lea Verou'
});
这里的this指向的就是当前组件实例,即app。在非webpack模式下可以用$set方法,例如app.$set(...)
另一种方法:
app.books.splice(3,1,{
name:'《css揭秘》',
author:'[希] Lea Verou '
})
第二个问题也可以直接用splice来解决:
app.books.splice(1);
接下来讲一下过滤与排序
当你不想改变原数组,想通过一个数组的副本来做过滤或者排序的显示时,可以使用计算属性来返回过滤或排序后的数组,例如:
还是上面的书目
<template v-for = "book in filterBooks">
...
...
</template>
computed:{
filterBooks:function(){
return this.books.filter(function(){
return book.name.match(/JavaScript/);
});
}
}
这段代码同样是把书名中包含JavaScript关键词的数据过滤出来,计算属性filterBooks依赖books,但是不会修改books。实现排序也是类似的,比如在此基础上新加一个计算属性sortBooks,按章书名的长度有长到短排序:
computed:{
sortedBooks:function(){
return this.books.sort(function(a,b){
return a.name.length-b.name.length;
});
}
}
方法与事件
Vue事件处理v-on,在再见绑定上,类似原声的JavaScript的onclick等写法,也是在HTML上进行监听的。例如,我们监听一个按钮的点击事件,设置一个计数器,每次点击都加1:
点击次数:{{counter}}
<button @click="counter++"> + 1</button>
data:{
counter:0
}
@click的表达式可以直接使用JavaScript语句,也可以是一个在Vue实例中methods选项内的函数名,比如对上例进行扩展,再增加一个按钮,再增加一个按钮,点击一次,计数器加10:
点击次数:{{counter}}
<button @click="handleAdd()"> + 1</button>
<button @click="handleAdd(10)"> + 1</button>
data:{
counter:0
}
methods:{
handleAdd:function(count){
count = count || 1;
// this指向当前Vue实例app
this.counter += count;
}
}
在methods中定义了我们需要的方法供@click调用,需要注意的是,@click调用的方法名后可以不跟括号“()”。此时如果该方法有参数,会默认将原生事件对象event传入,可以尝试修改为@click=“handleAdd”,然后在handleAdd内打印出count参数看看。大部分的业务场景中,如果方法不需要传入参数,为了简便可以不写括号。
这种在HTML元素上监听事件的设计看似将DOM与JavaScript紧耦合,违反分离的原理,时则刚好相反。因为通过HTML就可以知道调用的是哪个方法,将逻辑DOM解耦,便于维护。最重要的是,当ViewModel销毁时,所有的事件处理器都会自动删除,无需自己清理。
Vue提供了特殊变量$event,用于访问原生DOM事件,例如下面的实例可以阻止连接打开:
<a href="www.apple.com" @click="handleClick('禁止打开',$event)">打开链接</a>
methods:{
handleClick:function(message,event){
event.preventDefault();
window.alert(message);
}
}
修饰符
在上例使用的event.preventDefault()也可以使用Vue时间来修饰符来实现,在@绑定的事件后加小圆点“.”,再跟一个后缀来使用修饰符。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="handle"></form>
<!-- 添加事件监听器时使用是按捕获模式 -->
<div @click. capture="handle"> ... </div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div @click.self="handle"> ... </div>
<!-- 只触发一次,组件同样适用 -->
<div @click.once="handle"> ... </div>
在表单元素上监听键盘事件时,还可以使用按键修饰符,比如按下具体某个键时方法才调用
<!-- 只有在 keyCode 是 13 时调用 vm . submit ()-->
<input @keyup.13="submut">
也可以自己配置具体按键
Vue.config.keyCodes.f1 = 112;
// 全局定义后,就可以使用keyCode外,Vue还提供了一些快捷名称,一下时全部的别名:
.enter
.tab
.delete(捕获删除和退格键)
.esc
.space
.up
.down
.left
.right
这些按键修饰符也可以组合使用,或和鼠标一起配合使用:
.ctrl
.alt
.shift
.meta(Mac下是Command键,Windows下是窗口键)
例如:
<! -- Shift + S -->
<input @keyup.shift.83="handleSave">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
以上就是事件指令v-on的基本内容
注意,我们要将vue.min. js和 index.js 文件写在<body>的最底部,如果写在<head>里, Vue 实例 将无法创建,因为此时 DOM 还没有被解析完成,除非通过异步或在事件 DOMContentLoaded (IE 是 onreadystatechange)触发时再创建 Vue 实例,这有点像jQuery 的$(document).ready()方法。
这里有个练习题可以练习
至此我们这一节就结束了,想看下一节的请点击: