内置指令
回顾第2.2节,我们已经介绍过指令directive的概念了,vue.js的指令是带有特殊前缀“v-”的html特性,他绑定一个表达式,并将一些特性应用的dom上,其实我们已经用到过很多vue内置的指令,比如v-html、v-pre,还有上一章的v-bind。
基本指令
v-cloak
v-cloak不需要表达式,他会在vue实例结束编译时从绑定的html元素上移除,经常和css的display:none配合使用
[v-cloak]{
display:none;
}
在一般情况下,v-cloak是一个解决初始化慢导致页面闪动的最佳实践,对于简单的项目很实用,但是在具有工程化的项目里,比如后面进阶篇将介绍webpack和vue-router时,项目的html结构只有一个空的div元素,剩余的内容都是由路由去挂在不同的组件完成的,所以不再需要v-cloak。
v-once
v-once也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容。
{
{message}}
{
{message}}
条件渲染指令
v-if v-else-if v-else
与javascript的条件语句if、else、else if 类似,vuejs的条件指令可以根据表达式的值在dom中渲染或销毁元素/组件,
v-else-if要紧跟v-if,v-else,要紧跟v-else-if或v-if,表达式的值为真时,当前元素/组件及所有子节点将被渲染,为假时被移除。如果一次判断的是多个元素。可以在vuejs内置的元素上使用条件指令,最终渲染的结果不会包含钙元素。
vue在渲染元素时,出于效率考虑,会尽可能地复用已有的元素而非重新渲染。
键入内容后,点击切换按钮,虽然dom变了,但是之前在输入框键入的内容并没有改变,只是替换了placeholder的内容,说明了元素被复用了。
如果你不希望这样做,可以使用vuejs提供的key属性,他可以让你自己决定是否复用元素,key的值必须是唯一的。
给两个元素都增加了key后,就不会复用了。切换类型时键入的内容也会被删除,不过
v-show
v-show的用法与v-if基本一致。只不过v-show是改变元素的css属性display。当v-show表达式的值为false时,元素会隐藏,查看dom结构会看到元素上加载了内联样式display:none,
注意:v-show不能在上使用。
v-if与v-show的选择
v-if和v-show具有类似的功能,不过v-if才是真正的条件渲染,他会根据表达式适当地销毁或重建元素及绑定的事件或子组件,若表达式初始值为false,则一开始元素/组件并不会渲染,只有当条件第一次变为真时才开始编译。
v-show只是简单的css属性切换,无论条件真与否,都会被编译。相比之下,v-if更适合条件不经常改变的场景,因为他切换开销相对较大,而v-show适用于频繁切换条件。
5.3列表渲染指令v-for
5.3.1基本用法
当需要将一个数组遍历或枚举一个对象循环显示时,就会用到列表渲染指令v-for。他的表达式需结合in来使用,类似item in items的形式,
在表达式中,books是数据,book是当前数组元素的别名,循环出的每个
内的元素都可以访问到对应的当前数据book,列表渲染也支持用of来代替in作为分隔符,他更接近javascript迭代器的语法
v-for的表达式支持一个可选参数作为当前项的索引。
分隔符in前的语句使用括号,第二项就是books。当前项的索引。
注意:如果你使用过vuejs1.x的版本,这里的index也可以由内置的$index代替,不过在2.x里取消了该用法。
与v-if一样,v-for也可以用在内置标签上,将多个元素进行渲染
除了数组外,对象的属性也是可以遍历的。
遍历对象属性时,有两个可选参数,分别是键名和索引
v-for还可以迭代整数
5.3.2数组更新
vue的核心是数据与视图的双向绑定,当我们修改数组时,vue会检测到数据变化,所以用v-for渲染的视图也会立即更新。vue包含了一组观察数组变异的方法,使用它们改变数组也会触发视图更新
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
可以尝试编写完整实例来查看效果。
使用以上方法会改变被这些方法调用的原始数组,有些方法不会改变原数组。
filter()
concat()
slice()
它们返回的是一个新数组,在使用这些非变异方法时,可以用新数组来替换原数组,还是之前展示书目的示例,我们找出含有javascript关键词的书目
渲染的结果中,第一项vuejs实战被guolv掉了,只显示书名中含有的javascript的选项。
vue在检测到数组变化时,并不是直接重新渲染到整个列表,而是最大化的复用dom元素。替换地数组中,含有相同元素的项不会被重新渲染,因此可以大胆地用新数组来替换就数组,不用担心性能问题。
需注意的是,以下变动的数组中,vue是不能检测到的,也不会触发视图更新
1通过索引直接设置项,比如app.books[3]={...}
2修改数组长度,比如app.books.length=1
解决第一个问题可以用两种方法实现同样的效果,第一种使用vue内置的set方法
如果是在webpack中使用组件化的方式,默认是没有导入vue的,这是可以使用$set,
这里的this指向的就是当前组件实例,即app,在非webpack模式下也可以用$set方法,
5.3.3过滤与排序
当你不想改变原数组,想通过一个数组的副本来做过滤或排序的显示时,可以使用计算属性,来返回过滤或排序后的数组
上述是把书名中包含javascript关键词的数据过滤出来,计算属性filterBooks依赖books,但是不会修改books。实现排序也是类似的,比如再次基础上新加一个计算属性sortedBooks,按照书名的长度由长到短进行排序。
5.4方法与事件
5.4.1基本用法
在第2.2节,我们 已经引入了vue事件处理的概念v-on,在事件绑定上,类似原生javascript的onclick等写法,也是在html上进行监听的。
注意:上面的@click等同于v-on:click,是一个语法糖。
@click的表达式可以直接使用javascript语句,也可以是一个vue实例中methods选项内的函数名
在methods中定义了我们需要的方法供@click调用,需要注意的是,@click调用的方法名后可以不跟()。此时,如果该方法有参数,默认会将原生事件对象event传入,可以尝试修改为@click=“handleAdd”,然后再handleAdd内打印出count参数看看,在大部分业务场景中,如果方法不需要传入参数,为了简便可以不写括号。
这种在html元素上监听事件的设计看似将dom与javascript紧耦合,违背分离的原理,实则刚好相反。因为通过html就可以知道调用的是哪个方法,将逻辑yudom解耦,便于维护。最重要的是,当viewmodel销毁时,所有的事件处理器就会自动删除,无需自己清理。
vue提供了一个特殊变量$event,用于访问原生dom事件。
5.4.2修饰符
在上例中使用的event.preventDefault()也可以用vue事件的修饰符来实现,在@绑定的事件后加小圆点“.”,再跟一个后缀来使用修饰符。vue支持一下修饰符:
.stop
.prevent
.capture
.self
.once
具体用法如下:
阻止单击事件冒泡
提交事件不再重载页面
添加事件侦听器时使用事件捕获模式
只当事件在该元素本身(而不是子元素)触发时触发回调
只触发一次,组件同样适用
在表单元素上监听键盘事件时,还可以使用按键修饰符,比如按下具体某个键时才调用方法:
只有keycode是13时调用vm.submit()
也可以自己配置具体按键
vue.config.keycodes.f1=112;
全局定以后,就可以使用@keyup.f1
除了具体的某个keycode外,还提供了一些快捷名称,一下全部的别名
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
这些按键修饰符也可以组合使用,或和鼠标一起配合使用
.ctrl
.alt
.shift
.meta