Vue.JS入门篇--列表渲染

JavaScript07

Vue.JS入门篇--列表渲染,第1张

查看一下效果,应该很容易得到结果

有时我们可能需要重复一个包含多个节点的块,这时可以用 <template>标签包裹这个块。这里的 <template>标签只起到语义上的包裹作用,其本身不会被渲染出来。例如:

简单值 (primitive value) 即字符串、数字、boolean 等并非对象的值。对于包含简单值的数组,你可用 $value 直接访问值:

有时我们可能想要更明确地访问当前作用域的变量而不是隐式地回退到父作用域。你可以通过提供一个参数给 v-repeat 指令并用它作为将被迭代项的别名:

Vue.js 内部对被观察数组的变异方法 (mutating methods,包括 push(), pop(), shift(), unshift(), splice(), sort() 和 reverse()) 进行了拦截,因此调用这些方法也将自动触发视图更新。

下面是一个演示的例子,点击按钮的时候数据项会被移除

Vue.js 给被观察数组添加了两个便捷方法:$set() 和 $remove() 。

你应该避免直接通过索引来设置数据绑定数组中的元素,比如 demo.items[0] = {},因为这些改动是无法被 Vue.js 侦测到的。你应该使用扩展的 $set() 方法:

$remove() 只是 splice()方法的语法糖。它将移除给定索引处的元素。当参数不是数值时,$remove() 将在数组中搜索该值并删除第一个发现的对应元素。

当你使用非变异方法,比如filter(), concat() 或 slice(),返回的数组将是一个不同的实例。在此情况下,你可以用新数组替换旧的数组:

你可能会认为这将导致整个列表的 DOM 被销毁并重新渲染。但别担心,Vue.js 能够识别一个数组元素是否已有关联的 Vue 实例, 并尽可能地进行有效复用。

在某些情况下,你可能需要以全新的对象(比如 API 调用所返回的对象)去替换数组。如果你的每一个数据对象都有一个唯一的 id 属性,那么你可以使用 track-by 特性参数给 Vue.js 一个提示,这样它就可以复用已有的具有相同 id 的 Vue 实例和 DOM 节点。

例如:你的数据是这个样子的

那么你可以像这样给出提示:

在替换 items 数组时,Vue.js 如果碰到一个有 _uid: '88f869d' 的新对象,它就会知道可以直接复用有同样 _uid 的已有实例。 在使用全新数据重新渲染大型 v-repeat 列表时,合理使用 track-by 能极大地提升性能。

你也可以使用 v-repeat 遍历一个对象的所有属性。每个重复的实例会有一个特殊的属性 $key。对于简单值,你也可以象访问数组中的简单值那样使用 $value 属性。

在 ECMAScript 5 中,对于给对象添加一个新属性,或是从对象中删除一个属性时,没有机制可以检测到这两种情况。针对这个问题,Vue.js 中的被观察对象会被添加三个扩展方法: $add(key, value), $set(key, value) 和 $delete(key)。这些方法可以被用于在添加 / 删除观察对象的属性时触发对应的视图更新。方法 $add 和 $set 的不同之处在于当指定的键已经在对象中存在时 $add 将提前返回,所以调用 obj.$add(key) 并不会以 undefined 覆盖已有的值。

v-repeat 也可以接受一个整数。在这种情况下,它将重复显示一个模板多次。 下面的例子将迭代3次。

有时候我们只需要显示一个数组的过滤或排序过的版本,而不需要实际改变或重置原始数据。Vue 提供了两个内置的过滤器来简化此类需求: filterBy 和 orderBy。

1、Vue是什么 Vue.js 是目前最火的一个前端框架,除了可以开发网站,还可以开发手机App。 Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架。 Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。 Vue.js 是一套用于构建用户界面的渐进式框架。 2、Vue的特点 遵循 MVVM 模式 编码简洁,体积小,运行效率高,适合移动/PC 端开发 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目 3、Vue与其他前端框架的关系 借鉴 angular 的模板和数据绑定技术 借鉴 react 的组件化和虚拟 DOM 技术 4、Vue的现有插件 vue-cli: vue 脚手架,用于搭建项目的骨架 vue-resource(axios): ajax 请求 vue-router: 路由 vuex: 状态管理 vue-lazyload: 图片懒加载 vue-scroller: 页面滑动相关 mint-ui: 基于 vue 的 UI 组件库(移动端) element-ui: 基于 vue 的 UI 组件库(PC 端) 5、学习Vue的思想改变

Vue的中心思想是数据驱动,像远古时代的老前辈jQuery是结构驱动。

大家回忆下以前我们使用jQuery写代码的时候,经常是这样写的:

$("#myDiv").html("HelloWorld")

这些写法首先要获取Dom节点,也就是Dom结构,然后再修改数据更新结构的内容,使用jQuery的一个很大的目的就是为了去简化Dom的操作,而使用Vue就大不一样了,Vue的做法就是直接this.msg=HelloWorld,然后msg就会自动的同步到结构上,我们所要关心的是数据内容的改变,而不再去关心如何操作Dom结构了。

总结一句话:不要在想着怎么操作DOM,而是想着如何操作数据!!