Vue.js 0.12 发布
发布在Vue.js 中文入门2015年8月7日view:14825Vue.js
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

很久没更新了,其实 Vue 0.12 发布有段时间了,如果你没有 follow Vue.js 的 twitter 账号或者不常看 GitHub 的话,这里是 0.12 的一些简略更新:

更整洁的组件语法

  • 不再推荐使用 v-componentv-with ;组件统一推荐使用自定义元素风格;
  • 组件名不再要求必须含有短横;
  • 数据传递统一使用 props 选项(0.11 的 paramAttributes)。
  • 可以精确地指定 props 的数据绑定方式:单向,双向,或是一次性。
  • 可以对 props 进行运行时类型检查。

以后组件的调用大部分时候长这样:

<my-component prop="{{parentData}}"></my-component>

动态组件使用特定的 <component> 标签:

<component is="{{componentId}}"></component>

过滤器参数语法改进

原本的过滤器参数是全部当做字符串传入过滤器函数里的,现在默认视作动态数据,只有包在引号里的参数才会作为字符串传入:

{{ msg | filter a 'b' }}

这里传入 filter 函数的参数依次为:vm.msg 的值, vm.a 的值, 字符串"b"

异步组件

定义组件时,可以提供一个异步的组件加载函数:

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

组件会自动在加载函数调用 resolve 回调后才渲染。此功能可以配合 $.getScript, AMD/Require,js,或是 Webpack 使用:

Vue.component('async-example', function (resolve, reject) {
  // 利用 webpack 自带的代码分割功能
  require(['./my-async-component'], resolve)
})

加强动画系统

  • CSS transition 和 JS transition 现在可以混合使用,暴露的 JS 钩子函数也更多了。
  • v-repeat 可以通过简单地添加一个 stagger 属性来实现渐进动画;也可以通过 JS 钩子函数自定义渐进的时间差。

性能提升

  • 大列表首屏渲染速度提升最高达 40%,内存使用量也减少将近 40%
  • 新增 track-by=”$index”,大列表新数据重绘速度超过 React。

详细改动(英文):

另,0.12 的 中文文档 正在社区合作翻译中,欢迎参与。

评论
发表评论
2年前
赞了此文章!
3年前

现在要看 1.0 的.

3年前
赞了此文章!
3年前
添加了一枚【评注】:这里还不能用大写么, 类似http://jsfiddle.net/f4g7ox4r/ item使用了Item
3年前

@hipibo 等着0.12的中文呢啊

3年前
赞了此文章!
3年前

有服务端渲染的计划么

3年前
添加了一枚【评注】:之前的template还可以使用么
3年前
添加了一枚【评注】:之前template还可以使用么
3年前

@战斗力等于五 兄弟看这里 cn.vuejs.org 由@勾三股四 发起的

3年前
赞了此文章!
3年前
赞了此文章!
3年前

昨天还刚刚在知乎提问了,感谢作者的图文详细的问答!最近vue相当高产啊!!!期待中文文档尽快面世,英文不好T T

3年前
赞了此文章!
3年前
赞了此文章!
WRITTEN BY
尤小右
不会搞艺术的程序员不是好设计师
TA的新浪微博
PUBLISHED IN
Vue.js 中文入门

Vue.js 是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API,让编写动态的UI界面变得轻松简单。本专栏是Vue.js的中文版入门教程。

我的收藏