vuejs实战

最新推荐文章于 2024-09-17 13:18:15 发布

飞鸿酱

最新推荐文章于 2024-09-17 13:18:15 发布

阅读量1.2k

点赞数

分类专栏： front-end-vue

front-end-vue 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

内置指令

回顾第2.2节，我们已经介绍过指令directive的概念了，vue.js的指令是带有特殊前缀“v-”的html特性，他绑定一个表达式，并将一些特性应用的dom上，其实我们已经用到过很多vue内置的指令，比如v-html、v-pre，还有上一章的v-bind。

基本指令

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。

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-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内置的<template>元素上使用条件指令，最终渲染的结果不会包含钙元素。

vue在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染。

键入内容后，点击切换按钮，虽然dom变了，但是之前在输入框键入的内容并没有改变，只是替换了placeholder的内容，说明了<input>元素被复用了。

如果你不希望这样做，可以使用vuejs提供的key属性，他可以让你自己决定是否复用元素，key的值必须是唯一的。

给两个<input>元素都增加了key后，就不会复用了。切换类型时键入的内容也会被删除，不过<label>元素仍然是被复用的，因为没有添加key属性。

v-show

v-show的用法与v-if基本一致。只不过v-show是改变元素的css属性display。当v-show表达式的值为false时，元素会隐藏，查看dom结构会看到元素上加载了内联样式display：none，

注意:v-show不能在<template>上使用。

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是当前数组元素的别名，循环出的每个<li>内的元素都可以访问到对应的当前数据book，列表渲染也支持用of来代替in作为分隔符，他更接近javascript迭代器的语法

v-for的表达式支持一个可选参数作为当前项的索引。

分隔符in前的语句使用括号，第二项就是books。当前项的索引。

注意：如果你使用过vuejs1.x的版本，这里的index也可以由内置的$index代替，不过在2.x里取消了该用法。

与v-if一样，v-for也可以用在内置标签<template>上，将多个元素进行渲染

除了数组外，对象的属性也是可以遍历的。

遍历对象属性时，有两个可选参数，分别是键名和索引

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

具体用法如下：

阻止单击事件冒泡

提交事件不再重载页面