diff --git a/README.md b/README.md index 3f866306b7..cb8e00ad45 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,101 @@ -# vue.js 2.0 正式版 中文翻译文档(正在进行中...) http://vuefe.cn +# vue.js 2.0 中文翻译文档(即将完成 - 急需校对人员) http://vuefe.cn -> 基于 hexo && vuejs.org > 求小伙伴共同翻译,有兴趣加qq 315129552 +> 目前急需校对人员 - 中文翻译分支 2.0-cn +## Guide 翻译进度 + +### Essentials 基础 + +序号 | 是否完成 | 对应文档文件名 | 中文标题 | 贡献者 | 认领者 +----- | ------- | ------------- | --- | --- | --- +1 | 是 | installation.md | 安装 | @dingyiming | @dingyiming +2 | 是 | index.md | 介绍 | @hijiangtao | @dingyiming @hijiangtao +3 | 是 | instance.md | 实例 | @dingyiming | @dingyiming +4 | 是 | syntax.md | 模板语法 | @daix6 | @tingtien @daix6 +5 | 是 | computed.md | 计算属 性 | @dingyiming | @dingyiming +6 | 是 | class-and-style.md | Class 与 Style 绑定 | @595074187 | @595074187 +7 | 是 | conditional.md | 条件渲染 | @dingyiming | @dingyiming +8 | 是 | list.md | 列表渲染 | @tingtien | @tingtien +9 | 是 | events.md | 事件处理器 | @dingyiming | @dingyiming +10 | 是 | forms.md | 表单控件绑定 | @dingyiming | @dingyiming +11 | 是 | components.md | 组件 | @ezreally | @ezreally + +### Advanced 进阶 + +序号 | 是否完成 | 对应文档文件名 | 中文标题 | 贡献者 | 认领者 +----- | ------- | ------------- | --- | --- | --- +12 | 是 | transitions.md | 过渡: 进入, 离开, 和 列表 | @awe | @awe +13 | 是 | transitioning-state.md | 过渡状态 | @awe | @awe +14 | 是 | render-function.md | Render 函数 | @awe | @awe +15 | x | reactivity.md | 深入响应式原理 | | @veaba +16 | 是 | custom-directive.md | 自定义指令 | @harrytospring | @harrytospring +17 | 是 | mixins.md | 混合 | @harrytospring | @harrytospring +18 | x | plugins.md | 插件 | | @hgcoder +19 | 是 | single-file-components.md | 单文件组件 | @ATLgo | @ATLgo +20 | 是 | routing.md | 路由 | @dingyiming | @dingyiming +21 | 是 | state-management.md | 状态管理 | @dear-lizhihua | @dear-lizhihua +22 | 是 | unit-testing.md | 单元测试 | @70data | @70data +23 | 是 | ssr.md | 服务端渲染 | @dingyiming | @dingyiming + +### Migration 迁移 + +序号 | 是否完成 | 对应文档文件名 | 中文标题 | 贡献者 | 认领者 +----- | ------- | ------------- | --- | --- | --- +24 | 是 | migration.md | 1.x迁移 | @harrytospring | @harrytospring +27 | 是 | migration-vue-router.md | vue-router 0.7.x 迁移 | @forzajuve10 | @forzajuve10 + +### Meta 更多 + +序号 | 是否完成 | 对应文档文件名 | 中文标题 | 贡献者 | 认领者 +----- | ------- | ------------- | --- | --- | --- +25 | 是 | comparison.md | 对比其他框架 | @yongbolv | @yongbolv @daix6 +26 | 是 | join.md | 加入Vue.js社区 | @daix6 | @daix6 + + +## API 翻译 + +### 关于 API 翻译说明 + +- 文中多次使用的几个词,请大家保持一致的翻译,参考了 `vue1.x` 翻译 + - `Type` => 类型 + - `See also` => 另见 + - `Details` => 详细 + - `Options` => 选项 + - `Example` => 示例 + - `Restriction` => 限制 + - `default` => 默认值 + - `Props` => 特性 + - `prop` => 特性 (在 `props` 是指 一个 API 时候,不要翻译成中文) +![image](https://cloud.githubusercontent.com/assets/12537013/19184185/85c11e0e-8cae-11e6-9c86-25907a65e8b4.png) + +- 冒号 使用中文输入法下的,之前如有问题的,可以修改下。 + +> 以下小节均在 `src/api/index.md` 一个文档中 + +## API翻译进度 + +序号 | 是否完成 | 对应小节名称 | 中文标题 | 贡献者 | 认领者 +----- | ------- | ------------- | --- | --- | --- +1 | 是 | Global Config | 全局配置 | @dear-lizhihua | @dear-lizhihua +2 | 是 | Global API | 全局API | @dear-lizhihua | @dear-lizhihua +3 | 是 | Options / Data | 选项 / 数据 | @dear-lizhihua | @dear-lizhihua +4 | 是 | Options / DOM | 选项 / DOM | @ATLgo | @ATLgo +5 | 是 | Options / Lifecycle Hooks | 选项 / 生命周期钩子 | @ATLgo | @ATLgo +6 | 是 | Options / Assets | 选项 / 资源 | @dingyiming | @dingyiming +7 | x | Options / Misc | 选项 / 杂项 | | @dingyiming +8 | 是 | Instance Properties | 实例属性 | @coolzjy | @coolzjy +9 | x | Instance Methods / Data | 实例方法 / 数据 | | @dingyiming +10 | x | Instance Methods / Events | 实例方法 / 事件 | | @mlyknown +11 | x | Instance Methods / Lifecycle | 实例方法 / 生命周期 | | @mlyknown +12 | x | Directives | 指令| | @tingtien +13 | 是 | Special Attributes | 特殊元素 | @70data | @70data +14 | x | Built-In Components | 内置的组件 | | @dear-lizhihua +15 | 是 | VNode Interface | VNode接口 | @70data | @70data +16 | 是 | Server-Side Rendering | 服务端渲染| @70data | @70data + ## 开发 ``` @@ -26,15 +117,4 @@ Start a dev server at `localhost:4000` ``` hexo g hexo d -``` - -## 当前说明(2016.09.26) - -* 基于hexo 和vuejs.org源码 -* 翻译有些滞后,刚刚更新,希望有兴趣的小伙伴直接找我,共勉 -* 文段中英文字母与中文用空一格做间隔,有助于阅读 -* 请尽量对照 vuejs 官方 1.0 中文文档进行翻译,也可以即时看出vue1和vue2直接的区别 -* 导航上 添加了 更新 模块,用于链接到github的 release信息,后面希望单独把changelog放到 /changelog中跟进翻译每次的版本更新内容 -* (畅想:加入热点标记功能 - 点击热点新建github 对应 issue ,话题链接 / 增强文档交互即时纠错) -* (畅想: 首页加入弹幕交互功能) -* (畅想: 添加hacknews-vue2案例解析 以及更多自定义案例解析) +``` \ No newline at end of file diff --git a/src/about/apidoc.md b/src/about/apidoc.md new file mode 100644 index 0000000000..81cb89fee5 --- /dev/null +++ b/src/about/apidoc.md @@ -0,0 +1,35 @@ +--- +title: 参与API翻译 +type: about +order: 2 +--- + +> 官方文档仓库:http://vuejs.org/guide/ +> 翻译文档仓库:https://github.com/vuefe/vuejs.org + +- 加QQ群参与翻译: `427447379` +- [翻译Guide认领](https://github.com/vuefe/vuejs.org/issues/1) +- [翻译API认领](https://github.com/vuefe/vuejs.org/issues/44) +- [翻译指引](https://github.com/vuefe/vuejs.org/issues/25) + +## API文档翻译进度 + + +序号 | 是否完成 | 对应小节名称 | 中文标题 | 贡献者 | 认领者 +----- | ------- | ------------- | --- | --- | --- +1 | 是 | Global Config | 全局配置 | @dear-lizhihua | @dear-lizhihua +2 | 是 | Global API | 全局API | @dear-lizhihua | @dear-lizhihua +3 | 是 | Options / Data | 选项 / 数据 | @dear-lizhihua | @dear-lizhihua +4 | 是 | Options / DOM | 选项 / DOM | @ATLgo | @ATLgo +5 | 是 | Options / Lifecycle Hooks | 选项 / 生命周期钩子 | @ATLgo | @ATLgo +6 | 是 | Options / Assets | 选项 / 资源 | @dingyiming | @dingyiming +7 | x | Options / Misc | 选项 / 杂项 | | @dingyiming +8 | 是 | Instance Properties | 实例属性 | @coolzjy | @coolzjy +9 | x | Instance Methods / Data | 实例方法 / 数据 | | @dingyiming +10 | x | Instance Methods / Events | 实例方法 / 事件 | | @mlyknown +11 | x | Instance Methods / Lifecycle | 实例方法 / 生命周期 | | @mlyknown +12 | x | Directives | 指令| | @tingtien +13 | 是 | Special Attributes | 特殊元素 | @70data | @70data +14 | x | Built-In Components | 内置的组件 | | @dear-lizhihua +15 | 是 | VNode Interface | VNode接口 | @70data | @70data +16 | 是 | Server-Side Rendering | 服务端渲染| @70data | @70data \ No newline at end of file diff --git a/src/about/guide.md b/src/about/guide.md index 79d4a353b2..bc777240f0 100644 --- a/src/about/guide.md +++ b/src/about/guide.md @@ -1,40 +1,36 @@ --- -title: 参与指南 +title: 参与教程翻译 type: about -order: 2 +order: 1 --- +> 官方文档仓库:http://vuejs.org/guide/ +> 翻译文档仓库:https://github.com/vuefe/vuejs.org + - 加QQ群参与翻译: `427447379` - [翻译Guide认领](https://github.com/vuefe/vuejs.org/issues/1) +- [翻译API认领](https://github.com/vuefe/vuejs.org/issues/44) - [翻译指引](https://github.com/vuefe/vuejs.org/issues/25) -## 翻译进度 - -> 原文地址:http://vuejs.org/guide/ -> 仓库:https://github.com/vuefe/vuejs.org - -### 说明 - -- 翻译前,请在此回复认领 -- 认领格式 :` 我翻译 + 文档序号` 即可 +## 教程(guide)文档翻译进度 -## 以下所有文档所在目录为 `src/guide/xxx.md` +> 以下所有文档所在目录为 `src/guide/xxx.md` ### Essentials 基础 序号 | 是否完成 | 对应文档文件名 | 中文标题 | 贡献者 | 认领者 ----- | ------- | ------------- | --- | --- | --- -1 | 是 | installation.md | 安装 | @dingyiming | - -2 | 否 | index.md | 介绍 | | @dingyiming -3 | 是 | instance.md | 实例 | @dingyiming | - -4 | × | syntax.md | 模板语法 | | | -5 | 是 | computed.md | 计算属性 | @dingyiming | - -6 | × | class-and-style.md | Class 与 Style 绑定 | | -7 | 是 | conditional.md | 条件渲染 | @dingyiming | - +1 | 是 | installation.md | 安装 | @dingyiming | @dingyiming +2 | 是 | index.md | 介绍 | @hijiangtao | @dingyiming @hijiangtao +3 | 是 | instance.md | 实例 | @dingyiming | @dingyiming +4 | 是 | syntax.md | 模板语法 | @daix6 | @tingtien @daix6 +5 | 是 | computed.md | 计算属 性 | @dingyiming | @dingyiming +6 | 是 | class-and-style.md | Class 与 Style 绑定 | @595074187 | @595074187 +7 | 是 | conditional.md | 条件渲染 | @dingyiming | @dingyiming 8 | 是 | list.md | 列表渲染 | @tingtien | @tingtien -9 | 是 | events.md | 事件处理器 | @dingyiming | - -10 | 是 | forms.md | 表单控件绑定 | @dingyiming | - -11 | × | components.md | 组件 | | @ezreally +9 | 是 | events.md | 事件处理器 | @dingyiming | @dingyiming +10 | 是 | forms.md | 表单控件绑定 | @dingyiming | @dingyiming +11 | 是 | components.md | 组件 | @ezreally | @ezreally ### Advanced 进阶 @@ -47,16 +43,22 @@ order: 2 16 | 是 | custom-directive.md | 自定义指令 | @harrytospring | @harrytospring 17 | 是 | mixins.md | 混合 | @harrytospring | @harrytospring 18 | x | plugins.md | 插件 | | @hgcoder -19 | x | single-file-components.md | 单文件组件 | | +19 | 是 | single-file-components.md | 单文件组件 | @ATLgo | @ATLgo 20 | 是 | routing.md | 路由 | @dingyiming | @dingyiming -21 | x | state-management.md | 状态管理 | | -22 | x | unit-testing.md | 单元测试 | | @70data +21 | 是 | state-management.md | 状态管理 | @dear-lizhihua | @dear-lizhihua +22 | 是 | unit-testing.md | 单元测试 | @70data | @70data 23 | 是 | ssr.md | 服务端渲染 | @dingyiming | @dingyiming -24 | x | migration.md | 1.x迁移 | | @harrytospring + +### Migration 迁移 + +序号 | 是否完成 | 对应文档文件名 | 中文标题 | 贡献者 | 认领者 +----- | ------- | ------------- | --- | --- | --- +24 | 是 | migration.md | 1.x迁移 | @harrytospring | @harrytospring +27 | 是 | migration-vue-router.md | vue-router 0.7.x 迁移 | @forzajuve10 | @forzajuve10 ### Meta 更多 序号 | 是否完成 | 对应文档文件名 | 中文标题 | 贡献者 | 认领者 ----- | ------- | ------------- | --- | --- | --- -25 | x | comparison.md | 对比其他框架 | | @yongbolv @daix6 -26 | x | join.md | 加入Vue.js社区 | | @daix6 +25 | 是 | comparison.md | 对比其他框架 | @yongbolv | @yongbolv @daix6 +26 | 是 | join.md | 加入Vue.js社区 | @daix6 | @daix6 \ No newline at end of file diff --git a/src/about/index.md b/src/about/index.md index 83e2b741fc..a1d59e16df 100644 --- a/src/about/index.md +++ b/src/about/index.md @@ -1,8 +1,47 @@ --- -title: 关于翻译 +title: 参与指南 type: about -order: 1 +order: 0 --- +> 官方文档仓库:http://vuejs.org/guide/ +> 翻译文档仓库:https://github.com/vuefe/vuejs.org + - 加QQ群参与翻译: `427447379` -- [翻译Guide认领](https://github.com/vuefe/vuejs.org/issues/1) \ No newline at end of file +- [翻译Guide认领](https://github.com/vuefe/vuejs.org/issues/1) +- [翻译API认领](https://github.com/vuefe/vuejs.org/issues/44) +- [翻译指引](https://github.com/vuefe/vuejs.org/issues/25) + + +## 说明 + +- 翻译前,请在对应 issue 回复认领 +- 认领格式 :` 我翻译 + 文档序号` 即可 +- 支持多人协作翻译,冲突可以解决,认领过的,如果你觉着他太慢,可以再次认领,加速翻译,知道大家都是牺牲业余时间来贡献,所以慢也是可以理解的,慢就需要大家一起帮帮忙了!谢谢。 + +## 基础指引 + +### 基础环境 + +- `node lastest` +- `npm lastest` +- `npm i -g hexo` +- `git bash` + +### 主要步骤 + +- `github fork` 仓库代码到自己的账号下 +- `git clone fork` 的仓库代码到本地 +- 进入项目目录 ,`npm install` 安装依赖 +- `hexo s` 启动项目,浏览器打开 `localhost:4000` 查看当前文档情况,已支持browsersync热加载 ,可边改边看 +- 然后用自己喜欢的编辑器,比如`sublime text 3` 打开项目目录,找到 `src/guide` 目录 , 也就是当前文档翻译的目录,根据github 仓库中,认领issue中对照文件名.md ,认领自己打算翻译的内容,然后打开该文件就可以进行翻译了! +![image](https://cloud.githubusercontent.com/assets/12537013/18859543/b6e3d724-84a7-11e6-9bb6-812c45c16782.png) + +- 翻译完后,使用git 提交更新到自己的仓库,后,在`https://github.com/vuefe/vuejs.org/pulls` 提交合并请求 +![image](https://cloud.githubusercontent.com/assets/12537013/19106938/68c786fa-8b1c-11e6-8ea0-30f97cf1a83b.png) + + - 希望大家看清楚需要合并的分支,为`vuefe vuejs.org/2.0-cn` 分支,不要向`vuejs` 官方分支发起合并请求,也不要向 `vuefe vuejs.org/master` 分支发起合并请求,谢谢。 + +- 在QQ群里呼叫群主,合并请求 +- 群主合并内容,并记录贡献, 更新在线静态站内容 + diff --git a/src/api/index.md b/src/api/index.md index 2f6bfc908a..d30ffc1d5f 100644 --- a/src/api/index.md +++ b/src/api/index.md @@ -2,31 +2,31 @@ type: api --- -## Global Config +## 全局配置 -`Vue.config` is an object containing Vue's global configurations. You can modify its properties listed below before bootstrapping your application: +`Vue.config` is 是一个对象,包含 Vue 的全局配置。可以在启动应用之前修改下列属性: ### silent -- **Type:** `boolean` +- **类型:** `boolean` -- **Default:** `false` +- **默认值:** `false` -- **Usage:** +- **用法:** ``` js Vue.config.silent = true ``` - Suppress all Vue logs and warnings. + 取消 Vue 所有的日志与警告。 ### optionMergeStrategies -- **Type:** `{ [key: string]: Function }` +- **类型:** `{ [key: string]: Function }` -- **Default:** `{}` +- **默认值:** `{}` -- **Usage:** +- **用法:** ``` js Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) { @@ -40,34 +40,34 @@ type: api // Profile.options._my_option = 2 ``` - Define custom merging strategies for options. + 自定义选项的混合策略。 - The merge strategy receives the value of that option defined on the parent and child instances as the first and second arguments, respectively. The context Vue instance is passed as the third argument. + 合并策略函数接收定义在父实例和子实例上的 option,分别作为第一个和第二个参数的值,Vue实例上下文被作为第三个参数传入。 -- **See also**: [Custom Option Merging Strategies](/guide/mixins.html#Custom-Option-Merge-Strategies) +- **参考**: [自定义选项的混合策略](/guide/mixins.html#Custom-Option-Merge-Strategies) ### devtools -- **Type:** `boolean` +- **类型:** `boolean` -- **Default:** `true` (`false` in production builds) +- **默认值:** `true` (生产版为 `false`) -- **Usage:** +- **用法:** ``` js - // make sure to set this synchronously immediately after loading Vue + // 务必在加载 Vue 之后,立即同步设置以下内容 Vue.config.devtools = true ``` - Configure whether to allow [vue-devtools](https://github.com/vuejs/vue-devtools) inspection. This option's default value is `true` in development builds and `false` in production builds. You can set it to `true` to enable inspection for production builds. + 配置是否允许 [vue-devtools](https://github.com/vuejs/vue-devtools) 检查代码。开发版本默认为 `true`,生产版本默认为 `false`。生产版本设为 `true` 可以启用检查。 ### errorHandler -- **Type:** `Function` +- **类型:** `Function` -- **Default:** Error is thrown in place +- **默认值:** 默认抛出错误 -- **Usage:** +- **用法:** ``` js Vue.config.errorHandler = function (err, vm) { @@ -75,41 +75,41 @@ type: api } ``` - Assign a handler for uncaught errors during component render and watchers. The handler gets called with the error and the Vue instance. + 指定组件的渲染和观察期间未捕获错误的处理函数。处理函数被调用时,可获取错误信息和 Vue 实例。 ### keyCodes -- **Type:** `{ [key: string]: number }` +- **类型:** `{ [key: string]: number }` -- **Default:** `{}` +- **默认值:** `{}` -- **Usage:** +- **用法:** ``` js Vue.config.keyCodes = { esc: 27 } ``` - Define custom key aliases for v-on. + 自定义 v-on 键位别名。 -## Global API +## 全局 API

Vue.extend( options )

-- **Arguments:** +- **参数:** - `{Object} options` -- **Usage:** +- **用法:** - Create a "subclass" of the base Vue constructor. The argument should be an object containing component options. + 使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。 - The special case to note here is the `data` option - it must be a function when used with `Vue.extend()`. + `data` 选项是特例,需要注意 - 在 `Vue.extend()` 中它必须是函数 ``` html
``` ``` js - // create constructor + // 创建构造器 var Profile = Vue.extend({ template: '

{{firstName}} {{lastName}} aka {{alias}}

', data: function () { @@ -120,82 +120,82 @@ type: api } } }) - // create an instance of Profile and mount it on an element + // 创建 Profile 实例,并挂载到一个元素上。 new Profile().$mount('#mount-point') ``` - Will result in: + 结果如下: ``` html

Walter White aka Heisenberg

``` -- **See also:** [Components](/guide/components.html) +- **参考:** [组件](/guide/components.html)

Vue.nextTick( callback, [context] )

-- **Arguments:** +- **参数:** - `{Function} callback` - `{Object} [context]` -- **Usage:** +- **用法:** - Defer the callback to be executed after the next DOM update cycle. Use it immediately after you've changed some data to wait for the DOM update. + 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。 ``` js - // modify data + // 修改数据 vm.msg = 'Hello' - // DOM not updated yet + // DOM 还没有更新 Vue.nextTick(function () { - // DOM updated + // DOM 更新了 }) ``` -- **See also:** [Async Update Queue](/guide/reactivity.html#Async-Update-Queue) +- **参考:** [异步更新队列](/guide/reactivity.html#Async-Update-Queue)

Vue.set( object, key, value )

-- **Arguments:** +- **参数:** - `{Object} object` - `{string} key` - `{any} value` -- **Returns:** the set value. +- **返回值:** 设置的值. -- **Usage:** +- **用法:** - Set a property on an object. If the object is reactive, ensure the property is created as a reactive property and trigger view updates. This is primarily used to get around the limitation that Vue cannot detect property additions. + 设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。 - **Note the object cannot be a Vue instance, or the root data object of a Vue instance.** + **注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象** -- **See also:** [Reactivity in Depth](/guide/reactivity.html) +- **参考:** [深入响应式原理](/guide/reactivity.html)

Vue.delete( object, key )

-- **Arguments:** +- **参数:** - `{Object} object` - `{string} key` -- **Usage:** +- **用法:** - Delete a property on an object. If the object is reactive, ensure the deletion triggers view updates. This is primarily used to get around the limitation that Vue cannot detect property deletions, but you should rarely need to use it. + 删除对象的属性。如果对象是响应式的,确保删除更新视图的触发器。这个方法主要用于避开 Vue 不能检测到属性被删除的限制,但是你应该很少会使用它。 - **Note the object cannot be a Vue instance, or the root data object of a Vue instance.** + **注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象** -- **See also:** [Reactivity in Depth](/guide/reactivity.html) +- **参考:** [深入响应式原理](/guide/reactivity.html)

Vue.directive( id, [definition] )

-- **Arguments:** +- **参数:** - `{string} id` - `{Function | Object} [definition]` -- **Usage:** +- **用法:** - Register or retrieve a global directive. + 注册或获取全局指令。 ``` js - // register + // 注册 Vue.directive('my-directive', { bind: function () {}, inserted: function () {}, @@ -204,92 +204,92 @@ type: api unbind: function () {} }) - // register (simple function directive) + // 注册(传入一个简单的指令函数) Vue.directive('my-directive', function () { - // this will be called as `bind` and `update` + // 这里将会被 `bind` 和 `update` 调用 }) - // getter, return the directive definition if registered + // getter,返回已注册的指令 var myDirective = Vue.directive('my-directive') ``` -- **See also:** [Custom Directives](/guide/custom-directive.html) +- **参考:** [自定义指令](/guide/custom-directive.html)

Vue.filter( id, [definition] )

-- **Arguments:** +- **参数:** - `{string} id` - `{Function} [definition]` -- **Usage:** +- **用法:** - Register or retrieve a global filter. + 注册或获取全局过滤器。 ``` js - // register + // 注册 Vue.filter('my-filter', function (value) { - // return processed value + // 返回处理后的值 }) - // getter, return the filter if registered + // getter,返回已注册的过滤器 var myFilter = Vue.filter('my-filter') ```

Vue.component( id, [definition] )

-- **Arguments:** +- **参数:** - `{string} id` - `{Function | Object} [definition]` -- **Usage:** +- **用法:** - Register or retrieve a global component. + 注册或获取全局组件。 ``` js - // register an extended constructor + // 注册组件,传入一个扩展过的构造器 Vue.component('my-component', Vue.extend({ /* ... */ })) - // register an options object (automatically call Vue.extend) + // 注册组件,传入一个选项对象(自动调用 Vue.extend) Vue.component('my-component', { /* ... */ }) - // retrieve a registered component (always return constructor) + // 获取注册的组件(始终返回构造器) var MyComponent = Vue.component('my-component') ``` -- **See also:** [Components](/guide/components.html) +- **参考:** [组件](/guide/components.html)

Vue.use( plugin )

-- **Arguments:** +- **参数:** - `{Object | Function} plugin` -- **Usage:** +- **用法:** - Install a Vue.js plugin. If the plugin is an Object, it must expose an `install` method. If it is a function itself, it will be treated as the install method. The install method will be called with Vue as the argument. + 安装 Vue.js 插件。如果插件是一个对象,必须提供 `install` 方法。如果插件是一个函数,它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。 - When this method is called on the same plugin multiple times, the plugin will be installed only once. + 当 install 方法被同一个插件多次调用,插件将只会被安装一次。 -- **See also:** [Plugins](/guide/plugins.html) +- **参考:** [插件](/guide/plugins.html)

Vue.mixin( mixin )

-- **Arguments:** +- **参数:** - `{Object} mixin` -- **Usage:** +- **用法:** - Apply a mixin globally, which affects every Vue instance created afterwards. This can be used by plugin authors to inject custom behavior into components. **Not recommended in application code**. + 全局注册一个混合,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混合,向组件注入自定义逻辑。**不推荐在应用代码中使用**。 -- **See also:** [Global Mixins](/guide/mixins.html#Global-Mixin) +- **参考:** [全局混合](/guide/mixins.html#Global-Mixin)

Vue.compile( template )

-- **Arguments:** +- **参数:** - `{string} template` -- **Usage:** +- **用法:** - Compiles a template string into a render function. **Only available in the standalone build.** + 在render函数中编译模板字符串。**只在独立构建时有效** ``` js var res = Vue.compile('
{{ msg }}
') @@ -303,43 +303,44 @@ type: api }) ``` -- **See also:** [Render Functions](/guide/render-function.html) +- **参考:** [Render 函数](/guide/render-function.html) -## Options / Data +## 选项 / 数据 ### data -- **Type:** `Object | Function` -- **Restriction:** Only accepts `Function` when used in a component definition. +- **类型:** `Object | Function` -- **Details:** +- **限制:** 组件中定义 data 只接受 `函数`。 - The data object for the Vue instance. Vue will recursively convert its properties into getter/setters to make it "reactive". **The object must be plain**: native objects such as browser API objects and prototype properties are ignored. A rule of thumb is that data should just be data - it is not recommended to observe objects with its own stateful behavior. +- **详细:** - Once observed, you can no longer add reactive properties to the root data object. It is therefore recommended to declare all root-level reactive properties upfront, before creating the instance. + Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。**对象必须是普通对象**:浏览器 API 创建的原生对象,原型上的属性会被忽略。大概来说,data 应该只能是数据 - 不推荐观察拥有状态行为的对象。 - After the instance is created, the original data object can be accessed as `vm.$data`. The Vue instance also proxies all the properties found on the data object, so `vm.a` will be equivalent to `vm.$data.a`. + 一旦观察过,不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前,就声明所有的根级响应式属性。 - Properties that start with `_` or `$` will **not** be proxied on the Vue instance because they may conflict with Vue's internal properties and API methods. You will have to access them as `vm.$data._property`. + 实例创建之后,可以通过 `vm.$data` 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性,因此访问 `vm.a` 等价于访问 `vm.$data.a`。 - When defining a **component**, `data` must be declared as a function that returns the initial data object, because there will be many instances created using the same definition. If we still use a plain object for `data`, that same object will be **shared by reference** across all instances created! By providing a `data` function, every time a new instance is created, we can simply call it to return a fresh copy of the initial data. + 以 `_` 或 `$` 开头的属性 **不会** 被 Vue 实例代理,因为它们可能和 Vue 内置的属性、 API 方法冲突。你可以使用例如 `vm.$data._property` 的方式访问这些属性。 - If required, a deep clone of the original object can be obtained by passing `vm.$data` through `JSON.parse(JSON.stringify(...))`. + 当一个组件被定义, `data` 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 `data` 仍然是一个普通对象,则所有的实例将**共享引用**同一个数据对象!通过提供 `data` 函数,每次创建一个新实例后,我们能够调用 `data` 函数,从而返回初始数据的一个全新副本数据对象。 -- **Example:** + 可以通过将 `vm.$data` 传入 `JSON.parse(JSON.stringify(...))` 得到原始数据对象。 + +- **示例:** ``` js var data = { a: 1 } - // direct instance creation + // 直接创建一个实例 var vm = new Vue({ data: data }) vm.a // -> 1 vm.$data === data // -> true - // must use function when in Vue.extend() + // Vue.extend() 中 data 必须是函数 var Component = Vue.extend({ data: function () { return { a: 1 } @@ -347,32 +348,32 @@ type: api }) ``` -

Note that __you should not use an arrow function with the `data` property__ (e.g. `data: () => { return { a: this.myProp }}`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.myProp` will be undefined.

+

注意,__不应该对 `data` 属性使用箭头函数__ (例如`data: () => { return { a: this.myProp }}`)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,`this.myProp` 将是 undefined。

-- **See also:** [Reactivity in Depth](/guide/reactivity.html) +- **另见:** [深入响应式原理](/guide/reactivity.html) ### props -- **Type:** `Array | Object` +- **类型:** `Array | Object` -- **Details:** +- **详细:** - A list/hash of attributes that are exposed to accept data from the parent component. It has a simple Array-based syntax and an alternative Object-based syntax that allows advanced configurations such as type checking, custom validation and default values. + props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值。 -- **Example:** +- **示例:** ``` js - // simple syntax + // 简单语法 Vue.component('props-demo-simple', { props: ['size', 'myMessage'] }) - // object syntax with validation + // 对象语法,提供校验 Vue.component('props-demo-advanced', { props: { - // just type check + // 只检测类型 height: Number, - // type check plus other validations + // 检测类型 + 其他验证 age: { type: Number, default: 0, @@ -385,19 +386,19 @@ type: api }) ``` -- **See also:** [Props](/guide/components.html#Props) +- **另见:** [Props](/guide/components.html#Props) ### propsData -- **Type:** `{ [key: string]: any }` +- **类型:** `{ [key: string]: any }` -- **Restriction:** only respected in instance creation via `new`. +- **限制:** 只用于 `new` 创建的实例中。 -- **Details:** +- **详细:** - Pass props to an instance during its creation. This is primarily intended to make unit testing easier. + 创建实例时传递 props。主要作用是方便测试。 -- **Example:** +- **示例:** ``` js var Comp = Vue.extend({ @@ -411,30 +412,31 @@ type: api } }) ``` +- **另见:** [Props](/guide/components.html#Props) ### computed -- **Type:** `{ [key: string]: Function | { get: Function, set: Function } }` +- **类型:** `{ [key: string]: Function | { get: Function, set: Function } }` -- **Details:** +- **详细:** - Computed properties to be mixed into the Vue instance. All getters and setters have their `this` context automatically bound to the Vue instance. + 计算属性将被混入到 Vue 实例中。getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。 -

Note that __you should not use an arrow function to define a computed property__ (e.g. `aDouble: () => this.a * 2`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.a` will be undefined.

+

注意,__不应该使用箭头函数来定义计算属性函数__ (例如 `aDouble: () => this.a * 2`)。理由是箭头函数绑定了父级作用域的上下文,所以 `this` 将不会按照期望指向 Vue 实例,`this.a` 将是 undefined。

- Computed properties are cached, and only re-computed on reactive dependency changes. + 计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。 -- **Example:** +- **示例:** ```js var vm = new Vue({ data: { a: 1 }, computed: { - // get only, just need a function + // 仅读取,值只须为函数 aDouble: function () { return this.a * 2 }, - // both get and set + // 读取和设置 aPlus: { get: function () { return this.a + 1 @@ -451,20 +453,20 @@ type: api vm.aDouble // -> 4 ``` -- **See also:** - - [Computed Properties](/guide/computed.html) +- **另见:** + - [计算属性](/guide/computed.html) ### methods -- **Type:** `{ [key: string]: Function }` +- **类型:** `{ [key: string]: Function }` -- **Details:** +- **详细:** - Methods to be mixed into the Vue instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their `this` context automatically bound to the Vue instance. + methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 `this` 自动绑定为 Vue 实例。 -

Note that __you should not use an arrow function to define a method__ (e.g. `plus: () => this.a++`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.a` will be undefined.

+

注意,__不应该使用箭头函数来定义 method 函数__ (例如 `plus: () => this.a++`)。理由是箭头函数绑定了父级作用域的上下文,所以 `this` 将不会按照期望指向 Vue 实例,`this.a` 将是 undefined。

-- **Example:** +- **示例:** ```js var vm = new Vue({ @@ -479,17 +481,17 @@ type: api vm.a // 2 ``` -- **See also:** [Methods and Event Handling](/guide/events.html) +- **另见:** [方法与事件处理器](/guide/events.html) ### watch -- **Type:** `{ [key: string]: string | Function | Object }` +- **类型:** `{ [key: string]: string | Function | Object }` -- **Details:** +- **详细:** - An object where keys are expressions to watch and values are the corresponding callbacks. The value can also be a string of a method name, or an Object that contains additional options. The Vue instance will call `$watch()` for each entry in the object at instantiation. + 一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 `$watch()`,遍历 watch 对象的每一个属性。 -- **Example:** +- **示例:** ``` js var vm = new Vue({ @@ -502,9 +504,9 @@ type: api a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, - // string method name + // 方法名 b: 'someMethod', - // deep watcher + // 深度 watcher c: { handler: function (val, oldVal) { /* ... */ }, deep: true @@ -514,9 +516,9 @@ type: api vm.a = 2 // -> new: 2, old: 1 ``` -

Note that __you should not use an arrow function to define a watcher__ (e.g. `searchQuery: newValue => this.updateAutocomplete(newValue)`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.updateAutocomplete` will be undefined.

+

注意,__不应该使用箭头函数来定义 watcher 函数__ (例如 `searchQuery: newValue => this.updateAutocomplete(newValue)`)。理由是箭头函数绑定了父级作用域的上下文,所以 `this` 将不会按照期望指向 Vue 实例,`this.updateAutocomplete` 将是 undefined。

-- **See also:** [Instance Methods - vm.$watch](#vm-watch) +- **另见:** [实例方法 - vm.$watch](#vm-watch) ## 选项 / DOM @@ -695,49 +697,49 @@ type: api - **另见:** [生命周期图示](/guide/instance.html#Lifecycle-Diagram) -## Options / Assets +## 选项 / 资源 ### directives -- **Type:** `Object` +- **类型:** `Object` -- **Details:** +- **详细:** - A hash of directives to be made available to the Vue instance. +一个 用于 Vue 实例 的带 hash 的指令。 -- **See also:** - - [Custom Directives](/guide/custom-directive.html) - - [Assets Naming Convention](/guide/components.html#Assets-Naming-Convention) +- **另见:** + - [自定义指令](/guide/custom-directive.html) + - [资源命名约定](/guide/components.html#Assets-Naming-Convention) ### filters -- **Type:** `Object` +- **类型:** `Object` -- **Details:** +- **详细:** - A hash of filters to be made available to the Vue instance. +一个 用于 Vue 实例 的带 hash 的过滤器。 -- **See also:** +- **另见:** - [`Vue.filter`](#Vue-filter) ### components -- **Type:** `Object` +- **类型:** `Object` -- **Details:** +- **详细:** - A hash of components to be made available to the Vue instance. +一个 用于 Vue 实例 的带 hash 的组件。 -- **See also:** - - [Components](/guide/components.html) +- **另见:** + - [组件](/guide/components.html) -## Options / Misc +## 选项 / 杂项 ### parent -- **Type:** `Vue instance` +- **类型:** `Vue instance` -- **Details:** +- **详细:** Specify the parent instance for the instance to be created. Establishes a parent-child relationship between the two. The parent will be accessible as `this.$parent` for the child, and the child will be pushed into the parent's `$children` array. @@ -745,15 +747,15 @@ type: api ### mixins -- **Type:** `Array` +- **类型:** `Array` -- **Details:** +- **详细:** The `mixins` option accepts an array of mixin objects. These mixin objects can contain instance options just like normal instance objects, and they will be merged against the eventual options using the same option merging logic in `Vue.extend()`. e.g. If your mixin contains a created hook and the component itself also has one, both functions will be called. Mixin hooks are called in the order they are provided, and called before the component's own hooks. -- **Example:** +- **示例:** ``` js var mixin = { @@ -767,31 +769,31 @@ type: api // -> 2 ``` -- **See also:** [Mixins](/guide/mixins.html) +- **另见:** [混合](/guide/mixins.html) ### name -- **Type:** `string` +- **类型:** `string` -- **Restriction:** only respected when used as a component option. +- **限制:** only respected when used as a component option. -- **Details:** +- **详细:** Allow the component to recursively invoke itself in its template. Note that when a component is registered globally with `Vue.component()`, the global ID is automatically set as its name. - Another benefit of specifying a `name` option is debugging. Named components result in more helpful warning messages. Also, when inspecting an app in the Vue devtool, unnamed components will show up as ``, which isn't very informative. By providing the `name` option, you will get a much more informative component tree. + Another benefit of specifying a `name` option is debugging. Named components result in more helpful warning messages. Also, when inspecting an app in the [vue-devtools](https://github.com/vuejs/vue-devtools), unnamed components will show up as ``, which isn't very informative. By providing the `name` option, you will get a much more informative component tree. ### extends -- **Type:** `Object | Function` +- **类型:** `Object | Function` -- **Details:** +- **详细:** Allows declaratively extending another component (could be either a plain options object or a constructor) without having to use `Vue.extend`. This is primarily intended to make it easier to extend between single file components. This is similar to `mixins`, the difference being that the component's own options takes higher priority than the source component being extended. -- **Example:** +- **示例:** ``` js var CompA = { ... } @@ -805,15 +807,15 @@ type: api ### delimiters -- **Type:** `Array` +- **类型:** `Array` -- **default:** `["{{", "}}"]` +- **默认值:** `["{{", "}}"]` -- **Details:** +- **详细:** Change the plain text interpolation delimiters. **This option is only available in the standalone build.** -- **Example:** +- **示例:** ``` js new Vue({ @@ -825,45 +827,45 @@ type: api ### functional -- **Type:** `boolean` +- **类型:** `boolean` -- **Details:** +- **详细:** Causes a component to be stateless (no `data`) and instanceless (no `this` context). They are simply a `render` function that returns virtual nodes making them much cheaper to render. -- **See also:** [Functional Components](/guide/render-function.html#Functional-Components) +- **另见:** [Functional Components](/guide/render-function.html#Functional-Components) -## Instance Properties +## 实例属性 ### vm.$data -- **Type:** `Object` +- **类型:** `Object` -- **Details:** +- **详细:** - The data object that the Vue instance is observing. The Vue instance proxies access to the properties on its data object. + Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。 -- **See also:** [Options - data](#data) +- **另见:** [选项 - data](#data) ### vm.$el -- **Type:** `HTMLElement` +- **类型:** `HTMLElement` -- **Read only** +- **只读** -- **Details:** +- **详细:** - The root DOM element that the Vue instance is managing. + Vue 实例使用的根 DOM 元素。 ### vm.$options -- **Type:** `Object` +- **类型:** `Object` -- **Read only** +- **只读** -- **Details:** +- **详细:** - The instantiation options used for the current Vue instance. This is useful when you want to include custom properties in the options: + 用于当前 Vue 实例的初始化选项。当选项中需要自定义属性时会有用处: ``` js new Vue({ @@ -876,47 +878,47 @@ type: api ### vm.$parent -- **Type:** `Vue instance` +- **类型:** `Vue instance` -- **Read only** +- **只读** -- **Details:** +- **详细:** - The parent instance, if the current instance has one. + 父实例,如果当前实例有的话。 ### vm.$root -- **Type:** `Vue instance` +- **类型:** `Vue instance` -- **Read only** +- **只读** -- **Details:** +- **详细:** - The root Vue instance of the current component tree. If the current instance has no parents this value will be itself. + 当前组件树的根 Vue 实例。如果当前实例没有父实例,属性值将会是其自身。 ### vm.$children -- **Type:** `Array` +- **类型:** `Array` -- **Read only** +- **只读** -- **Details:** +- **详细:** - The direct child components of the current instance. **Note there's no order guarantee for `$children`, and it is not reactive.** If you find yourself trying to use `$children` for data binding, consider using an Array and `v-for` to generate child components, and use the Array as the source of truth. + 当前实例的直接子组件。**需要注意 `$children` 并不保证顺序,也不是响应式的。**如果你发现自己正在尝试使用 `$children` 来进行数据绑定,考虑使用一个数组配合 `v-for` 来生成子组件,并且使用 Array 作为真正的来源。 ### vm.$slots -- **Type:** `Object` +- **类型:** `Object` -- **Read only** +- **只读** -- **Details:** +- **详细:** - Used to access content [distributed by slots](/guide/components.html#Content-Distribution-with-Slots). Each [named slot](/guide/components.html#Named-Slots) has its own corresponding property (e.g. the contents of `slot="foo"` will be found at `vm.$slots.foo`). The `default` property contains any nodes not included in a named slot. + 用来访问被 [slot 分发](/guide/components.html#Content-Distribution-with-Slots)的内容。每个[具名 slot](/guide/components.html#Named-Slots) 有其响应的属性(例如:`slot="foo"` 中的内容将会在 `vm.$slots.foo` 中被找到)。`default` 属性包括了所有没有被包含在一个具名 slot 中的节点。 - Accessing `vm.$slots` is most useful when writing a component with a [render function](/guide/render-function.html). + 在使用 [render 函数](/guide/render-function.html)书写一个组件时,访问 `vm.$slots` 最有帮助。 -- **Example:** +- **示例:** ```html @@ -949,36 +951,36 @@ type: api }) ``` -- **See also:** - - [`` Component](#slot) - - [Content Distribution with Slots](/guide/components.html#Content-Distribution-with-Slots) - - [Render Functions](/guide/render-function.html) +- **另见:** + - [`` 组件](#slot) + - [使用 Slots 进行内容分发](/guide/components.html#Content-Distribution-with-Slots) + - [Render 函数](/guide/render-function.html) ### vm.$refs -- **Type:** `Object` +- **类型:** `Object` -- **Read only** +- **只读** -- **Details:** +- **详细:** - An object that holds child components that have `ref` registered. + 一个对象,其中包含了所有拥有 `ref` 注册的子组件。 -- **See also:** - - [Child Component Refs](/guide/components.html#Child-Component-Refs) +- **另见:** + - [子组件引用](/guide/components.html#Child-Component-Refs) - [ref](#ref) ### vm.$isServer -- **Type:** `boolean` +- **类型:** `boolean` -- **Read only** +- **只读** -- **Details:** +- **详细:** - Whether the current Vue instance is running on the server. + 当前 Vue 实例是否运行于服务器。 -- **See also:** [Server-Side Rendering](/guide/ssr.html) +- **另见:** [服务端渲染](/guide/ssr.html) ## Instance Methods / Data @@ -1081,19 +1083,19 @@ type: api - **See also:** [Vue.delete](#Vue-delete) -## Instance Methods / Events +## 实例方法/事件

vm.$on( event, callback )

-- **Arguments:** +- **参数:** - `{string} event` - `{Function} callback` -- **Usage:** +- **用法:** - Listen for a custom event on the current vm. Events can be triggered by `vm.$emit`. The callback will receive all the additional arguments passed into these event-triggering methods. + 监听当前实例上的自定义事件。事件可以由vm.$emit触发。传入这些方法的附加参数都会传入这个方法的回调。 -- **Example:** +- **示例:** ``` js vm.$on('test', function (msg) { @@ -1105,94 +1107,94 @@ type: api

vm.$once( event, callback )

-- **Arguments:** +- **参数:** - `{string} event` - `{Function} callback` -- **Usage:** +- **用法:** - Listen for a custom event, but only once. The listener will be removed once it triggers for the first time. + 监听一个自定义事件,但是只触发一次,在第一次触发之后删除监听器。

vm.$off( [event, callback] )

-- **Arguments:** +- **参数:** - `{string} [event]` - `{Function} [callback]` -- **Usage:** +- **用法:** - Remove event listener(s). + 删除事件监听器。 - - If no arguments are provided, remove all event listeners; + - 如果没有参数,则删除所有的事件监听器; - - If only the event is provided, remove all listeners for that event; + - 如果只提供了事件,则删除这个事件所有的监听器; - - If both event and callback are given, remove the listener for that specific callback only. + - 如果同时提供了事件与回调,则只删除这个回调。

vm.$emit( event, [...args] )

-- **Arguments:** +- **参数:** - `{string} event` - `[...args]` - Trigger an event on the current instance. Any additional arguments will be passed into the listener's callback function. + 触发当前实例上的事件。附加参数都会传给监听器回调。 -## Instance Methods / Lifecycle +## 实例方法 / 生命周期

vm.$mount( [elementOrSelector] )

-- **Arguments:** +- **参数:** - `{Element | string} [elementOrSelector]` - `{boolean} [hydrating]` -- **Returns:** `vm` - the instance itself +- **返回值:** `vm` - 实例自身 -- **Usage:** +- **用法:** - If a Vue instance didn't receive the `el` option at instantiation, it will be in "unmounted" state, without an associated DOM element. `vm.$mount()` can be used to manually start the mounting of an unmounted Vue instance. + 如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素或片断。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。 - If `elementOrSelector` argument is not provided, the template will be rendered as an off-document element, and you will have to use native DOM API to insert it into the document yourself. + 如果没有"elementOrSelector"参数,模板将被渲染为文档之外的的元素,并且你必须使用原生DOM API把它插入文档中。 - The method returns the instance itself so you can chain other instance methods after it. + 这个方法返回实例自身,因而可以链式调用其它实例方法。 -- **Example:** +- **示例:** ``` js var MyComponent = Vue.extend({ template: '
Hello!
' }) - // create and mount to #app (will replace #app) + // 创建并挂载到 #app (会替换 #app) new MyComponent().$mount('#app') - // the above is the same as: + // 同上 new MyComponent({ el: '#app' }) - // or, render off-document and append afterwards: + // 或者,在文档之外渲染并且随后挂载 var component = new MyComponent().$mount() document.getElementById('app').appendChild(vm.$el) ``` -- **See also:** - - [Lifecycle Diagram](/guide/instance.html#Lifecycle-Diagram) - - [Server-Side Rendering](/guide/ssr.html) +- **另见:** + - [生命周期图示](/guide/instance.html#Lifecycle-Diagram) + - [服务端渲染](/guide/ssr.html)

vm.$forceUpdate()

-- **Usage:** +- **示例:** - Force the Vue instance to re-render. Note it does not affect all child components, only the instance itself and child components with inserted slot content. + 迫使Vue实例重修渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

vm.$nextTick( callback )

-- **Arguments:** +- **参数:** - `{Function} callback` -- **Usage:** +- **用法:** - Defer the callback to be executed after the next DOM update cycle. Use it immediately after you've changed some data to wait for the DOM update. This is the same as the global `Vue.nextTick`, except that the callback's `this` context is automatically bound to the instance calling this method. + 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。 -- **Example:** +- **示例:** ``` js new Vue({ @@ -1200,12 +1202,12 @@ type: api methods: { // ... example: function () { - // modify data + // 修改数据 this.message = 'changed' - // DOM is not updated yet + // DOM 还没有更新 this.$nextTick(function () { - // DOM is now updated - // `this` is bound to the current instance + // DOM 现在更新了 + // `this` 绑定到当前实例 this.doSomethingElse() }) } @@ -1213,21 +1215,21 @@ type: api }) ``` -- **See also:** +- **另见:** - [Vue.nextTick](#Vue-nextTick) - - [Async Update Queue](/guide/reactivity.html#Async-Update-Queue) + - [异步更新队列](/guide/reactivity.html#Async-Update-Queue)

vm.$destroy()

-- **Usage:** +- **用法:** - Completely destroy a vm. Clean up its connections with other existing vms, unbind all its directives, turn off all event listeners. + 完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。 - Triggers the `beforeDestroy` and `destroyed` hooks. + 在"beforeDestroy"和"destroyed"之间触发。 -

In normal use cases you shouldn't have to call this method yourself. Prefer controlling the lifecycle of child components in a data-driven fashion using `v-if` and `v-for`.

+

在大多数场景中你不应该调用这个方法。最好使用"v-if"和"v-for"指令以数据驱动的方式控制子组件的生命周期。

-- **See also:** [Lifecycle Diagram](/guide/instance.html#Lifecycle-Diagram) +- **另见:** [生命周期图示](/guide/instance.html#Lifecycle-Diagram) ## Directives @@ -1564,17 +1566,17 @@ type: api - [Data Binding Syntax - interpolations](/guide/syntax.html#Text) - [Components - Cheap Static Components with v-once](/guide/components.html#Cheap-Static-Components-with-v-once) -## Special Attributes +## 特殊元素 ### key - **Expects:** `string` - The `key` special attribute is primarily used as a hint for Vue's virtual DOM algorithm to identify VNodes when diffing the new list of nodes against the old list. Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible. With keys, it will reorder elements based on the order change of keys, and elements with keys that are no longer present will always be removed/destroyed. + `key` 的特殊属性主要用在 Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。 - Children of the same common parent must have **unique keys**. Duplicate keys will cause render errors. + 相同公共父元素的子元素必须有**独特的key**。重复的key会造成渲染错误。 - The most common use case is combined with `v-for`: + 最常见的用例是结合 `v-for`: ``` html
    @@ -1582,12 +1584,12 @@ type: api
``` - It can also be used to force replacement of an element/component instead of reusing it. This can be useful when you want to: + 它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用: - - Properly trigger lifecycle hooks of a component - - Trigger transitions + - 正确的触发组件的生命周期hooks + - 触发转换 - For example: + 例如: ``` html @@ -1595,13 +1597,13 @@ type: api ``` - When `text` changes, the `` will always be replaced instead of patched, so a transition will be triggered. + 当 `text` 发生改变时,`` 会随时被更新,因此会触发过度。 ### ref - **Expects:** `string` - `ref` is used to register a reference to an element or a child component. The reference will be registered under the parent component's `$refs` object. If used on a plain DOM element, the reference will be that element; if used on a child component, the reference will be component instance: + `ref` 被用来给元素或子组件注册引用信息。引用信息会根据父组件的 `$refs` 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例: ``` html @@ -1611,9 +1613,9 @@ type: api ``` - When used on elements/components with `v-for`, the registered reference will be an Array containing DOM nodes or component instances. + 当 `v-for` 用于元素或组件的时候,引用信息将是包含DOM节点或组件实例数组。 - An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you cannot access them on the initial render - they don't exist yet! `$refs` is also non-reactive, therefore you should not attempt to use it in templates for data-binding. + 关于ref注册时间的重要说明: 因为ref本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!`$refs` 也不能使用,因此你不应该试图用它在模版中做数据绑定。 - **See also:** [Child Component Refs](/guide/components.html#Child-Component-Refs) @@ -1621,9 +1623,9 @@ type: api - **Expects:** `string` - Used on content inserted into child components to indicate which named slot the content belongs to. + 用于标记往哪个slot中插入子组件内容。 - For detailed usage, see the guide section linked below. + 详细用法,请参考下面指南部分的链接。 - **See also:** [Named Slots](/guide/components.html#Named-Slots) @@ -1788,10 +1790,10 @@ type: api - **See also:** [Content Distribution with Slots](/guide/components.html#Content-Distribution-with-Slots) -## VNode Interface +## VNode接口 -- Please refer to the [VNode class declaration](https://github.com/vuejs/vue/blob/dev/src/core/vdom/vnode.js). +- 请参考[VNode class declaration](https://github.com/vuejs/vue/blob/dev/src/core/vdom/vnode.js). -## Server-Side Rendering +## 服务端渲染 -- Please refer to the [vue-server-renderer package documentation](https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer). +- 请参考[vue-server-renderer package documentation](https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer). diff --git a/src/changelog/index.md b/src/changelog/index.md index 7fe12edebd..791d202ae2 100644 --- a/src/changelog/index.md +++ b/src/changelog/index.md @@ -6,6 +6,10 @@ order: 0 [更新日志](https://github.com/vuejs/vue/releases) +## [v2.0.1](https://github.com/vuejs/vue/releases/tag/v2.0.1) + +![image](https://cloud.githubusercontent.com/assets/12537013/19139459/6de9ff46-8bb7-11e6-82ee-e3e0f2eab71d.png) + ## [v2.0.0-rc.8](https://github.com/vuejs/vue/releases/tag/v2.0.0-rc.8) diff --git a/src/guide/class-and-style.md b/src/guide/class-and-style.md index f57655df47..fe601fe482 100644 --- a/src/guide/class-and-style.md +++ b/src/guide/class-and-style.md @@ -4,21 +4,23 @@ type: guide order: 6 --- -A common need for data binding is manipulating an element's class list and its inline styles. Since they are both attributes, we can use `v-bind` to handle them: we just need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue provides special enhancements when `v-bind` is used with `class` and `style`. In addition to strings, the expressions can also evaluate to objects or arrays. +数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute,我们可以用` v-bind` 处理它们:只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在 `v-bind `用于` class `和 `style `时,Vue.js 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。 -## Binding HTML Classes -### Object Syntax +## 绑定 HTML Class -We can pass an object to `v-bind:class` to dynamically toggle classes: +### 对象语法 + +我们可以传给 `v-bind:class` 一个对象,以动态地切换 class。 ``` html
``` +上面的语法表示class`active`的更新将取决于数据属性`isActive`是否为[truthiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) 。 -The above syntax means the presence of the `active` class will be determined by the [truthiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) of the data property `isActive`. +我们可以传给 v-bind:class 一个对象,以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存 -You can have multiple classes toggled by having more fields in the object. In addition, the `v-bind:class` directive can also co-exist with the plain `class` attribute. So given the following template: +我们也可以在对象中传入多个属性用来动态切换多个class.注意 `v-bind:class` 指令可以与普通的 class 特性共存.如下模板: ``` html
``` -And the following data: +如下 data: ``` js data: { @@ -35,15 +37,15 @@ data: { } ``` -It will render: +渲染为: ``` html
``` -When `isActive` or `hasError` changes, the class list will be updated accordingly. For example, if `hasError` becomes `true`, the class list will become `"static active text-danger"`. +当 `isActive` 或者 `hasError` 变化时, class列表将相应地更新。例如,如果 `hasError` 的值为 `true`, class列表将变为 `"static active text-danger"`. -The bound object doesn't have to be inline: +你也可以直接绑定数据里的一个对象: ``` html
@@ -56,8 +58,8 @@ data: { } } ``` +渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的[计算属性](computed.html)。这是一个常用且强大的模式: -This will render the same result. We can also bind to a [computed property](computed.html) that returns an object. This is a common and powerful pattern: ``` html
@@ -77,9 +79,9 @@ computed: { } ``` -### Array Syntax +### 数组语法 -We can pass an array to `v-bind:class` to apply a list of classes: +我们可以把一个数组传给 `v-bind:class`,以应用一个 class 列表: ``` html
@@ -91,31 +93,31 @@ data: { } ``` -Which will render: +渲染为: ``` html
``` -If you would like to also toggle a class in the list conditionally, you can do it with a ternary expression: +如果你也想根据条件切换列表中的 class,可以用三元表达式: ``` html
``` +此例始终添加 `errorClass`,但是只有在 `isActive` 是 true 时添加`activeClass` 。 -This will always apply `errorClass`, but will only apply `activeClass` when `isActive` is `true`. - -However, this can be a bit verbose if you have multiple conditional classes. That's why it's also possible to use the object syntax inside array syntax: +不过,当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法: ``` html
``` -## Binding Inline Styles +## 绑定内联样式 + +### 对象语法 -### Object Syntax +`v-bind:style` 的对象语法十分直观——看着非常像 CSS,其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case): -The object syntax for `v-bind:style` is pretty straightforward - it looks almost like CSS, except it's a JavaScript object. You can use either camelCase or kebab-case for the CSS property names: ``` html
@@ -127,7 +129,7 @@ data: { } ``` -It is often a good idea to bind to a style object directly so that the template is cleaner: +直接绑定到一个样式对象通常更好,让模板更清晰: ``` html
@@ -139,18 +141,25 @@ data: { fontSize: '13px' } } -``` -Again, the object syntax is often used in conjunction with computed properties that return objects. +``` +同样的,对象语法常常结合返回对象的计算属性使用。 -### Array Syntax +### 数组语法 -The array syntax for `v-bind:style` allows you to apply multiple style objects to the same element: +`v-bind:style` 的数组语法可以将多个样式对象应用到一个元素上: ``` html
``` -### Auto-prefixing +### 自动添加前缀 + +当`v-bind:style`使用需要厂商前缀的 CSS 属性时,如 `transform`,Vue.js 会自动侦测并添加相应的前缀。 + +*** + +> 原文:http://vuejs.org/guide/class-and-style.html + +*** -When you use a CSS property that requires vendor prefixes in `v-bind:style`, for example `transform`, Vue will automatically detect and add appropriate prefixes to the applied styles. diff --git a/src/guide/comparison.md b/src/guide/comparison.md index d3ed0569aa..647deea725 100644 --- a/src/guide/comparison.md +++ b/src/guide/comparison.md @@ -3,45 +3,45 @@ title: 对比其他框架 type: guide order: 26 --- +这个页面无疑是最难编写的,但也是非常重要的。或许你遇到了一些问题并且先前用其他的框架解决了。来这里的目的是看看Vue是否有更好的解决方案。那么你就来对了。 -This is definitely the most difficult page in the guide to write, but we do feel it's important. Odds are, you've had problems you tried to solve and you've used another library to solve them. You're here because you want to know if Vue can solve your specific problems better. That's what we hope to answer for you. +客观来说,作为核心团队成员,显然我们会更偏爱Vue,对于某些问题用Vue来解决会更好,如果没有这点信念,我们也就不会整天为此忙活了。但是,我们想尽可能地公平和准确地来讲述。其他的框架也有显著的优点,比如 Rect 的生态系统,或者 Knockout 对浏览器支持到 IE6 。我们把这些也都会全列出来。 -We also try very hard to avoid bias. As the core team, we obviously like Vue a lot. There are some problems we think it solves better than anything else out there. If we didn't believe that, we wouldn't be working on it. We do want to be fair and accurate though. Where other libraries offer significant advantages, such as React's vast ecosystem of alternative renderers or Knockout's browser support back to IE6, we try to list these as well. - -We'd also like **your** help keeping this document up-to-date because the JavaScript world moves fast! If you notice an inaccuracy or something that doesn't seem quite right, please let us know by [opening an issue](https://github.com/vuejs/vuejs.org/issues/new?title=Inaccuracy+in+comparisons+guide). +我们希望得到**你们**的帮助,来使文档保持更新,因为 JavaScript 的世界进步的太快。如果你注意到一个不准确或似乎不太正确的地方,请[提交问题][1]让我们知道。 ## React -React and Vue share many similarities. They both: +React 和 Vue 有许多相似之处,它们都有: -- utilize a virtual DOM -- provide reactive and composable view components -- maintain focus in the core library, with concerns such as routing and global state management handled by companion libraries +- 使用 Virtual DOM +- 提供了响应式(Reactive)和组件化(Composable)的视图组件。 +- 保持注意力集中在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库。 -Being so similar in scope, we've put more time into fine-tuning this comparison than any other. We want to ensure not only technical accuracy, but also balance. We point out where React outshines Vue, for example in the richness of their ecosystem and abundance of their custom renderers. +相似的作用域,我们会用更多的时间来讲这一块的比较。不仅我们要保持技术的准确性,同时兼顾平衡。我们指出React比Vue更好的地方,例如,他们的生态系统和丰富的自定义渲染器。 -The React community [has been instrumental](https://github.com/vuejs/vuejs.org/issues/364) in helping us achieve this balance, with special thanks to Dan Abramov from the React team. He was extremely generous with his time and considerable expertise to help us refine this document until we were [both happy](https://github.com/vuejs/vuejs.org/issues/364#issuecomment-244575740) with the final result. +React社区[在这里][2]非常积极地帮助我们实现这一平衡,特别感谢来自 React 团队的 Dan Abramov 。他非常慷慨的花费时间来贡献专业知识,来帮我们完善这个文件,直到我们都[满意][3]。 -With that said, we hope you can feel confident in the fairness of the review below as we explore the differences between these two libraries. +这么说,就是希望你能对这两个库的比较的公平性感到放心。 -### Performance Profiles +### 性能简介 -In every real-world scenario that we've tested so far, Vue outperforms React by a fair margin. If your eyebrows are raising right now, read further. We'll breakdown why (and even include a benchmark developed in collaboration with the React team). +到目前为止,在现实的测试中,Vue 是优于 React 的(通常至少快20%-50%,尽管在某些情况下还要更快)。我们可以提供一个到这个参照项目的链接,但是坦率的说,所有的参照在某些方面是有缺陷的,很少有像你所写的一个真实应用。相反,让我们详细了解下。 -#### Render Performance +#### 渲染性能 -When rendering UI, manipulating the DOM is typically the most expensive operation and unfortunately, no library can make those raw operations faster. The best we can do is: +在渲染用户界面的时候,DOM的操作是最昂贵,不幸的是没有库可以让这些原始操作变得更快。 +我们能做的最好的就是: -1. Minimize the number of necessary DOM mutations. Both React and Vue use virtual DOM abstractions to accomplish this and both implementations work about equally well. -2. Add as little overhead as possible on top of those DOM manipulations. This is an area where Vue and React differ. +1. 尽量减少的DOM操作。Vue 和 React 都使用虚拟DOM来实现,并且两者工作一样好。 +2. 尽量减少除DOM操作以外的其他操作。这是 Vue 和 React的一个不同的地方。 -In React, let's say the additional overhead of rendering an element is 1 and the overhead of an average component is 2. In Vue, the overhead of an element would be more like 0.1, but the overhead of an average component would be 4, due to the setup required for our reactivity system. +在React中,渲染一个元素的额外开销是1,而平均渲染一个组件的开销是2。在Vue中,一个元素的开销更像0.1,但是平均组件的开销将是4由于安装所需要的反应系统的设置。 -This means that in typical applications, where there are many more elements than components being rendered, Vue will outperform React by a significant margin. In extreme cases however, such as using 1 normal component to render each element, Vue will usually be slower. This isn't the end of the story though. +这意味着,在典型的应用中,需要渲染的元素比组件的数量是更多的,因为Vue的性能表现将会远优于React。然而,在极端情况下,比如每个组件渲染一个元素,Vue 将通常会较慢。显然这还没有说完。 -Both Vue and React also offer functional components, which are stateless and instanceless - and therefore, require less overhead. When these are used in performance-critical situations, Vue is once again faster. To demonstrate this, we built a simple [benchmark project](https://github.com/chrisvfritz/vue-render-performance-comparisons) that just renders 10,000 list items 100 times. We encourage you to try it yourself, as the results will vary depending on the hardware and browser used - and actually, they'll vary even between runs due to the nature of JavaScript engines. +Vue 和 React 也提供提供功能性组件,这些组件都是没有声明,没有实例化,因此需要更少的开销。当这些都用于性能的关键位置,Vue会更快。为了证明这点,我们建立一个简单的[参照项目][4],它只是渲染 10,000 个列表项 100次。我们鼓励你自己去试一下,实际上,由于浏览器和硬件的原因,结果会有所不同,由于 JavaScript 引擎的不同,结果也会有很大不同。 -If you're feeling lazy though, below are the numbers from one run in Chrome 52 on a 2014 MacBook Air. To avoid cherry-picking, both benchmarks were actually run 20 separate times, with results from the best runs included below: +如果你懒得去做,下面的数字数字从一个运行在 Chrome 52 在一个 2014年产的 MacBook Air上。为了避免偶然性,每个参照项目都分开运行20次,和包含的最好的结果: {% raw %} @@ -83,247 +83,257 @@ If you're feeling lazy though, below are the numbers from one run in Chrome 52 o
{% endraw %} -#### Update Performance +#### 更新性能 -In React, you need to implement `shouldComponentUpdate` everywhere and use immutable data structures to achieve fully optimized re-renders. In Vue, a component's dependencies are automatically tracked so that it only updates when one of those dependencies change. The only further optimization that sometimes can be helpful in Vue is adding a `key` attribute to items in long lists. +在React中,你需要在每个地方去实现 `shouldComponentUpdate` ,并且用immutable数据结构才能实现完全完全优化的 re-renders 。在 Vue 中,组件的依赖被自动追踪,所以当这些依赖项变动时,它才会更新。在长列表中,有时候需要进一步优化的话,只需要在每项上添加 `key` 属性。 -This means updates in unoptimized Vue will be much faster than unoptimized React and actually, due to the improved render performance in Vue, even fully-optimized React will usually be slower than Vue is out-of-the-box. +这意味着,由于Vue内改进过的渲染性能,更新未经优化的Vue回避未经优化的React要快的多。甚至全面优化过的React通常也会慢于未加处理的Vue。 -#### In Development +#### 开发中 -Obviously, performance in production is the most important and that's what we've been discussing so far. Performance in development still matters though. The good news is that both Vue and React remain fast enough in development for most normal applications. +显然,在生产中的性能是最重要的,并且也是到目前为止我们所讨论的。开发过程中的表现也是很重要的。好消息是用 Vue 和 React 开发大多数应用的速度都是足够快的。 -However, if you're prototyping any high-performance data visualizations or animations, you may find it useful to know that in scenarios where Vue can't handle more than 10 frames per second in development, we've seen React slow down to about 1 frame per second. +然而,加入你要开发一个对性能要求比较高的数据可视化或者动画的应用时,这将会很有用。在开发中, Vue 每秒最高处理10帧,而 React 每秒最高处理不到1帧。 -This is due to React's many heavy invariant checks, which help it to provide many excellent warnings and error messages. We agree that these are important in Vue, but have tried to keep a closer eye on performance while we implement these checks. +这是由于 React 有大量的检查机制,这能让它提供许多有用的警告和错误提示信息。我们同意那些很重要的,但在我们实现这些检查时候,也更加密切地关注着性能。 ### HTML & CSS -In React, everything is Just JavaScript, which sounds very simple and elegant - until you dig deeper. The unfortunate reality is that reinventing HTML and CSS within JavaScript can cause a lot of pain. In Vue, we instead embrace web technologies and build on top of them. To show you what that means, we'll dive into some examples. +在React中,所有的都是 JavaScript,听起来十分简单和优雅。不幸的事实是,JavaScript 内的 HTML 和 CSS 会引起很多痛苦。在 Vue 中我们采用的 Web 技术并在其上面扩展。接下来将通过一些实例向你展示这所意味的是什么。 #### JSX vs Templates -In React, all components express their UI within render functions using JSX, a declarative XML-like syntax that works within Javascript. Here's an example, [vetted by the React community](https://github.com/vuejs/vuejs.org/issues/364#issuecomment-244582684): +在 React 中,所有的组件的渲染功能使用的都是JSX。JSX 是使用 XML 语法编写 Javascript 的一种语法糖。这有一个[通过React社区审核过的][5]例子: ``` jsx -render () { - let { items } = this.props - - let children - if (items.length > 0) { - children = ( -
    - {items.map(item => -
  • {item.name}
  • - )} -
- ) - } else { - children =

No items found.

- } - - return ( -
- {children} -
- ) -} + render () { + let { items } = this.props + + let children + if ( items.length > 0 ) { + children = ( +
    + {items.map( item => +
  • {item.name}
  • + )} +
+ ) + } else { + children =

No items found.

+ } + + return ( +
+ {children} +
+ ) + } ``` -Render functions with JSX have a few advantages: +JSX的渲染功能有一些优势: -- You can use the power of a full programming language (JavaScript) to build your view. -- The tooling support (e.g. linting, type checking, editor autocompletion) for JSX is in some ways more advanced than what's currently available for Vue templates. +- 你可以使用的完整的编程语言JavaScript来构建你的视图页面。 +- 工具对JSX的支持相比于现有可用的其他Vue模板还是比较先进的(比如,linting、类型检查、编辑器的自动完成)。 -In Vue, we also have [render functions](render-function.html) and even [support JSX](render-function.html#JSX), because sometimes you need that power. Render functions are not recommended for most components however. +在 Vue 中,由于有时需要用那些功能,我们也提供了[渲染功能][6] 并且[ 支持JSX ][7]。然而,对于大多数组件来说,渲染功能是不推荐使用了。 -Instead, we offer templates as a simpler alternative: +在这方面,我们提供的是个更简单的模板: ``` html - + ``` -A few advantages here: +有点如下: -- Many fewer implementation and stylistic decisions have to be made while writing a template -- A template will always be declarative -- Any valid HTML is valid in a template -- It reads more like English (e.g. for each item in items) -- Advanced versions of JavaScript are not required to increase readability +- 在写模板的过程中,样式风格已定和涉及更少的功能实现。 +- 一个模板总是被声明的。 +- 模板中任何 HTML 都是有效的。 +- 阅读起来更像英语(比如,for each item in items)。 +- 高级版本的 JavaScript 不需要增加可读性。 -This is not only much easier for the developer that's writing it, but designers and less experienced developers will also find it much easier parsing and contributing code. +这样,不仅开发人员更容易编写代码,设计人员和开发人员也可以更容易的分析代码和贡献代码。 -It doesn't end there though. By embracing HTML rather than trying to reinvent it within JavaScript, Vue also allows you to use preprocessors such as Pug (formerly known as Jade) in your templates. +还没有结束。Vue拥抱HTML,而不是用JavaScript重塑它。在模板内,Vue也允许你用预处理器比如Pub(原名 Jade) 。 -The React ecosystem also has [a project](https://wix.github.io/react-templates/) that allows you to write templates, but there are a few disadvantages: +React 生态也有一个[项目][8]允许你写摸吧,但是有一些缺点: -- It's not nearly as feature-rich as Vue's templating system -- It requires separating your HTML from component files -- Because it's a 3rd party library rather than officially supported, it may or may not be kept up-to-date with React core into the future +- 功能远没有 Vue 模板系统的丰富。 +- 需要从组件文件中分离出HTML代码。 +- 这是个第三方库,而非官方支持,可能未来核心库更新就不再支持。 -#### Component-Scoped CSS +#### CSS的组件作用域 -Unless you spread components out over multiple files (for example with [CSS Modules](https://github.com/gajus/react-css-modules)), scoping CSS in React comes with caveats. Very basic CSS works great out-of-the-box, but some more complex features such as hover states, media queries, and pseudo-selectors all either require heavy dependencies to reinvent what CSS already does - or they simply don't work. +除非你把组件分布在多个文件上(例如 [CSS Modules][9]),要不作用域内的CSS就会暴警告。非常简单的CSS还可以工作,但是稍微复杂点的,比如悬停状态、媒体查询、伪类选择符要么会被修改要么就不能用。 -Vue on the other hand, gives you full access to CSS within [single-file components](single-file-components.html): +Vue让你可以完全访问[ 单文件组件 ][10]。 -``` html - +``` html + ``` -The optional `scoped` attribute automatically scopes this CSS to your component by adding a unique attribute (such as `data-v-1`) to elements and compiling `.list-container:hover` to something like `.list-container[data-v-1]:hover`. +这个可选 `scoped` 属性自动添加一个唯一的属性(比如 `data-v-1` )为组件内CSS指定作用范围,编译的时候 `.list-container:hover` 会被编译成类似`.list-container[data-v-1]:hover`。 -Finally, just as with HTML, you also have the option of writing your CSS using any preprocessors (or postprocessors) you'd like. This allows you to perform design-centric operations such as color manipulation during your build process, rather than importing specialized JavaScript libraries that would increase the size of your build and complexity of your application. +最后,你可以选择自己偏爱的CSS预处理器编写CSS。这可以让你围绕设计为中心展开工作,而不是引入库来增加你应用的容量和复杂度。 -### Scale +### 规模 -#### Scaling Up +#### 扩大 -For large applications, both Vue and React offer robust routing solutions. The React community has also been very innovative in terms of state management solutions (e.g. Flux/Redux). These state management patterns and [even Redux itself](https://github.com/egoist/revue) can be easily integrated into Vue applications. In fact, Vue has even taken this model a step further with [Vuex](https://github.com/vuejs/vuex), an Elm-inspired state management solution that integrates deeply into Vue that we think offers a superior development experience. +Vue和React都提供了强大的路由来应对对于大型应用。React社区在状态管理方面非常有创新精神(比如Flux、Redux),而这些状态管理模式甚至[ Redux本身 ][11]也是非常容易能够集成在Vue应用中的。实际上,Vue更进一步地采用了这种模式([Vuex][12]),把Vuex集成进Vue能带来更好的开发体验。 -Another important difference between these offerings is that Vue's companion libraries for state management and routing (among [other concerns](https://github.com/vuejs)) are all officially supported and kept up-to-date with the core library. React instead chooses to leave these concerns to the community, creating a more fragmented ecosystem. Being more popular though, React's ecosystem is considerably richer than Vue's. +两者另一个重要差异是,Vue伴随的路由库和状态管理库都是由官方支持维护且和核心库同步更新的。React 生态更成熟,选择是把这些问题交给社区维护。 -Finally, Vue offers a [CLI project generator](https://github.com/vuejs/vue-cli) that makes it trivially easy to start a new project using your choice of build system, including [Webpack](https://github.com/vuejs-templates/webpack), [Browserify](https://github.com/vuejs-templates/browserify), or even [no build system](https://github.com/vuejs-templates/simple). React is also making strides in this area with [create-react-app](https://github.com/facebookincubator/create-react-app), but it currently has a few limitations: +最后,Vue 提供了一个[Vue-cli 脚手架][13],能让你非常容易地构建项目,可以包含 [Webpack][14], [Browserify][15], 或者 [no build system][16]。React在这方面也提供了[create-react-app][17],但是现在还有一些局限性: -- It does not allow any configuration during project generation, while Vue's project templates allow Yeoman-like customization. -- It only offers a single template that assumes you're building a single-page application, while Vue offers a wide variety of templates for various purposes and build systems. -- It cannot generate projects from user-built templates, which can be especially useful for enterprise environments with pre-established conventions. +- 它不允许在项目生成时进行任何配置,而Vue运行Yeoman-like定制。 +- 它只提供一个构建单页面应用的单一模板,而Vue 提供各种用途的多种模板。 +- 它不能用用户自建的模板构建项目,而这对企业环境预先建立协议是很有用。 -It's important to note though that many of these limitations are intentional design decisions made by the create-react-app team and they do have their advantages. For example, as long your project's needs are very simple and you never need to "eject" to customize your build process, you'll be able to update it as a dependency. You can read more about the [differing philosophy here](https://github.com/facebookincubator/create-react-app#philosophy). +注意这些限制是故意设计的,这有它的优势。例如,如果你的项目需求非常简单,你就不需要自定义生成过程。你能把它作为一个依赖来更新。如果阅读更多关于[不同的设计理念]()。 -#### Scaling Down +#### 缩小 -React is renowned for its steep learning curve. Before you can really get started, you need to know about JSX and probably ES2015+, since many examples use React's class syntax. You also have to learn about build systems, because although you could technically use Babel Standalone to live-compile your code, it's not recommended for production. +React学习曲线陡峭,在你开始学 React 前,你需要知道 JSX 和 ES2015,因为许多示例用的是这些语法。你需要学习构建系统,虽然你可以在技术上可以用 Babel Standalone 来编译代码,但是不推荐用于生产。 -While Vue scales up just as well as, if not better than React, it also scales down just as well as jQuery. That's right - all you have to do is drop a single script tag into a page: +Vue样扩大后就像React,缩小后就像 Jquery。你需要做的就是把如下标签放到页面就行: -``` html - -``` -Then you can start writing Vue code and even ship the minified version to production without feeling guilty or having to worry about performance problems. +`` + + +然后就可编写Vue代码并应用到生产中,而不用担心性能问题。 + +由于起步阶段不需学JSX,ES2015 或构建系统,所以建立应用花的时间会更少。 -Since you don't need to know about JSX, ES2015, or build systems to get started with Vue, it also typically takes developers less than a day reading [the guide](/guide) to learn enough to build non-trivial applications. +### 本地渲染 -### Native Rendering -ReactNative enables you to write native-rendered apps for iOS and Android using the same React component model. This is great in that as a developer, you can apply your knowledge of a framework across multiple platforms. On this front, Vue has an official collaboration with [Weex](https://alibaba.github.io/weex/), a cross-platform UI framework developed by Alibaba Group, which uses Vue as its JavaScript framework runtime. This means with Weex, you can use the same Vue component syntax to author components that can not only be rendered in the Browser, but also natively on iOS and Android! +ReactNative能使你用相同的组件模型编写有本地渲染能力的APP(IOS或Android)。能同时跨多平台开发,对开发者是非常棒的。相应地,Vue和Weex会进行官方合作,Weex是阿里的跨平台用户界面开发框架,Weex 的 JavaScript 框架运行时用的就是Vue。这以为着不仅在浏览器,在 IOS 和 Android 上面也可以用 Vue 来进行开发。 -At this moment, Weex is still in active development and is not as mature and battle-tested as ReactNative, but its development is driven by the production needs by the largest e-commmerce business in the world, and the Vue team will also actively collaborate with the Weex team to ensure a smooth experience for Vue developers. +在现在,Weex 还在积极发展,成熟度也不能和 ReactNative 相抗衡。但是,Weex的发展是由世界上最大的电子商务企业的需求在驱动,Vue 团队也会和 Weex 团队积极合作确保为开发者带来良好的开发体验。 -### With MobX +### MobX -MobX has become quite popular in the React community and it actually uses a nearly identical reactivity system to Vue. To a limited extent, the React + MobX workflow can be thought of as a more verbose Vue, so if you're using that combination and are enjoying it, jumping into Vue is probably the next logical step. +Mobx 在 React 社区很流行,实际上在Vue也采用了几乎相同的反应系统。在有限程度上,React + Mobx 也可以被认为是更繁琐的 Vue,所以如果你习惯组合使用它们,那么选择 Vue 会更合理。 ## Angular 1 -Some of Vue's syntax will look very similar to Angular (e.g. `v-if` vs `ng-if`). This is because there were a lot of things that Angular got right and these were an inspiration for Vue very early in its development. There are also many pains that come with Angular however, where Vue has attempted to offer a significant improvement. +Due的一些语法和Angular的很相似(例如 `v-if` vs `ng-if`)。因为Angular是Vue早期开发的灵感来源。然而,Augular中存在许多问题,在Vue中已经得到解决。 -### Complexity +### 复杂性 -Vue is much simpler than Angular 1, both in terms of API and design. Learning enough to build non-trivial applications typically takes less than a day, which is not true for Angular 1. +在 API 与设计两方面上 Vue.js 都比 Angular 1 简单得多,因此你可以快速地掌握它的全部特性并投入开发。 -### Flexibility and Modularity +### 灵活性和模块化 -Angular 1 has strong opinions about how your applications should be structured, while Vue is a more flexible, modular solution. While this makes Vue more adaptable to a wide variety of projects, we also recognize that sometimes it's useful to have some decisions made for you, so that you can just get started coding. +Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序,而不是在任何时候都必须遵循 Angular 1 制定的规则,这使让Vue能适用于各种项目。我们知道把决定权交给你,是非常必要的,就是是为什么提供[Webpack template][19],让你用几分钟,去选择是否用高级特性,比如热模块加载、linting 、 + Css extraction 等等。 -That's why we offer a [Webpack template](https://github.com/vuejs-templates/webpack) that can set you up within minutes, while also granting you access to advanced features such as hot module reloading, linting, CSS extraction, and much more. +### 数据绑定 -### Data binding +Angular 1 使用双向绑定,Vue在不同组件间强制适用单向数据流。这使应用中的数据流清晰易懂。 -Angular 1 uses two-way binding between scopes, while Vue enforces a one-way data flow between components. This makes the flow of data easier to reason about in non-trivial applications. +### 指令与组件 -### Directives vs Components +在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作,而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。在 Angular 中两者有不少相混的地方。 -Vue has a clearer separation between directives and components. Directives are meant to encapsulate DOM manipulations only, while components are self-contained units that have their own view and data logic. In Angular, there's a lot of confusion between the two. +### 性能 -### Performance +Vue.js 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。 -Vue has better performance and is much, much easier to optimize because it doesn't use dirty checking. Angular 1 becomes slow when there are a lot of watchers, because every time anything in the scope changes, all these watchers need to be re-evaluated again. Also, the digest cycle may have to run multiple times to "stabilize" if some watcher triggers another update. Angular users often have to resort to esoteric techniques to get around the digest cycle, and in some situations, there's simply no way to optimize a scope with many watchers. +在Angular 1中,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。 Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。 -Vue doesn't suffer from this at all because it uses a transparent dependency-tracking observation system with async queueing - all changes trigger independently unless they have explicit dependency relationships. +Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。 -Interestingly, there are quite a few similarities in how Angular 2 and Vue are addressing these Angular 1 issues. +有意思的是,Angular 2 和 Vue 用相似的设计解决了一些 Angular 1 中存在的问题。 ## Angular 2 -We have a separate section for Angular 2 because it really is a completely new framework. For example, it features a first-class component system, many implementation details have been completely rewritten, and the API has also changed quite drastically. +Augluar 2完全是一个全新的框架。例如,它具有优秀的组件系统,并且许多实现已经完全重写,API也完全改变了。 ### TypeScript -While Angular 1 could be used for smaller applications, Angular 2 has shifted focus to best facilitate large enterprise applications. As part of this, it almost requires TypeScript, which can be very useful for developers that desire the type safety of languages such as Java and C#. +Angular 1面向的较小的应用程序,Angular 2已转移焦点,面向的是大型企业应用。TypeScript被引用,这对那些喜欢用Java或者C#等类型安全的语言的人是非常有用的。 -Vue is also well-suited to [enterprise environments](https://github.com/vuejs/awesome-vue#enterprise-usage) and can even be used with TypeScript via our [official typings](https://github.com/vuejs/vue/tree/dev/types) and [user-contributed decorators](https://github.com/itsFrank/vue-typescript), though it's definitely optional in our case. +Vue也适合[企业应用][20],也可以使用TypeScript来支持[官方类型][21]和[用户贡献的类型][22],尽管这是可选的。 -### Size and Performance +### 尺寸和性能 -In terms of performance, both frameworks are exceptionally fast and there isn't enough data from real world use cases to make a verdict. However if you are determined to see some numbers, Vue 2.0 seems to be ahead of Angular 2 according to this [3rd party benchmark](http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html). +在性能方面,这两个框架都是非常快。但是如果你查看[第三方参照](),就可以得出 Vue 2 比 Angular2 要快的。 -Size wise, although Angular 2 with offline compilation and tree-shaking is able to get its size down considerably, a full-featured Vue 2.0 with compiler included (23kb) is still lighter than a tree-shaken bare-bone example of Angular 2 (50kb). And do note the Angular 2 app's size is small due to tree-shaking, which removes code for features that you are not using. It will eventually grow back to its actual size as you import and use more features from the framework. +在尺寸方面,虽然 Angular 2 使用 tree-shaking 技术和编译技术能使代码尺寸减小。 -### Flexibility +即便包含编译器和全部功能 Vue2(23kb)比起 Angular 2(50kb)还是小的多。但是要注意,用 Angular 的 App 的尺寸缩减是用 tree-shaking 移除了那些框架中没有用到的功能,当随着引入功能的增多,尺寸会越来越大。 -Vue is much less opinionated than Angular 2, offering official support for a variety of build systems, with no restrictions on how you structure your application. Many developers enjoy this freedom, while some prefer having only one Right Way to build any application. +### 灵活性 -### Learning Curve +Vue 官方提供了构建工具,但没限制你如何构建。有人喜欢用统一的方式构建,也有很多开发者喜欢这种灵活自由的方式。 -To get started with Vue, all you need is familiarity with HTML and ES5 JavaScript (i.e. plain JavaScript). With these basic skills, you can start building non-trivial applications within less than a day of reading [the guide](/guide). +### 学习曲线 -Angular 2's learning curve is much steeper. Even without TypeScript, their [Quickstart guide](https://angular.io/docs/js/latest/quickstart.html) starts out with an app that uses ES2015 JavaScript, NPM with 18 dependencies, 4 files, and over 3,000 words to explain it all - just to say Hello World. It's an understatement to say that [Vue's Hello World](index.html#Hello-World) is considerably simpler. It's so trivial in fact, that we don't even dedicate a whole page in the guide to it. +开始使用Vue,你使用的是熟悉的HTML、符合ES5规则的JavaScript(也就是纯JavaScript)。有了这些基本的技能,你可以快速地掌握它([指南][24])并投入开发 。 -## Ember +Angular 2 的学习曲线是非常陡峭的。即使不包括TypeScript,它们[开始指南][25]中所用的就有ES2015标准的JavaScript,18个NPM依赖包,4个文件和超过3千多字介绍,这一切都是为了完成个Hello World。而[Vue's Hello World][26]就非常简单。 -Ember is a full-featured framework that is designed to be highly opinionated. It provides a lot of established conventions and once you are familiar enough with them, it can make you very productive. However, it also means the learning curve is high and flexibility suffers. It's a trade-off when you try to pick between an opinionated framework and a library with a loosely coupled set of tools that work together. The latter gives you more freedom but also requires you to make more architectural decisions. +## Ember -That said, it would probably make a better comparison between Vue core and Ember's [templating](https://guides.emberjs.com/v2.7.0/templates/handlebars-basics/) and [object model](https://guides.emberjs.com/v2.7.0/object-model/) layers: +Ember 是一个全能框架。它提供大量的约定,一旦你熟悉了它们,开发会很高效。不过,这也意味着学习曲线较高,而且不灵活。在框架和库(加上一系列松散耦合的工具)之间权衡选择。后者更自由,但是也要求你做更多的架构决定。 -- Vue provides unobtrusive reactivity on plain JavaScript objects and fully automatic computed properties. In Ember, you need to wrap everything in Ember Objects and manually declare dependencies for computed properties. +也就是说,最好比较 Vue.js 内核和 Ember 的模板与数据模型层: +* Vue 在普通 JavaScript 对象上建立响应,提供自动化的计算属性。在 Ember 中需要将所有东西放在 Ember 对象内,并且手工为计算属性声明依赖。 -- Vue's template syntax harnesses the full power of JavaScript expressions, while Handlebars' expression and helper syntax is intentionally quite limited in comparison. +* Vue 的模板语法可以用全功能的 JavaScript 表达式,而 Handlebars 的语法和帮助函数语法相比之下非常受限。 -- Performance-wise, Vue outperforms Ember by a fair margin, even after the latest Glimmer engine update in Ember 2.0. Vue automatically batches updates, while in Ember you need to manually manage run loops in performance-critical situations. +* 在性能上,Vue 甩开 Ember 几条街,即使是 Ember2.0 的最新Glimmer引擎。Vue自动批量更新,Ember 当性能关键处需要手动管理。 ## Knockout -Knockout was a pioneer in the MVVM and dependency tracking spaces and its reactivity system is very similar to Vue's. Its [browser support](http://knockoutjs.com/documentation/browser-support.html) is also very impressive considering everything it does, with support back to IE6! Vue on the other hand only supports IE9+. +Knockout 是MVVM领域内的先驱,并且追踪依赖。它的响应系统和Vue相似。它对[浏览器支持][27]以及所有的表现也是让人印象深刻的。它能最低支持到IE6,而Vue最低只能支持到IE9。 -Over time though, Knockout development has slowed and it's begun to show its age a little. For example, its component system lacks a full set of lifecycle hooks and although it's a very common use case, the interface for passing children to a component feels a little clunky compared to [Vue's](components.html#Content-Distribution-with-Slots). +随着时间的推移,Knockout的发展已有所放缓,并且略显有点老旧了。比如,它的组件系统缺少完备的生命周期事件方法,尽管这些在现在是非常常见。以及相比[Vue][28]调用子组件的接口显得有点笨重。 -There also seem to be philosophical differences in the API design which if you're curious, can be demonstrated by how each handles the creation of a [simple todo list](https://gist.github.com/chrisvfritz/9e5f2d6826af00fcbace7be8f6dccb89). It's definitely somewhat subjective, but many consider Vue's API to be less complex and better structured. +如果你有兴趣研究,会发现它们在接口设计的构思理念上是不同的。这些通过各自创建的 [ simple Todo List ][29]可以体现出来。或许有点主观,但是很多人认为Vue的API接口更简单结构更优雅。 ## Polymer -Polymer is yet another Google-sponsored project and in fact was a source of inspiration for Vue as well. Vue's components can be loosely compared to Polymer's custom elements and both provide a very similar development style. The biggest difference is that Polymer is built upon the latest Web Components features and requires non-trivial polyfills to work (with degraded performance) in browsers that don't support those features natively. In contrast, Vue works without any dependencies or polyfills down to IE9. +Polymer 是另一个由谷歌赞助的项目,事实上也是Vue的一个灵感来源。Vue的组件可以粗略的类比于Polymer的自定义元素,并且两者具有相似的开发风格。最大的不同之处在于,Polymer是构建于最新版的Web Components标准之上的,并且需要非凡的polyfills来工作(性能下降),浏览器本身不支持这些功能。相比而言,Vue不需要依赖polyfills来工作,最低到IE9。 + +在 Polymer 1.0版本中,为了弥补性能,团队非常有限的使用数据绑定系统。例如,在Ploymer中支持的唯一表达式只有布尔值否定和单一的方法的调用,它的computed方法的实现也不是很灵活。 -In Polymer 1.0, the team has also made its data-binding system very limited in order to compensate for the performance. For example, the only expressions supported in Polymer templates are boolean negation and single method calls. Its computed property implementation is also not very flexible. +Polymer 自定义的元素是用HTML文件来创建的,这回限制你的普通的JavaScript/CSS(和被现代浏览器普遍支持的语言特性)。相比之下,Vue的单文件允许你非常容易的使用ES2015和你想用的Css的预编译处理器。 -Polymer custom elements are authored in HTML files, which limits you to plain JavaScript/CSS (and language features supported by today's browsers). In comparison, Vue's single file components allows you to easily use ES2015+ and any CSS preprocessors you want. +当部署到生产环境的时候,Polymer建议使用HTML Imports加载所有资源。而这要求服务器和客户端都支持Http 2.0协议,且浏览器实现了标准。这是否可行就取决于你的目标用户和部署环境了。如果状况不佳,你必须用Vulcanizer工具来来打包Polymer元素。在这方面,Vue 可以结合异步组件的特性和Webpack的代码分割特性来实现懒加载(lazy-loaded)。这同时确保了对旧浏览器的兼容且又能更快加载。 -When deploying to production, Polymer recommends loading everything on-the-fly with HTML Imports, which assumes browsers implementing the spec, and HTTP/2 support on both server and client. This may or may not be feasible depending on your target audience and deployment environment. In cases where this is not desirable, you will have to use a special tool called Vulcanizer to bundle your Polymer elements. On this front, Vue can combine its async component feature with Webpack's code-splitting feature to easily split out parts of the application bundle to be lazy-loaded. This ensures compatibility with older browsers while retaining great app loading performance. - -It is also totally feasible to offer deeper integration between Vue with Web Component specs such as Custom Elements and Shadow DOM style encapsulation - however at this moment we are still waiting for the specs to mature and be widely implemented in all mainstream browsers before making any serious committments. +对Vue和Web Component标准之间进行深层次的整合,也是完全可行的,比如Custom Elements、Shadow DOM的样式封装。然而现在在我们做出严肃的承诺之前,我们仍在等待标准成熟,进而广泛应用于主流的浏览器中。 ## Riot -Riot 2.0 provides a similar component-based development model (which is called a "tag" in Riot), with a minimal and beautifully designed API. Riot and Vue probably share a lot in design philosophies. However, despite being a bit heavier than Riot, Vue does offer some significant advantages: +Riot 2.0 提供了一个类似于基于组件的开发模型(在Riot中称之为”Tag”),提供小巧精美的API。Riot 和 Vue 可能共享一些设计理念。即使相比Roit重一点,Vue还是有很多显著优势的: + +- 根据真实条件来渲染,Roit根据是否有分支简单显示或隐藏所有内容。 +- 功能更加强大的路由机制,Roit的路由功能的API是极少的。 +- 更多成熟工具的支持。Vue 提供官方支持[Webpack][30]、[Browserify][31]和[SystemJS][32],而 Roit 是依靠社区来建立集成系统。 +- [过渡效果系统][33]。Riot现在没有提供。 +- 更好的性能。Roit [尽管广告称][34]用虚拟DOM,实际上用的还是脏检查机制,因此和Angular 1患有相同的性能问题。 + + +*** + +> 原文:http://vuejs.org/guide/comparison.html -- True conditional rendering. Riot renders all if branches and simply shows/hides them. -- A far more powerful router. Riot’s routing API is extremely minimal. -- More mature tooling support. Vue provides official support for [Webpack](https://github.com/vuejs/vue-loader), [Browserify](https://github.com/vuejs/vueify), and [SystemJS](https://github.com/vuejs/systemjs-plugin-vue), while Riot relies on community support for build system integration. -- [Transition effect system](transitions.html). Riot has none. -- Better performance. [Despite advertising](https://github.com/vuejs/vuejs.org/issues/346) use of a virtual DOM, Riot in fact uses dirty checking and thus suffers from the same performance issues as Angular 1. +*** diff --git a/src/guide/components.md b/src/guide/components.md index 4a681da4c4..1b2f262ead 100644 --- a/src/guide/components.md +++ b/src/guide/components.md @@ -4,34 +4,34 @@ type: guide order: 11 --- -## What are Components? +## 什么是组件? -Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that Vue's compiler attaches behavior to. In some cases, they may also appear as a native HTML element extended with the special `is` attribute. +组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。 -## Using Components +## 使用组件 -### Registration +### 注册 -We've learned in the previous sections that we can create a new Vue instance with: +之前说过,我们可以通过以下方式创建一个Vue实例: ``` js new Vue({ el: '#some-element', - // options + // 选项 }) ``` -To register a global component, you can use `Vue.component(tagName, options)`. For example: +要注册一个全局组件,你可以使用 `Vue.component(tagName, options)`。 例如: ``` js Vue.component('my-component', { - // options + // 选项 }) ``` -

Note that Vue does not enforce the [W3C rules](http://www.w3.org/TR/custom-elements/#concepts) for custom tag names (all-lowercase, must contain a hyphen) though following this convention is considered good practice.

+

对于自定义标签名字,Vue.js 不强制要求遵循 W3C 规则(小写,并且包含一个短杠),尽管遵循这个规则比较好。

-Once registered, a component can be used in an instance's template as a custom element, ``. Make sure the component is registered **before** you instantiate the root Vue instance. Here's the full example: +组件在注册之后,便可以在父实例的模块中以自定义元素 `` 的形式使用。要确保在初始化根实例 **之前** 注册了组件: ``` html
@@ -40,18 +40,18 @@ Once registered, a component can be used in an instance's template as a custom e ``` ``` js -// register +// 注册 Vue.component('my-component', { template: '
A custom component!
' }) -// create a root instance +// 创建根实例 new Vue({ el: '#example' }) ``` -Which will render: +渲染为: ``` html
@@ -71,9 +71,9 @@ new Vue({ el: '#example' }) {% endraw %} -### Local Registration +### 局部注册 -You don't have to register every component globally. You can make a component available only in the scope of another instance/component by registering it with the `components` instance option: +不需要全局注册每个组件。可以让组件只能用在其它组件内,用实例选项 `components` 注册: ``` js var Child = { @@ -89,13 +89,13 @@ new Vue({ }) ``` -The same encapsulation applies for other registerable Vue features, such as directives. +这种封装也适用于其它可注册的功能,如指令。 -### DOM Template Parsing Caveats +### DOM模版解析说明 -When using the DOM as your template (e.g. using the `el` option to mount an element with existing content), you will be subject to some restrictions that are inherent to how HTML works, because Vue can only retrieve the template content **after** the browser has parsed and normalized it. Most notably, some elements such as `
    `, `
      `, `` and `
      ` , `
      @@ -103,7 +103,7 @@ This will lead to issues when using custom components with elements that have su
      ``` -The custom component `` will be hoisted out as invalid content, thus causing errors in the eventual rendered output. A workaround is to use the `is` special attribute: +自定义组件 `` 被认为是无效的内容, 因此在渲染的时候会导致错误. 变通的方案是使用特殊的 `is` 属性: ``` html @@ -111,17 +111,17 @@ The custom component `` will be hoisted out as invalid content, thus cau
      ``` -**It should be noted that these limitations do not apply if you are using string templates from one of the following sources**: +**需要注意的是这些限制不适用于在以下场景中使用字符串模版时** - ` {% endraw %} -Since all three component instances share the same `data` object, incrementing one counter increments them all! Ouch. Let's fix this by instead returning a fresh data object: +由于这三个组件共享了同一个 `data`, 因此增加一个counter会影响所有组件! 我们可以通过为每个组件返回新的data对象来解决这个问题: ``` js data: function () { @@ -190,7 +189,7 @@ data: function () { } ``` -Now all our counters each have their own internal state: +现在每个counter都有它自己内部的状态了: {% raw %}
      @@ -213,13 +212,13 @@ new Vue({ {% endraw %} -The `el` option also requires a function value when used in a component instance, for exactly the same reason. +同理,组件中的 `el` 选项也必须一个函数值。 -### Composing Components +### 组合组件 -Components are meant to be used together, most commonly in parent-child relationships: component A may use component B in its own template. They inevitably need to communicate to one another: the parent may need to pass data down to the child, and the child may need to inform the parent of something that happened in the child. However, it is also very important to keep the parent and the child as decoupled as possible via a clearly-defined interface. This ensures each component's code can be written and reasoned about in relative isolation, thus making them more maintainable and potentially easier to reuse. +组件意味着协同工作, 通常父子组件会是这样的关系: 组件A在它的模版中使用了组件B。它们之间必然需要相互通信: 父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件。然而, 在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性。 -In Vue.js, the parent-child component relationship can be summarized as **props down, events up**. The parent passes data down to the child via **props**, and the child sends messages to the parent via **events**. Let's see how they work next. +在Vue.js中,父子组件的关系可以总结为 **props down, events up** 。父组件通过 **props** 向下传递数据给子组件, 子组件通过 **events** 给父组件发送消息。看看它们是怎么工作的。

      props down, events up @@ -227,29 +226,29 @@ In Vue.js, the parent-child component relationship can be summarized as **props ## Props -### Passing Data with Props +### 使用Props传递数据 -Every component instance has its own **isolated scope**. This means you cannot (and should not) directly reference parent data in a child component's template. Data can be passed down to child components using **props**. +**组件实例的作用域是孤立的**。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。 -A prop is a custom attribute for passing information from parent components. A child component needs to explicitly declare the props it expects to receive using the [`props` option](/api/#props): +prop 是父组件用来传递消息的一个自定义属性。子组件需要显式地用 [`props` 选项](/api/#props) 声明 props: ``` js Vue.component('child', { - // declare the props + // 声明 props props: ['message'], - // just like data, the prop can be used inside templates + // 就像data一样, prop 也可以用在模板内 // and is also made available in the vm as this.message template: '{{ message }}' }) ``` -Then we can pass a plain string to it like so: +然后向它传入一个普通字符串: ``` html ``` -Result: +结果: {% raw %}

      @@ -270,7 +269,7 @@ new Vue({ ### camelCase vs. kebab-case -HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents: +HTML 特性不区分大小写。当使用非字符串模版时, 名字形式为 camelCase 的 prop 用作特性时,需要转为 kebab-case(短横线隔开): ``` js Vue.component('child', { @@ -285,11 +284,11 @@ Vue.component('child', { ``` -Again, if you're using string templates, then this limitation does not apply. +再次说明,如果你使用字符串模版,不用在意这些限制。 -### Dynamic Props +### 动态 Props -Similar to binding a normal attribute to an expression, we can also use `v-bind` for dynamically binding props to data on the parent. Whenever the data is updated in the parent, it will also flow down to the child: +类似于用 `v-bind` 绑定 HTML 特性到一个表达式,也可以用 `v-bind` 绑定动态 Props 到父组件的数据。每当父组件的数据变化时,也会传导给子组件: ``` html
      @@ -299,13 +298,13 @@ Similar to binding a normal attribute to an expression, we can also use `v-bind`
      ``` -It's often simpler to use the shorthand syntax for `v-bind`: +使用 `v-bind` 的缩写语法通常更简单: ``` html ``` -Result: +结果: {% raw %}
      @@ -329,74 +328,73 @@ new Vue({ {% endraw %} -### Literal vs Dynamic +### 字面量语法 vs 动态语法 -A common mistake beginners tend to make is attempting to pass down a number using the literal syntax: +初学者常犯的一个错误是使用字面量语法传递数值: ``` html - + ``` -However, since this is a literal prop, its value is passed down as a plain string `"1"` instead of an actual number. If we want to pass down an actual JavaScript number, we need to use `v-bind` so that its value is evaluated as a JavaScript expression: +因为它是一个字面 prop,它的值以字符串 `"1"` 而不是以实际的数字传下去。如果想传递一个实际的 JavaScript 数字,需要使用 `v-bind`,从而让它的值被当作 JavaScript 表达式计算: ``` html - + ``` -### One-Way Data Flow +### 单向数据流 -All props form a **one-way-down** binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent's state, which can make your app's data flow harder to reason about. +prop是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解. -In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should **not** attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console. +另外,每次父组件更新时,子组件的所有prop都会更新为最新值。这意味着你不应该在子组件内部改变prop。如果你这么做了,Vue会在控制台给出警告。 -There are usually two cases where it's tempting to mutate a prop: +通常有两种改变 prop 的情况: -1. The prop is used to only pass in an initial value, the child component simply wants to use it as a local data property afterwards; +1. prop 作为初始值传入, 子组件之后只是将它的初始值作为本地数据的初始值使用; -2. The prop is passed in as a raw value that needs to be transformed. +2. prop 作为需要被转变的原始值传入。 -The proper answer to these use cases are: +更确切的说这两种情况是: -1. Define a local data property that uses the prop's initial value as its initial value; +1. 定义一个本地数据,并且将 prop 的初始值设为本地数据的初始值。 -2. Define a computed property that is computed from the prop's value. +2. 定义一个基于 prop 值的计算属性。 -

      Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child **will** affect parent state.

      +

      注意在JavaScript中对象和数组是通过引用传递的,如果prop是一个对象或数组,在子组件内部改变它**会**影响父组件的状态。

      -### Prop Validation +### Prop 验证 -It is possible for a component to specify requirements for the props it is receiving. If a requirement is not met, Vue will emit warnings. This is especially useful when you are authoring a component that is intended to be used by others. +组件可以为 props 指定验证要求。如果未指定要求,Vue会发出警告。当组件给其他人使用时这很有用。 -Instead of defining the props as an array of strings, you can use an object with validation requirements: +prop 是一个对象而不是字符串数组时,它包含验证要求: ``` js Vue.component('example', { props: { - // basic type check (`null` means accept any type) + // 基础类型检测 (`null` 意思是任何类型都可以) propA: Number, - // multiple possible types + // 多种类型 propB: [String, Number], - // a required string + // 必须且是字符串 propC: { type: String, required: true }, - // a number with default value + // 数字,有默认值 propD: { type: Number, default: 100 }, - // object/array defaults should be returned from a - // factory function + // 数组/对象的默认值应当由一个工厂函数返回 propE: { type: Object, default: function () { return { message: 'hello' } } }, - // custom validator function + // 自定义验证函数 propF: { validator: function (value) { return value > 10 @@ -406,7 +404,7 @@ Vue.component('example', { }) ``` -The `type` can be one of the following native constructors: +`type` 可以是下面原生构造器: - String - Number @@ -415,24 +413,24 @@ The `type` can be one of the following native constructors: - Object - Array -In addition, `type` can also be a custom constructor function and the assertion will be made with an `instanceof` check. +`type` 也可以是一个自定义构造器,使用 `instanceof` 检测。 -When a prop validation fails, Vue will produce a console warning (if using the development build). +当 prop 验证失败了,Vue 将拒绝在子组件上设置此值,如果使用的是开发版本会抛出一条警告。 -## Custom Events +## 自定义事件 -We have learned that the parent can pass data down to the child using props, but how do we communicate back to the parent when something happens? This is where custom events come in. +父组件可以使用props给子组件传递数据, 那么反过来呢?该自定义事件出场了! -### Using `v-on` with Custom Events +### 使用 `v-on` 绑定自定义事件 -Every Vue instance implements the [Events interface](/api/#Instance-Methods-Events), which means it can: +每个Vue实例都实现了事件接口 [Events interface](/api/#Instance-Methods-Events),即: -- Listen to an event using `$on(eventName)` -- Trigger an event using `$emit(eventName)` +- 使用 `$on(eventName)` 监听事件 +- 使用 `$emit(eventName)` 触发事件 -In addition, a parent component can listen to the events emitted from a child component using `v-on` directly in the template where the child component is used. +另外,父组件可以在模版中监听子组件直接使用 `v-on` 发出的事件。 -Here's an example: +下面是一个例子: ``` html
      @@ -506,42 +504,42 @@ new Vue({ {% endraw %} -In this example, it's important to note that the child component is still completely decoupled from what happens outside of it. All it does is report information about its own activity, just in case a parent component might care. +在本例中,子组件仍然和它外部完全解耦合了。它所做的只是将父组件可能会关心的发生在它内部的事情告知给父组件了。 -#### Binding Native Events to Components +#### 给组件绑定原生事件 -There may be times when you want to listen for a native event on the root element of a component. In these cases, you can use the `.native` modifier for `v-on`. For example: +有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 `.native` 修饰 `v-on`。例如: ``` html ``` -### Form Input Components using Custom Events +### 使用自定义事件的表单输入组件 -This strategy can also be used to create custom form inputs that work with `v-model`. Remember: +也可以用 `v-model` 来创建自定义表单输入。记住: ``` html ``` -is just syntactic sugar for: +仅仅是一个语法糖: ``` html ``` -When used with a component, this simplifies to: +在组件中使用时, 它相当于下面的简写: ``` html ``` -So for a component to work with `v-model`, it must: +所以要让组件的 `v-model` 生效,它必须: -- accept a `value` prop -- emit an `input` event with the new value +- 接受一个 `value` 属性 +- 在有新的 value 时触发 `input` 事件 -Let's see it in action: +实战看看: ``` html
      @@ -619,7 +617,7 @@ new Vue({ {% endraw %} -This interface can be used not only to connect with form inputs inside a component, but also to easily integrate input types that you invent yourself. Imagine these possibilities: +这个接口不仅仅可以用来联系组件内部的表单输入,也很容易集成你自己写的输入类型。想象一下: ``` html @@ -627,29 +625,29 @@ This interface can be used not only to connect with form inputs inside a compone ``` -### Non Parent-Child Communication +### 非父子组件通信 -Sometimes two components may need to communicate with one-another but they are not parent/child to each other. In simple scenarios, you can use an empty Vue instance as a central event bus: +有时候非父子关系的组件也需要通信。在简单的场景下,使用一个空的Vue实例作为中央事件总线: ``` js var bus = new Vue() ``` ``` js -// in component A's method +// 组件A的方法 bus.$emit('id-selected', 1) ``` ``` js -// in component B's created hook +// 组件B创建的钩子 bus.$on('id-selected', function (id) { // ... }) ``` -In more complex cases, you should consider employing a dedicated [state-management pattern](/guide/state-management.html). +在更多复杂的情况下,你应该考虑使用专门的 [状态管理模式](/guide/state-management.html). -## Content Distribution with Slots +## 使用Slots分发内容 -When using components, it is often desired to compose them like this: +在使用组件时,常常要像这样组合它们: ``` html @@ -658,17 +656,17 @@ When using components, it is often desired to compose them like this: ``` -There are two things to note here: +注意两点: -1. The `` component does not know what content may be present inside its mount target. It is decided by whatever parent component that is using ``. +1. `` 组件不知道它的挂载点会有什么内容。挂载点的内容是由``的父组件决定的。 -2. The `` component very likely has its own template. +2. `` 组件很可能有它自己的模版。 -To make the composition work, we need a way to interweave the parent "content" and the component's own template. This is a process called **content distribution** (or "transclusion" if you are familiar with Angular). Vue.js implements a content distribution API that is modeled after the current [Web Components spec draft](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md), using the special `` element to serve as distribution outlets for the original content. +为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。这个处理称为 **内容分发** (或 "transclusion" 如果你熟悉 Angular)。Vue.js 实现了一个内容分发 API,参照了当前 [Web组件规范草稿](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md),使用特殊的 `` 元素作为原始内容的插槽。 -### Compilation Scope +### 编译作用域 -Before we dig into the API, let's first clarify which scope the contents are compiled in. Imagine a template like this: +在深入内容分发 API 之前,我们先明确内容的编译作用域。假定模板为: ``` html @@ -676,24 +674,24 @@ Before we dig into the API, let's first clarify which scope the contents are com ``` -Should the `message` be bound to the parent's data or the child data? The answer is the parent. A simple rule of thumb for component scope is: +`message` 应该绑定到父组件的数据,还是绑定到子组件的数据?答案是父组件。组件作用域简单地说是: -> Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope. +> 父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。 -A common mistake is trying to bind a directive to a child property/method in the parent template: +一个常见错误是试图在父组件模板内将一个指令绑定到子组件的属性/方法: ``` html - + ``` -Assuming `someChildProperty` is a property on the child component, the example above would not work. The parent's template is not aware of the state of a child component. +假定 `someChildProperty` 是子组件的属性,上例不会如预期那样工作。父组件模板不应该知道子组件的状态。 -If you need to bind child-scope directives on a component root node, you should do so in the child component's own template: +如果要绑定子组件内的指令到一个组件的根节点,应当在它的模板内这么做: ``` js Vue.component('child-component', { - // this does work, because we are in the right scope + // 有效,因为是在正确的作用域内 template: '
      Child
      ', data: function () { return { @@ -703,27 +701,26 @@ Vue.component('child-component', { }) ``` -Similarly, distributed content will be compiled in the parent scope. +类似地,分发内容是在父组件作用域内编译。 -### Single Slot +### 单个Slot -Parent content will be **discarded** unless the child component template contains at least one `` outlet. When there is only one slot with no attributes, the entire content fragment will be inserted at its position in the DOM, replacing the slot itself. +父组件的内容将被**抛弃**,除非子组件模板包含 ``。如果子组件模板只有一个没有特性的 slot,父组件的整个内容将插到 slot 所在的地方并替换它。 -Anything originally inside the `` tags is considered **fallback content**. Fallback content is compiled in the child scope and will only be displayed if the hosting element is empty and has no content to be inserted. +`` 标签的内容视为**回退内容**。回退内容在子组件的作用域内编译,当宿主元素为空并且没有内容供插入时显示这个回退内容。 -Suppose we have a component called `my-component` with the following template: +假定 `my-component` 组件有下面模板: ``` html

      I'm the child title

      - This will only be displayed if there is no content - to be distributed. + 如果没有分发内容则显示我。
      ``` -And a parent that uses the component: +父组件模版: ``` html
      @@ -735,7 +732,7 @@ And a parent that uses the component:
      ``` -The rendered result will be: +渲染结果: ``` html
      @@ -748,13 +745,13 @@ The rendered result will be:
      ``` -### Named Slots +### 具名Slots -`` elements have a special attribute, `name`, which can be used to further customize how content should be distributed. You can have multiple slots with different names. A named slot will match any element that has a corresponding `slot` attribute in the content fragment. +`` 元素可以用一个特殊特性, `name`,配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 `slot` 特性的元素。 -There can still be one unnamed slot, which is the **default slot** that serves as a catch-all outlet for any unmatched content. If there is no default slot, unmatched content will be discarded. +仍然可以有一个匿名 slot,它是**默认 slot** ,作为找不到匹配的内容片段的回退插槽。如果没有默认的 slot,这些找不到匹配的内容片段将被抛弃。 -For example, suppose we have an `app-layout` component with the following template: +例如,假定我们有一个 `app-layout` 组件,它的模板为: ``` html
      @@ -770,7 +767,7 @@ For example, suppose we have an `app-layout` component with the following templa
      ``` -Parent markup: +父组件模版: ``` html @@ -783,7 +780,7 @@ Parent markup: ``` -The rendered result will be: +渲染结果为: ``` html
      @@ -800,11 +797,11 @@ The rendered result will be:
      ``` -The content distribution API is a very useful mechanism when designing components that are meant to be composed together. +在组合组件时,内容分发 API 是非常有用的机制。 -## Dynamic Components +## 动态组件 -You can use the same mount point and dynamically switch between multiple components using the reserved `` element and dynamically bind to its `is` attribute: +多个组件可以使用同一个挂载点,然后动态地在它们之间切换。使用保留的 `` 元素,动态地绑定到它的 `is` 特性: ``` js var vm = new Vue({ @@ -822,11 +819,11 @@ var vm = new Vue({ ``` html - + ``` -If you prefer, you can also bind directly to component objects: +也可以直接绑定到组件对象上: ``` js var Home = { @@ -843,33 +840,33 @@ var vm = new Vue({ ### `keep-alive` -If you want to keep the switched-out components in memory so that you can preserve their state or avoid re-rendering, you can wrap a dynamic component in a `` element: +如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个 `keep-alive` 指令参数: ``` html - + ``` -Check out more details on `` in the [API reference](/api/#keep-alive). +在[API reference](/api/#keep-alive)查看更多 `` 的细节。 -## Misc +## 杂项 -### Authoring Reusable Components +### 编写可复用组件 -When authoring components, it's good to keep in mind whether you intend to reuse it somewhere else later. It's OK for one-off components to be tightly coupled, but reusable components should define a clean public interface and make no assumptions about the context it's used in. +在编写组件时,记住是否要复用组件有好处。一次性组件跟其它组件紧密耦合没关系,但是可复用组件应当定义一个清晰的公开接口。 -The API for a Vue component comes in three parts - props, events, and slots: +Vue 组件 API 来自三部分——props,events,和 slots: -- **Props** allow the external environment to pass data into the component +- **Props** 允许外部环境传递数据给组件 -- **Events** allow the component to trigger side effects in the external environment +- **Events** 允许组件触发外部环境的副作用 -- **Slots** allow the external environment to compose the component with extra content. +- **Slots** 允许外部环境将额外的内容组合在组件中。 -With the dedicated shorthand syntaxes for `v-bind` and `v-on`, the intents can be clearly and succinctly conveyed in the template: +使用 `v-bind` 和 `v-on` 的简写语法,模板的缩进清楚且简洁: ``` html ``` -### Child Component Refs +### 子组件索引 -Despite the existence of props and events, sometimes you might still need to directly access a child component in JavaScript. To achieve this you have to assign a reference ID to the child component using `ref`. For example: +尽管有 props 和 events,但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 `ref` 为子组件指定一个索引 ID。例如: ``` html
      @@ -895,17 +892,17 @@ Despite the existence of props and events, sometimes you might still need to dir ``` js var parent = new Vue({ el: '#parent' }) -// access child component instance +// 访问子组件 var child = parent.$refs.profile ``` -When `ref` is used together with `v-for`, the ref you get will be an array or an object containing the child components mirroring the data source. +当 `ref` 和 `v-for` 一起使用时,ref 是一个数组或对象,包含相应的子组件。 -

      `$refs` are only populated after the component has been rendered, and it is not reactive. It is only meant as an escape hatch for direct child manipulation - you should avoid using `$refs` in templates or computed properties.

      +

      `$refs` 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 `$refs` 。

      -### Async Components +### 异步组件 -In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's actually needed. To make that easier, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. Vue will only trigger the factory function when the component actually needs to be rendered and will cache the result for future re-renders. For example: +在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载。为了让事情更简单,Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。例如: ``` js Vue.component('async-example', function (resolve, reject) { @@ -917,18 +914,18 @@ Vue.component('async-example', function (resolve, reject) { }) ``` -The factory function receives a `resolve` callback, which should be called when you have retrieved your component definition from the server. You can also call `reject(reason)` to indicate the load has failed. The `setTimeout` here is simply for demonstration; How to retrieve the component is entirely up to you. One recommended approach is to use async components together with [Webpack's code-splitting feature](http://webpack.github.io/docs/code-splitting.html): +工厂函数接收一个 `resolve` 回调,在收到从服务器下载的组件定义时调用。也可以调用 `reject(reason)` 指示加载失败。这里 `setTimeout` 只是为了演示。怎么获取组件完全由你决定。推荐配合使用 :[Webpack 的代码分割功能](http://webpack.github.io/docs/code-splitting.html): ``` js Vue.component('async-webpack-example', function (resolve) { - // This special require syntax will instruct Webpack to - // automatically split your built code into bundles which - // are loaded over Ajax requests. + // 这个特殊的 require 语法告诉 webpack + // 自动将编译后的代码分割成不同的块, + // 这些块将通过 Ajax 请求自动下载。 require(['./my-async-component'], resolve) }) ``` -You can also return a `Promise` in the resolve function, so with Webpack 2 + ES2015 syntax you can do: +你可以使用 Webpack 2 + ES2015 的语法返回一个 `Promise` resolve 函数: ``` js Vue.component( @@ -937,62 +934,62 @@ Vue.component( ) ``` -

      If you're a Browserify user that would like to use async components, it's unfortunately not possible and probably never will be, as its creator has [made it clear](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) that async loading "is not something that Browserify will ever support." If this is a feature that's important to you, we recommend using Webpack instead.

      +

      如果你是Browserify用户,可能就无法使用异步组件了,它的作者已经[表明](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) Browserify是不支持异步加载的。如果这个功能对你很重要,请使用Webpack。

      -### Component Naming Conventions +### 组件命名约定 -When registering components (or props), you can use kebab-case, camelCase, or TitleCase. Vue doesn't care. +当定义组件时(或者props),可以使用kebab-case, camelCase, 或 TitleCase。Vue不关心这个。 ``` js -// in a component definition +// 在组件定义中 components: { - // register using camelCase + // 使用 camelCase 形式注册 'kebab-cased-component': { /* ... */ }, 'camelCasedComponent': { /* ... */ }, 'TitleCasedComponent': { /* ... */ } } ``` -Within HTML templates though, you have to use the kebab-case equivalents: +在HTML模版中,请使用 kebab-case形式: ``` html - + ``` -When using _string_ templates however, we're not bound by HTML's case-insensitive restrictions. That means even in the template, you reference your components and props using camelCase, PascalCase, or kebab-case: +当使用字符串模式时,可以不受HTML的case-insensitive限制。这意味即使是在模版中,引用、组件和prop可以使用 camelCase、PascalCase、或者 kebab-case: ``` html - + ``` -If your component isn't passed content via `slot` elements, you can even make it self-closing with a `/` after the name: +如果组件未经 `slot` 元素传递内容,你甚至可以在组件名后使用 `/` 使其自闭和: ``` html ``` -Again, this _only_ works within string templates, as self-closing custom elements are not valid HTML and your browser's native parser will not understand them. +当然,这只在字符串模版中有效。因为自闭和的自定义元素是无效的HTML,浏览器原生的解析器也无法识别它。 -### Recursive Component +### 递归组件 -Components can recursively invoke themselves in their own template. However, they can only do so with the `name` option: +组件在它的模板内可以递归地调用自己,不过,只有当它有 name 选项时才可以: ``` js name: 'stack-overflow', template: '
      ' ``` -A component like the above will result in a "max stack size exceeded" error, so make sure recursive invocation is conditional (i.e. uses a `v-if` that will eventually be false). When you register a component globally using `Vue.component`, the global ID is automatically set as the component's `name` option. +上面组件会导致一个错误 “max stack size exceeded”,所以要确保递归调用有终止条件 (也就是使用 `v-if` )。当使用 `Vue.component()` 全局注册一个组件时,组件 ID 自动设置为组件的 `name` 选项。 -### Inline Templates +### 内联模版 -When the `inline-template` special attribute is present on a child component, the component will use its inner content as its template, rather than treating it as distributed content. This allows more flexible template-authoring. +如果子组件有 inline-template 特性,组件将把它的内容当作它的模板,而不是把它当作分发内容。这让模板更灵活。 ``` html @@ -1001,11 +998,11 @@ When the `inline-template` special attribute is present on a child component, th ``` -However, `inline-template` makes the scope of your templates harder to reason about. As a best practice, prefer defining templates inside the component using the `template` option or in a `template` element in a `.vue` file. +但是 inline-template 让模板的作用域难以理解。最佳实践是使用 template 选项在组件内定义模板或者在`.vue`文件中使用`template`元素。 ### X-Templates -Another way to define templates is inside of a script element with the type `text/x-template`, then referencing the template by an id. For example: +另一种定义模版的方式是在javascript标签里使用 `text/x-template` 类型, 并且指定一个id。例如: ``` html {% endraw %} -We have already created our very first Vue app! This looks pretty similar to just rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now **reactive**. How do we know? Just open up your browser's JavaScript console and set `app.message` to a different value. You should see the rendered example above update accordingly. +我们已经生成了我们的第一个 Vue 应用!看起来这跟单单渲染一个字符串模板非常类似,但是 Vue.js 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起,所有的元素都是**响应式的**。我们如何知道?打开你的浏览器的控制台,并修改 `app.message`,你将看到上例相应地更新。 -In addition to text interpolation, we can also bind element attributes like this: +除了绑定插入的文本内容,我们还可以采用这样的方式绑定 DOM 元素属性: ``` html
      - - Hover your mouse over me for a few seconds to see my dynamically bound title! - + Inspect me
      ``` ``` js var app2 = new Vue({ el: '#app-2', data: { - message: 'You loaded this page on ' + new Date() + id: 'inspect-me' } }) ``` @@ -80,20 +80,19 @@ var app2 = new Vue({ {% endraw %} -Here we are encountering something new. The `v-bind` attribute you are seeing is called a **directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here it is basically saying "keep this element's `title` attribute up-to-date with the `message` property on the Vue instance." +这里我们遇到新东西。你看到的 `v-bind` 特性被称为**指令**。指令带有前缀 `v-`,以指示它们是 Vue.js 提供的特殊特性。并且如你所想象的,它们会对绑定的目标元素添加响应式的特殊行为。这个指令的简单含义是说:将该元素的 id 属性绑定到 Vue 实例的 id 属性上。 -If you open up your JavaScript console again and enter `app2.message = 'some new message'`, you'll once again see that the bound HTML - in this case the `title` attribute - has been updated. +用浏览器的开发者工具去监测以上元素 - 你会发现 这个元素的 id 为 `inspect-me`。是的,如果你在控制台里更改 `app2.id`,那么该元素的 id 也会随之更新。 -## Conditionals and Loops +## 条件与循环 -It's quite simple to toggle the presence of an element, too: +控制切换一个元素的显示也相当简单: ``` html

      Now you see me

      ``` - ``` js var app3 = new Vue({ el: '#app-3', @@ -102,7 +101,6 @@ var app3 = new Vue({ } }) ``` - {% raw %}
      Now you see me @@ -117,11 +115,11 @@ var app3 = new Vue({ {% endraw %} -Go ahead and enter `app3.seen = false` in the console. You should see the message disappear. +继续在控制台设置 `app3.seen = false`,你会发现 “Now you see me” 消失了。 -This example demonstrates that we can bind data to not only text and attributes, but also the **structure** of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply [transition effects](transitions.html) when elements are inserted/updated/removed by Vue. +这个例子演示了我们不仅可以绑定 DOM 文本到数据,也可以绑定 DOM **结构** 到数据。而且,Vue.js 也提供一个强大的过渡效果系统,可以在 Vue 插入/删除元素时自动应用[过渡效果](transitions.html)。 -There are quite a few other directives, each with its own special functionality. For example, the `v-for` directive can be used for displaying a list of items using the data from an Array: +也有一些其它指令,每个都有特殊的功能。例如, `v-for` 指令可以绑定数据到数据来渲染一个列表: ``` html
      @@ -166,11 +164,11 @@ var app4 = new Vue({ {% endraw %} -In the console, enter `app4.todos.push({ text: 'New item' })`. You should see a new item appended to the list. +在控制台里,输入 `app4.todos.push({ text: 'New item' })`。你会发现列表中多了一栏新内容。 -## Handling User Input +## 处理用户输入 -To let users interact with your app, we can use the `v-on` directive to attach event listeners that invoke methods on our Vue instances: +为了让用户和你的应用进行互动,我们可以用 `v-on` 指令绑定一个监听事件用于调用我们 Vue 实例中定义的方法: ``` html
      @@ -211,9 +209,9 @@ var app5 = new Vue({ {% endraw %} -Note in the method we simply update the state of our app without touching the DOM - all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic. +在 `reverseMessage` 方法中,我们在没有接触 DOM 的情况下更新了应用的状态 - 所有的 DOM 操作都由 Vue 来处理,你写的代码只需要关注基本逻辑。 -Vue also provides the `v-model` directive that makes two-way binding between form input and app state a breeze: +Vue 也提供了 `v-model` 指令,它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。 ``` html
      @@ -244,67 +242,51 @@ var app6 = new Vue({ {% endraw %} -## Composing with Components +## 用组件构建(应用) -The component system is another important concept in Vue, because it's an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components: +组件系统是 Vue.js 另一个重要概念,因为它提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点,几乎任意类型的应用的界面都可以抽象为一个组件树: ![Component Tree](/images/components.png) -In Vue, a component is essentially a Vue instance with pre-defined options. Registering a component in Vue is straightforward: +在 Vue 里,一个组件实质上是一个拥有预定义选项的一个 Vue 实例: ``` js -// Define a new component called todo-item -Vue.component('todo-item', { +Vue.component('todo', { template: '
    1. This is a todo
    2. ' }) ``` -Now you can compose it in another component's template: +现在你可以另一个组件模板中写入它: ``` html
        - - +
      ``` -But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components. Let's modify the component definition to make it accept a [prop](/guide/components.html#Props): +但是这样会为每个 todo 渲染同样的文本,这看起来并不是很酷。我们应该将数据从父作用域传到子组件。让我们来修改一下组件的定义,使得它能够接受一个 [`prop`](/guide/components.html#Props) 字段: ``` js -Vue.component('todo-item', { - // The todo-item component now accepts a - // "prop", which is like a custom attribute. - // This prop is called todo. +Vue.component('todo', { props: ['todo'], template: '
    3. {{ todo.text }}
    4. ' }) ``` -Now we can pass the todo into each repeated component using `v-bind`: +现在,我们可以使用 `v-bind` 指令将 todo 传到每一个重复的组件中: ``` html
        - - +
      -``` +``` ``` js var app7 = new Vue({ el: '#app-7', data: { - todos: [ - { text: 'Learn JavaScript' }, - { text: 'Learn Vue' }, - { text: 'Build something awesome' } - ] + todos: [/* ... */] } }) ``` @@ -332,9 +314,9 @@ var app7 = new Vue({ {% endraw %} -This is just a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our `` component with more complex template and logic without affecting the parent app. +这只是一个人为的例子,但是我们已经将我们的应用分割成了两小的单元,子元素通过 `props` 接口实现了与父亲元素很好的解耦。我们现在可以在不影响到父亲应用的基础上,进一步为我们的 `todo` 组件改进更多复杂的模板和逻辑。 -In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components [later in the guide](/guide/components.html), but here's an (imaginary) example of what an app's template might look like with components: +在一个大型应用中,为了使得开发过程可控,有必要将应用整体分割成一个个的组件。在[后面的教程](/guide/components.html)中我们将详述组件,不过这里有一个(假想)的例子,看看使用了组件的应用模板是什么样的: ``` html
      @@ -346,14 +328,20 @@ In a large application, it is necessary to divide the whole app into components
      ``` -### Relation to Custom Elements +## 与自定义元素的关系 + +你可能已经注意到 Vue.js 组件非常类似于**自定义元素**——它是 [Web 组件规范](//www.w3.org/wiki/WebComponents/)的一部分。实际上 Vue.js 的组件语法参考了该规范。例如 Vue 组件实现了 [Slot API](//github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) 与 `is` 特性。但是,有几个关键的不同: + +1. Web 组件规范仍然远未完成,并且没有浏览器实现。相比之下,Vue.js 组件不需要任何补丁,并且在所有支持的浏览器(IE9 及更高版本)之下表现一致。必要时,Vue.js 组件也可以放在原生自定义元素之内。 + +2. Vue.js 组件提供了原生自定义元素所不具备的一些重要功能,比如组件间的数据流,自定义事件系统,以及动态的、带特效的组件替换。 -You may have noticed that Vue components are very similar to **Custom Elements**, which are part of the [Web Components Spec](http://www.w3.org/wiki/WebComponents/). That's because Vue's component syntax is loosely modeled after the spec. For example, Vue components implement the [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) and the `is` special attribute. However, there are a few key differences: +## 准备好探索更广阔的世界了? -1. The Web Components Spec is still in draft status, and is not natively implemented in every browser. In comparison, Vue components don't require any polyfills and work consistently in all supported browsers (IE9 and above). When needed, Vue components can also be wrapped inside a native custom element. +我们刚才简单介绍了 Vue.js 核心的一些最基本的特征 - 本指南的其余部分将用更详尽的篇幅去描述其他的一些高级特性,所以一定要阅读完所有的内容哦! -2. Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and build tool integrations. +*** -## Ready for More? +> 原文:http://vuejs.org/guide/index.html -We've just briefly introduced the most basic features of Vue.js core - the rest of this guide will cover them and other advanced features with much finer details, so make sure to read through it all! +*** diff --git a/src/guide/installation.md b/src/guide/installation.md index 3b9778abf0..1f8b9acdd9 100644 --- a/src/guide/installation.md +++ b/src/guide/installation.md @@ -23,35 +23,35 @@ Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实

      开发环境不要用最小压缩版,不然就失去了错误提示和警告!

      -开发版本包含完整的警告和调试模式 +开发版本包含完整的警告和调试模式 -生产版本删除了警告,{{gz_size}}kb min+gzip +生产版本删除了警告,{{gz_size}}kb min+gzip
      ### CDN -Recommended: [unpkg](https://unpkg.com/vue/dist/vue.js), which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at [unpkg.com/vue/](https://unpkg.com/vue/). +推荐: [unpkg](https://unpkg.com/vue/dist/vue.js),会保持和 npm 发布的最新的版本一致。 可以在 [unpkg.com/vue/](https://unpkg.com/vue/) 浏览 npm 包资源。 -Also available on [jsdelivr](//cdn.jsdelivr.net/vue/{{vue_version}}/vue.js) or [cdnjs](//cdnjs.cloudflare.com/ajax/libs/vue/{{vue_version}}/vue.js), but these two services take some time to sync so the latest release may not be available yet. +也可以从 [jsdelivr](//cdn.jsdelivr.net/vue/{{vue_version}}/vue.js) 或 [cdnjs](//cdnjs.cloudflare.com/ajax/libs/vue/{{vue_version}}/vue.js) 获取,不过这两个服务版本更新可能略滞后。 ## NPM -在用 Vue.js 构建大型应用时推荐使用 NPM 安装,NPM 能很好地和诸如 [Webpack](http://webpack.github.io/) 或 [Browserify](http://browserify.org/) 模块打包器配合使用。Vue.js 也提供配套工具来开发[单文件组件](single-file-components.html)。 +在用 Vue.js 构建大型应用时推荐使用 NPM 安装,NPM 能很好地和诸如 [Webpack](https://webpack.github.io/) 或 [Browserify](http://browserify.org/) 模块打包器配合使用。Vue.js 也提供配套工具来开发[单文件组件](single-file-components.html)。 ``` bash # 最新稳定版 $ npm install vue ``` -### Standalone vs. Runtime-only Build +### 独立构建 vs 运行时构建 -There are two builds available, the standalone build and the runtime-only build. +有两种构建方式,独立构建和运行构建。 -- The standalone build includes the compiler and supports the `template` option. **It also relies on the presence of browser APIs so you cannot use it for server-side rendering.** +- 独立构建包括编译和支持 `template` 选项。 **它也依赖于浏览器的接口的存在,所以你不能使用它来为服务器端渲染。** -- The runtime-only build does not include the template compiler, and does not support the `template` option. You can only use the `render` option when using the runtime-only build, but it works with single-file components, because single-file components' templates are pre-compiled into `render` functions during the build step. The runtime-only build is roughly 30% lighter-weight than the standalone build, weighing only 16kb min+gzip. +- 运行时构建不包括模板编译, 不支持 `template` 选项。运行时构建,可以用 `render` 选项,不过得再单文件组件中起作用, 因为单文件组件的模板 是在构建时预编译到 `render` 函数中, 运行时构建只有独立构建大小的30%,只有16Kb min+gzip大小。 -By default, the NPM package exports the **runtime-only** build. To use the standalone build, add the following alias to your webpack config: +默认 NPM 包导出的是 **运行时** 构建。 为了使用独立构建, 在 webpack 配置中添加下面的别名: ``` js resolve: { @@ -61,15 +61,16 @@ resolve: { } ``` -对于Browserify,可以用 [aliasify](https://github.com/benbria/aliasify) +对于Browserify,可以用 [aliasify](https://github.com/benbria/aliasify) -

      Do NOT do `import Vue from 'vue/dist/vue.js'` - since some tools or 3rd party libraries may import vue as well, this may cause the app to load both the runtime and standalone builds at the same time and lead to errors.

      +

      不要用 `import Vue from 'vue/dist/vue.js'` - 由于一些工具或第三方库引入 Vue ,这可能会导致应用程序运行时加载和独立构建导致错误

      -### CSP environments +### CSP 环境 -Some environments, such as Google Chrome Apps, enforce Content Security Policy (CSP), which prohibits the use of `new Function()` for evaluating expressions. The standalone build depends on this feature to compile templates, so is unusable in these environments. +有些环境,如 Google Chrome Apps,强制应用内容安全策略 (CSP) ,不能使用 new Function() 对表达式求值。这时可以用 CSP 兼容版本。独立的构建取决于该功能编译模板,所以无法使用这些环境。 -On the other hand, the runtime-only build is fully CSP-compliant. When using the runtime-only build with [Webpack + vue-loader](https://github.com/vuejs-templates/webpack-simple) or [Browserify + vueify](https://github.com/vuejs-templates/browserify-simple), your templates will be precompiled into `render` functions which work perfectly in CSP environments. + +另一方面,运行时构建的是完成兼容CSP的。当通过 [Webpack + vue-loader](https://github.com/vuejs-templates/webpack-simple) 或者 [Browserify + vueify](https://github.com/vuejs-templates/browserify-simple) 构建时, 在 CSP 环境中模板将被完美预编译到 `render` 函数中。 ## 命令行工具 @@ -79,7 +80,7 @@ Vue.js 提供一个[官方命令行工具](https://github.com/vuejs/vue-cli), # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 "webpack" 模板的新项目 -# !!要做的:这个模板还不存在 +# !!要做的:这个模板还不存在 (目前 vue init webpack my-project) $ vue init webpack-2.0 my-project # 安装依赖,走你 $ cd my-project @@ -89,7 +90,7 @@ $ npm run dev ## 开发版本 -**Important**: the built files in GitHub's `/dist` folder are only checked-in during releases. To use Vue from the latest source code on GitHub, you will have to build it yourself! +**重要:** 在发布后构建的文件在Github仓库的 `/dist` 文件夹。 为了使用 Github 上 Vue 最新的资源,你得自己构建。 ``` bash git clone https://github.com/vuejs/vue.git node_modules/vue @@ -111,6 +112,6 @@ $ bower install vue *** -> 原文:http://rc.vuejs.org/guide/installation.html +> 原文:http://vuejs.org/guide/installation.html *** diff --git a/src/guide/instance.md b/src/guide/instance.md index 12d869d5d4..4b75de2095 100644 --- a/src/guide/instance.md +++ b/src/guide/instance.md @@ -32,10 +32,6 @@ var myComponentInstance = new MyComponent() 尽管可以命令式地创建扩展实例,不过在多数情况下将组件构造器注册为一个自定义元素,然后声明式地用在模板中。我们将在后面详细说明[组件系统](/components.md)。现在你只需知道所有的 Vue.js 组件其实都是被扩展的 Vue 实例。 -## Properties and Methods - -Each Vue instance **proxies** all the properties found in its `data` object: - ## 属性与方法 每个 Vue 实例都会**代理**其 `data` 对象里所有的属性: @@ -77,10 +73,9 @@ vm.$watch('a', function (newVal, oldVal) { }) ``` +

      注意, 不要在实例属性或者回调函数中(如 `vm.$watch('a', newVal => this.myMethod())`)使用箭头函数。原因是箭头函数绑定父上下文,所以 `this` 不会像预想的一样是 Vue 实例, 而是 `this.myMethod` 未被定义。

      -

      Note that __you should not use arrow functions on an instance property or callback__ (e.g. `vm.$watch('a', newVal => this.myMethod())`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.myMethod` will be undefined.

      - -Consult the [API reference](/api) for the full list of instance properties and methods. +实例属性和方法的完整列表中查阅 [API 参考](/api)。 ## 实例生命周期 @@ -112,7 +107,7 @@ var vm = new Vue({ *** -> 原文: http://rc.vuejs.org/guide/instance.html +> 原文: http://vuejs.org/guide/instance.html *** diff --git a/src/guide/join.md b/src/guide/join.md index 522cf06243..18f0b1839b 100644 --- a/src/guide/join.md +++ b/src/guide/join.md @@ -4,48 +4,55 @@ type: guide order: 27 --- -Vue's community is growing incredibly fast and if you're reading this, there's a good chance you're ready to join it. So... welcome! +Vue.js 的社区正在急速增长,如果你正在阅读本文,这是你已经准备好加入 Vue.js 社区的大好机会。所以...欢迎! -Now we'll answer both what the community can do for and what you can do for the community. +现在我们来解答社区能为你做什么以及你能为社区做什么。 -## Resources You'll Enjoy +## 你会热爱的资源 -### Get Support +### 获取帮助 -- [Forum](http://forum.vuejs.org/): THE best place to ask questions and get answers about Vue and its ecosystem. -- [Gitter Channel](https://gitter.im/vuejs/vue): A place for devs to meet and chat. You can ask questions here too, but the forum is the better platform, since the discussions are threaded. -- [Github](https://github.com/vuejs): If you have a bug to report or feature to request, that's what the GitHub issues are for. We also welcome pull requests! +- [论坛](http://forum.vuejs.org/):询问与 Vue 及其生态的相关问题的最佳地点。 +- [Gitter 频道](https://gitter.im/vuejs/vue):开发者聊天室。你也可以在这儿提问,但论坛更适合提问,因为论坛提供板块。 +- [Github](https://github.com/vuejs):如果你想报告 bugs 或者提供新的特性,那正是 Github issues 的功能。我们也非常欢迎 pull requests! -### Explore the Ecosystem +### 探索生态 -- [The Awesome Vue Page](https://github.com/vuejs/awesome-vue): See what other awesome resources have been published by other awesome people. -- [The "Show and Tell" Subforum](http://forum.vuejs.org/category/15/show-tell): Another great place to check out what others have built with and for the growing Vue ecosystem. +- [Awesome Vue](https://github.com/vuejs/awesome-vue):一览其他牛人发布的优秀资源。 +- ["Show and Tell" 子论坛](http://forum.vuejs.org/c/show-and-tell):又一个好地方,可以欣赏他人借助不断壮大的 Vue 生态构建的事物,以及他人为不断壮大的 Vue 生态贡献的力量。 -## What You Can Do -### Contribute Code +## 你力所能及的 -As with any project, there are rules to contributing. To ensure that we can help you or accept your pull request as quickly as possible, please read [the contributing guide](https://github.com/vuejs/vue/blob/dev/CONTRIBUTING.md). +### 贡献代码 -After that, you'll be ready to contribute to Vue's core repositories: +就像所有的项目一样,贡献代码是有规则的。为了保证我们能尽快地帮助你或者接受你的 pull requests,请阅读这份[贡献指南](https://github.com/vuejs/vue/blob/dev/CONTRIBUTING.md)。 -- [vue](https://github.com/vuejs/vue): the core library -- [vuex](https://github.com/vuejs/vuex): Flux-inspired state management -- [vue-router](https://github.com/vuejs/vue-router): a routing system for SPAs +阅读之后,你应当已经准备好贡献 Vue 的核心仓库了: -...as well as many smaller official [companion libraries](https://github.com/vuejs). +- [vue](https://github.com/vuejs/vue): 核心库 +- [vuex](https://github.com/vuejs/vuex): 类 Flux 的状态管理 +- [vue-router](https://github.com/vuejs/vue-router): 为单页面应用提供的路由系统 -### Share (and Build) Your Experience +...还有许多小型的官方[同伴库](https://github.com/vuejs)。 -Apart from answering questions and sharing resources in the forum and Gitter channel, there are a few other less obvious ways to share and expand what you know: +## 分享(并构筑)你的见识 -- **Develop learning materials.** It's often said that the best way to learn is to teach. If there's something interesting you're doing with Vue, strengthen your expertise by writing a blog post, developing a workshop, or even just publishing a gist that you share on social media. -- **Watch a repo you care about.** This will send you notifications whenever there's activity in that repository, giving you insider knowledge about ongoing discussions and upcoming features. It's a fantastic way to build expertise so that you're eventually able to help address issues and pull requests. +除了在论坛域 Gitter 频道回答问题、分享资源外,还有一些更微小的方式可以分享并增长你的见识: -### Translate Docs +- **开发学习材料。**常说最好的学习方式就是教导。如果你正在用 Vue 做一些有趣的事情,你可以写一篇博客、组织研讨会、或者只发布一个 gist,然后分享到社交平台:这些都能加强你的特专门知识。 +- **关注(watch)你关心的仓库。**这样无论何时该仓库有新的动静,它都会第一时间通知你,提供关于正在进行的讨论以及即将到来的新特性的新鲜情报。这是超棒的提高专门知识的方法,然后你将终于有能力来解决问题(issues)并提交 pull requests。 -Vue has already spread across the globe, with even the core team in at least half a dozen timezones. [The forum](http://forum.vuejs.org/) includes 7 languages and counting and many of our docs have [actively-maintained translations](https://github.com/vuejs?utf8=%E2%9C%93&query=vuejs.org). We're very proud of Vue's international reach, but we can do even better. +### 翻译文档 -I hope that right now, you're reading this sentence in your preferred language. If not, would you like to help us get there? +Vue 已经在全球范围内传播开来,核心团队甚至来自于至少 6 个时区。[论坛](http://forum.vuejs.org/) 已有 7 种语言,数字还在持续增长。我们许多文档都有[积极维护的翻译](https://github.com/vuejs?utf8=%E2%9C%93&query=vuejs.org)。我们非常为 Vue 的国际影响力骄傲,但我们还能做得更好。 -If so, please feel free to fork the repo for [these docs](https://github.com/vuejs/vuejs.org/) or for any other officially maintained documentation, then start translating. Once you've made some progress, open an issue or pull request in the main repo and we'll put out a call for more contributors to help you out. +我希望现在,你正在用你偏爱的语言阅读这个句子。如果不是,你愿意帮我们实现它吗? + +如果你愿意的话,请随时为[这些文档](https://github.com/vuejs/vuejs.org/),或者官方维护的其他文档 fork 这个仓库,然后开始翻译吧。一旦你取得了一些进展,请在主仓库开一个 issue 或者 pull request,我们将号召更多的贡献者来帮助你。 + +*** + +> 原文: http://vuejs.org/guide/join.html + +*** diff --git a/src/guide/list.md b/src/guide/list.md index f214b1cac2..178af55192 100644 --- a/src/guide/list.md +++ b/src/guide/list.md @@ -440,3 +440,9 @@ methods: { } } ``` + +*** + +> 原文: http://vuejs.org/guide/list.html + +*** diff --git a/src/guide/migration-vue-router.md b/src/guide/migration-vue-router.md index b7fc973314..da5cfdd2c5 100644 --- a/src/guide/migration-vue-router.md +++ b/src/guide/migration-vue-router.md @@ -1,18 +1,19 @@ --- -title: Migration from Vue Router 0.7.x +title: 从Vue Router 0.7.x迁移 type: guide order: 25 --- -> Only Vue Router 2 is compatible with Vue 2, so if you're updating Vue, you'll have to update Vue Router as well. That's why we've included details on the migration path here in the main docs. For a complete guide on using the new Vue Router, see the [Vue Router docs](http://router.vuejs.org/en/). +> 只有Vue Router 2与Vue 2是相互兼容的,所以如果你需要更新Vue,你也需要更新Vue Router。这也就是我们在主文档中将迁移路径的内容添加进来的原因。 +如果想要进一步了解新Vue Router的使用详情,请移步 [Vue Router docs](http://router.vuejs.org/en/). -

      The list of deprecations below should be relatively complete, but the migration helper is still being updated to catch them.

      +

      以下的弃用名单应该相对完整,但是迁移助手会不定期更新以保证赶上更新的进度.

      -## Route Definitions +## Route 定义 -### `router.map` deprecated +### `router.map` 弃用 -Routes are now defined as an array on a [`routes` option](http://router.vuejs.org/en/essentials/getting-started.html#javascript) at router instantiation. So these routes for example: +现在的路由被定义在一个数组之中[`routes` option](http://router.vuejs.org/en/essentials/getting-started.html#javascript)在这个路由实例中. 这些是路由的示例: ``` js router.map({ @@ -25,7 +26,7 @@ router.map({ }) ``` -Will instead be defined with: +会被替代以这样的方式定义: ``` js var router = new VueRouter({ @@ -36,26 +37,26 @@ var router = new VueRouter({ }) ``` -The array syntax allows more predictable route matching, since iterating over an object is not guaranteed to use the same key order across browsers. +考虑到不同浏览器中遍历对象不能保证会使用相同的键值,这个数组的语法可以允许更多可预测的路由匹配。. {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of router.map being called.

      +

      升级路径

      +

      运行迁移助手命令去寻找示例router.map调用.

      {% endraw %} -### `router.on` deprecated +### `router.on` 弃用 -If you need to programmatically generate routes when starting up your app, you can do so by dynamically pushing definitions to a routes array. For example: +如果你需要在启动你的app时从程序上确保生成的路由,你可以通过动态的向路由数组推送定义来完成这个操作。举例说明: ``` js -// Normal base routes +// 普通基本的路由 var routes = [ // ... ] -// Dynamically generated routes +// 动态生成的路由 marketingPages.forEach(function (page) { routes.push({ path: '/marketing/' + page.slug @@ -73,7 +74,7 @@ var router = new Router({ }) ``` -If you need to add new routes after the router has been instantiated, you can replace the router's matcher with a new one that includes the route you'd like to add: +如果你需要在路由被实例化后增加新的路由,你可以用一个你需要新添加的路由去替换路由的匹配者: ``` js router.match = createMatcher( @@ -86,25 +87,25 @@ router.match = createMatcher( {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of router.on being called.

      +

      升级路径

      +

      运行迁移助手命令去寻找示例router.on调用.

      {% endraw %} -### `subroutes` deprecated +### `subroutes` 弃用 -[Renamed to `children`](http://router.vuejs.org/en/essentials/nested-routes.html) for consistency within Vue and with other routing libraries. +[重命名为`children`](http://router.vuejs.org/en/essentials/nested-routes.html)出于与Vue以及其他路由库的一致性考虑. {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the subroutes option.

      +

      升级路径

      +

      运行迁移助手命令去寻找示例subroutes的选项.

      {% endraw %} -### `router.redirect` deprecated +### `router.redirect` 弃用 -This is now an [option on route definitions](http://router.vuejs.org/en/essentials/redirect-and-alias.html). So for example, you will update: +这现在是一个 [路由定义的选项](http://router.vuejs.org/en/essentials/redirect-and-alias.html). 所以举例说明一下,你将会更新: ``` js router.redirect({ @@ -112,7 +113,7 @@ router.redirect({ }) ``` -to a definition like below in your `routes` configuration: +成像下面你的'routes'配置里定义的样子: ``` js { @@ -123,14 +124,14 @@ to a definition like below in your `routes` configuration: {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of router.redirect being called.

      +

      升级路径

      +

      运行迁移助手命令去寻找示例router.redirect的调用.

      {% endraw %} -### `router.alias` deprecated +### `router.alias` 弃用 -This is now an [option on the definition for the route](http://router.vuejs.org/en/essentials/redirect-and-alias.html) you'd like to alias to. So for example, you will update: +这现在是一个[路由定义的选项](http://router.vuejs.org/en/essentials/redirect-and-alias.html) 你将要进行alias操作。所以举例说明,你将会更新: ``` js router.alias({ @@ -138,7 +139,7 @@ router.alias({ }) ``` -to a definition like below in your `routes` configuration: +成像下面你的'routes'配置里定义的样子: ``` js { @@ -148,7 +149,7 @@ to a definition like below in your `routes` configuration: } ``` -If you need multiple aliases, you can also use an array syntax: +如果你需要进行多次alias操作,你也可以使用一个数组语法去实现: ``` js alias: ['/manage', '/administer', '/administrate'] @@ -156,37 +157,37 @@ alias: ['/manage', '/administer', '/administrate'] {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of router.alias being called.

      +

      升级路径

      +

      运行迁移助手命令去寻找示例router.alias的调用.

      {% endraw %} -## Route Matching +## Route 匹配 -Route matching now uses [path-to-regexp](https://github.com/pillarjs/path-to-regexp) under the hood, making it much more flexible than previously. +路由匹配现在使用[path-to-regexp](https://github.com/pillarjs/path-to-regexp)这个包,这将会使得工作与之前相比更加灵活. -### One or More Named Parameters +### 一个或者更多的命名参数 -The syntax has changed slightly, so `/category/*tags` for example, should be updated to `/category/:tags+`. +语法稍微有些许改变,所以以`/category/*tags`为例,应该被更新为`/category/:tags+`. {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the deprecated route syntax.

      +

      升级路径

      +

      运行迁移助手命令去寻找弃用路由语法的示例.

      {% endraw %} ## Links -### `v-link` deprecated +### `v-link` 弃用 -The `v-link` directive has been replaced with a new [`` component](http://router.vuejs.org/en/api/router-link.html), as this sort of job is now solely the responsibility of components in Vue 2. That means whenever wherever you have a link like this: +`v-link`指令已经被一个新的[``component](http://router.vuejs.org/en/api/router-link.html)指令替代,这一部分的工作已经被Vue2中的组件完成。这将意味着无论在什么时刻,什么情况下你将会拥有这样的一个链接: ``` html About ``` -You'll need to update it like this: +你需要像这样去更新: ``` html About @@ -194,14 +195,15 @@ You'll need to update it like this: {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the v-link directive.

      +

      升级路径

      +

      运行迁移助手命令去寻找v-link指令的示例

      {% endraw %} -### `v-link-active` deprecated +### `v-link-active` 废弃 -The `v-link-active` directive has also been deprecated in favor of specifying a separate tag on [the `` component](http://router.vuejs.org/en/api/router-link.html). So for example, you'll update this: +`v-link-active`指令也因为新出现了一个用于定义隔离标签(在[``组件](http://router.vuejs.org/en/api/router-link.html)上)被废弃掉了。所以 +举例说明,你将会以这样的方式更新: ``` html
    5. @@ -209,7 +211,7 @@ The `v-link-active` directive has also been deprecated in favor of specifying a
    6. ``` -to this: +变成了这样: ``` html @@ -217,44 +219,44 @@ to this: ``` -The `` will be the actual link (and will get the correct href), but the active class will be applied to the outer `
    7. `. + ``标签将会成为真实的链接(并且会获取到正确的跳转),但是激活的类将会被应用在外部的`
    8. `标签上. {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the v-link-active directive.

      +

      升级路径

      +

      运行迁移助手命令去寻找v-link-active指令的示例

      {% endraw %} -## Programmatic Navigation +## 编程导航 ### `router.go` -[Renamed to `router.push`](http://router.vuejs.org/en/essentials/navigation.html#routerpushlocation) for consistency with terminology used in the [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). +[重命名为`router.push`](http://router.vuejs.org/en/essentials/navigation.html#routerpushlocation) 出于在[HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)与语使用的一致性原则. {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of router.go being called.

      +

      升级路径

      +

      运行迁移助手命令去寻找router.go指令被调用的示例

      {% endraw %} -## Router Options: Modes +## 路由选择:Modes -### `hashbang: false` deprecated +### `hashbang: false` 弃用 -Hashbangs are no longer required for Google to crawl a URL, so they are no longer the default (or even an option) for the hash strategy. +Hashbangs将不再为谷歌需要去爬去一个网址,所以他们将不再成为哈希策略的默认选项. {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the hashbang: false option.

      +

      升级路径

      +

      运行迁移助手命令去寻找hashbang: false选项的示例

      {% endraw %} -### `history: true` deprecated +### `history: true` 弃用 -All routing mode options have been condensed into a single [`mode` option](http://router.vuejs.org/en/api/options.html#mode). Update: +所有路由模型选项将被简化成一个单个的[`mode` 选项](http://router.vuejs.org/en/api/options.html#mode). 更新: ``` js var router = new VueRouter({ @@ -262,7 +264,7 @@ var router = new VueRouter({ }) ``` -to: +变成: ``` js var router = new VueRouter({ @@ -272,14 +274,14 @@ var router = new VueRouter({ {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the history: true option.

      +

      升级路径

      +

      运行迁移助手命令去寻找history: true选项的示例

      {% endraw %} -### `abstract: true` deprecated +### `abstract: true` 弃用 -All routing mode options have been condensed into a single [`mode` option](http://router.vuejs.org/en/api/options.html#mode). Update: +所有路由模型选项将被简化成一个单个的[`mode` 选项](http://router.vuejs.org/en/api/options.html#mode). 更新: ``` js var router = new VueRouter({ @@ -297,22 +299,22 @@ var router = new VueRouter({ {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the abstract: true option.

      +

      升级路径

      +

      运行migration helper命令去寻找abstract: true选项的示例.

      {% endraw %} -## Route Options: Misc +## 路由选项:Misc -### `saveScrollPosition` deprecated +### `saveScrollPosition` 弃用 -This has been replaced with a [`scrollBehavior` option](http://router.vuejs.org/en/advanced/scroll-behavior.html) that accepts a function, so that the scroll behavior is completely customizable - even per route. This opens many new possibilities, but to simply replicate the old behavior of: +它已经被替换为[`scrollBehavior`option](http://router.vuejs.org/en/advanced/scroll-behavior.html)可以接受一个方法,所以滑动行为可以完全的被定制化处理 - 就算为每次路由进行定制也可以满足。这将会开启很多新的可能,但是简单的复制旧的行为: ``` js saveScrollPosition: true ``` -You can replace it with: +你可以替换为: ``` js scrollBehavior: function (to, from, savedPosition) { @@ -322,104 +324,105 @@ scrollBehavior: function (to, from, savedPosition) { {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the saveScrollPosition: true option.

      +

      升级路径

      +

      运行migration helper命令去寻找saveScrollPosition: true选项的示例.

      {% endraw %} -### `root` deprecated +### `root` 弃用 -Renamed to `base` for consistency with [the HTML `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base). +出于与[the HTML ``element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base)一致性重命名为`base`. {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the root option.

      +

      升级路径

      +

      运行migration helper命令去寻找root选项的示例.

      {% endraw %} -### `transitionOnLoad` deprecated +### `transitionOnLoad` 弃用 -This option is no longer necessary now that Vue's transition system has explicit [`appear` transition control](transitions.html#Transitions-on-Initial-Render). +由于Vue的过渡系统的存在这个选项将不再需要[`appear` transition control](transitions.html#Transitions-on-Initial-Render). {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the transitionOnLoad: true option.

      +

      升级路径

      +

      运行migration helper命令去寻找transitionOnLoad: true选项的示例.

      {% endraw %} -### `suppressTransitionError` deprecated +### `suppressTransitionError` 弃用 -Removed due to hooks simplification. If you really must supress transition errors, you can use [`try`...`catch`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) instead. +出于简化钩子的需要被移除。如果你真的需要抑制过渡错误,你可以使用 [`try`...`catch`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch)作为替代. {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the suppressTransitionError: true option.

      +

      升级路径

      +

      运行migration helper命令去寻找suppressTransitionError: true选项的示例.

      {% endraw %} -## Route Hooks +## 路由挂钩 -### `activate` deprecated +### `activate` 弃用 -Use [`beforeRouteEnter`](http://router.vuejs.org/en/advanced/navigation-guards.html#incomponent-guards) in the component instead. +使用[`beforeRouteEnter`](http://router.vuejs.org/en/advanced/navigation-guards.html#incomponent-guards)这一组件进行替代. {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the beforeRouteEnter hook.

      +

      升级路径

      +

      运行migration helper命令去寻找beforeRouteEnter钩子的示例.

      {% endraw %} -### `canActivate` deprecated +### `canActivate` 弃用 -Use [`beforeEnter`](http://router.vuejs.org/en/advanced/navigation-guards.html#perroute-guard) in the route instead. +使用[`beforeEnter`](http://router.vuejs.org/en/advanced/navigation-guards.html#perroute-guard) 在路由中作为替代. {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the canActivate hook.

      +

      升级路径

      +

      运行migration helper命令去寻找canActivate钩子的示例.

      {% endraw %} -### `deactivate` deprecated +### `deactivate` 弃用 -Use the component's [`beforeDestroy`](/api/#beforeDestroy) or [`destroyed`](/api/#destroyed) hooks instead. +使用[`beforeDestroy`](/api/#beforeDestroy) or [`destroyed`](/api/#destroyed) 钩子作为替代. {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the deactivate hook.

      +

      升级路径

      +

      运行migration helper命令去寻找deactivate钩子的示例.

      {% endraw %} -### `canDeactivate` deprecated +### `canDeactivate` 弃用 -Use [`beforeRouteLeave`](http://router.vuejs.org/en/advanced/navigation-guards.html#incomponent-guards) in the component instead. +在组件中使用[`beforeRouteLeave`](http://router.vuejs.org/en/advanced/navigation-guards.html#incomponent-guards) 作为替代. {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the canDeactivate hook.

      +

      升级路径

      +

      运行migration helper命令去寻找canDeactivate钩子的示例.

      {% endraw %} -### `canReuse: false` deprecated +### `canReuse: false` 弃用 -There's no longer a use case for this in the new Vue Router. +在新的Vue 路由中将不再被使用. {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the canReuse: false option.

      +

      升级路径

      +

      运行迁移助手命令去寻找canReuse: false选项的示例.

      {% endraw %} -### `data` deprecated -The `$route` property is reactive, so you can just use a watcher to react to route changes, like this: +### `data` 弃用 + +`$route`属性是可反应的,所有你可以就使用一个观察者去反应路由的改变,就像这样: ``` js watch: { @@ -434,14 +437,14 @@ methods: { {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the data hook.

      +

      升级路径

      +

      运行迁移助手命令去寻找data钩子的示例.

      {% endraw %} -### `$loadingRouteData` deprecated +### `$loadingRouteData` 弃用 -Define your own property (e.g. `isLoading`), then update the loading state in a watcher on the route. For example, if fetching data with [axios](https://github.com/mzabriskie/axios): +定义你自己的属性(举例说明`isLoading`),然后在路由上的观察者中更新加载状态.举例说明,如果使用[axios](https://github.com/mzabriskie/axios)获取数据: ``` js data: function () { @@ -474,7 +477,13 @@ methods: { {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the $loadingRouteData meta property.

      +

      升级路径

      +

      运行迁移助手命令去寻找$loadingRouteDatameta属性的示例.

      {% endraw %} + +*** + +> 原文: http://vuejs.org/guide/migration-vue-router.html + +*** diff --git a/src/guide/migration.md b/src/guide/migration.md index 610ad3ba31..a35f2937c6 100644 --- a/src/guide/migration.md +++ b/src/guide/migration.md @@ -6,48 +6,48 @@ order: 24 ## FAQ -> Woah - this is a super long page! Does that mean 2.0 is completely different, I'll have to learn the basics all over again, and migrating will be practically impossible? +> 哇,非常长的一页!是否意味着 Vue2.0 已经完全不同了呢,是否需要从头学起呢,Vue1.0 的项目是不是没法迁移了? -I'm glad you asked! The answer is no. About 90% of the API is the same and the core concepts haven't changed. It's long because we like to offer very detailed explanations and include a lot of examples. Rest assured, __this is not something you have to read from top to bottom!__ +非常开心地告诉你,并不是! 几乎90%的 API 和核心概念都没有变。因为本节包含了很多详尽的阐述以及许多迁移的例子,所以显得有点长。不用担心,__你也不必从头到尾把本节读一遍!__ -> Where should I start in a migration? +> 怎么开始做项目迁移? -1. Start by running the [migration helper](https://github.com/vuejs/vue-migration-helper) on a current project. We've carefully minified and compressed a senior Vue dev into a simple command line interface. Whenever they recognize a deprecated pattern, they'll let you know, offer suggestions, and provide links to more info. +1. 就从运行 [migration helper](https://github.com/vuejs/vue-migration-helper) 这个工具开始吧。我们非常谨慎地把一个高级 Vue 开发工具简化并重新编译成了一个命令行工具。当这个工具发现了一个弃用的用法之后,就会给出通知和建议,并附上关于详细信息的链接。 -2. After that, browse through the table of contents for this page in the sidebar. If you see a topic you may be affected by, but the migration helper didn't catch, check it out. +2. 然后,看看侧边栏给出的关于这一页的内容。如果你发现有的地方有影响,而该工具没有给出提示的,请检查并解决一下该项。 -3. If you have any tests, run them and see what still fails. If you don't have tests, just open the app in your browser and keep an eye out for warnings or errors as you navigate around. +3. 如果有测试的话,测试一边看看还有什么问题。如果没有测试的话,打开app,随机翻一下,看一下有什么报错或者警告信息。 -4. By now, your app should be fully migrated. If you're still hungry for more though, you can read the rest of this page - or just dive in to the new and improved guide from [the beginning](index.html). Many parts will be skimmable, since you're already familiar with the core concepts. +4. 至此,你的 app 基本已经迁移完毕了。如果你有更多想了解的,可以阅读一下本节剩下的部分。 -> How long will it take to migrate a Vue 1.x app to 2.0? +> 从1.0 迁移到2.0要花多长时间? -It depends on a few factors: +取决于以下几个方面: -- The size of your app (small to medium-sized apps will probably be less than a day) +- 要迁移的 app 的规模。(小到中型的基本上一天内就可以搞定) -- How many times you get distracted and start playing with a cool new feature. 😉  Not judging, it also happened to us while building 2.0! +- 为了耍耍 Vue2.0 的新功能分心了多少次。 😉  不是说你们,我们构建 Vue2.0 的时候经常发生这种事。 -- Which deprecated features you're using. Most can be upgraded with find-and-replace, but others might take a few minutes. If you're not currently following best practices, Vue 2.0 will also try harder to force you to. This is a good thing in the long run, but could also mean a significant (though possibly overdue) refactor. +- 使用了哪些弃用的功能。基本上大部分弃用的功能可以通过 find-and-replace 来实现升级,但有一些还是要花点时间。如果你没有遵循最佳实践,那么 Vue2.0 会强迫你去遵循。这有利于项目的长期运行,但是也意味着重构(也许有些需要重构的东西已经过时)。 -> If I upgrade to Vue 2, will I also have to upgrade Vuex and Vue-Router? +> 迁移到 Vue 2 ,我也需要更新 Vuex 和 Vue-Router ? -Only Vue-Router 2 is compatible with Vue 2, so yes, you'll have to follow the [migration path for Vue-Router](migration-vue-router.html) as well. Fortunately, most applications don't have a lot of router code, so this likely won't take more than an hour. +只有 Vue-Router 2 是可编译的,可以遵循 [Vue-Router 迁移路径](migration-vue-router.html) 来处理。幸运地是, 大多数应用不含有许多路由代码,所以迁移不用超过一小时。 -As for Vuex, even version 0.8 is compatible with Vue 2, so you're not forced to upgrade. The only reason you may want to upgrade immediately is to take advantage of the new features in Vuex 2, such as modules and reduced boilerplate. +对于 Vuex, 甚至 0.8 版本和 Vue 2 一起都是可以编译的,所以不必强制更新。 促使你立即更新的理由是 Vuex 2 有更先进的功能,比如模块和减少的样板文件。 -## Templates +## 模板 -### Fragment Instances deprecated +### 片段实例 弃用 -Every component must have exactly one root element. Fragment instances are no longer allowed. If you have a template like this: +每个组件有且仅有一个根节点。不再支持片段实例,如果你有这样的模板: ``` html

      foo

      bar

      ``` -It's recommended to simply wrap the entire contents in a new element, like this: +最好把它包裹到一个简单的容器里面去: ``` html
      @@ -58,38 +58,38 @@ It's recommended to simply wrap the entire contents in a new element, like this: {% raw %}
      -

      Upgrade Path

      -

      Run your end-to-end test suite or app after upgrading and look for console warnings about multiple root elements in a template.

      +

      升级方式

      +

      升级后,为你的 app 运行端对端测试 ,并关注关于多个根节点的console warnings

      {% endraw %} -## Lifecycle Hooks +## 生命周期钩子 -### `beforeCompile` deprecated +### `beforeCompile` 弃用 -Use the `created` hook instead. +用 `created` 钩子来代替。 {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find all examples of this hook.

      +

      升级方式

      +

      运行 migration helper 工具找到所有使用这个钩子的实例

      {% endraw %} -### `compiled` deprecated +### `compiled` 弃用d -Use the new `mounted` hook instead. +用 `mounted` 钩子来代替。 {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find all examples of this hook.

      +

      升级方式

      +

      运行 migration helper 工具找到所有使用这个钩子的实例

      {% endraw %} -### `attached` deprecated +### `attached` 弃用 -Use a custom in-dom check in other hooks. For example, to replace: +依赖其它钩子使用自定义的dom内部方法,例如: ``` js attached: function () { @@ -97,7 +97,7 @@ attached: function () { } ``` -You could use: +现在可以这样做: ``` js mounted: function () { @@ -109,14 +109,14 @@ mounted: function () { {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find all examples of this hook.

      +

      升级方式

      +

      运行 migration helper 工具找到所有使用这个钩子的实例

      {% endraw %} ### `detached` deprecated -Use a custom in-dom check in other hooks. For example, to replace: +用自定义的 dom 内部的其他钩子代替,例如: ``` js detached: function () { @@ -124,7 +124,7 @@ detached: function () { } ``` -You could use: +可以用以下方式代替: ``` js destroyed: function () { @@ -136,85 +136,84 @@ destroyed: function () { {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find all examples of this hook.

      +

      升级方式

      +

      运行 migration helper 工具找到所有使用这个钩子的实例

      {% endraw %} ### `init` deprecated -Use the new `beforeCreate` hook instead, which is essentially the same thing. It was renamed for consistency with other lifecycle methods. +用新的 `beforeCreate` 钩子代替,他们本质上是一样的。为了与其他生命周期的钩子命名保持一致性,所以重新命名了这个钩子。 {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find all examples of this hook.

      +

      升级方式

      +

      运行 migration helper 工具找到所有使用这个钩子的实例

      {% endraw %} ### `ready` deprecated -Use the new `mounted` hook instead. It should be noted though that with `mounted`, there's no guarantee to be in-document. For that, also include `Vue.nextTick`/`vm.$nextTick`. For example: +使用新的 `mounted` 钩子代替,. 应该注意的是,通过使用 `mounted` 钩子,并不能保证该实例已经插入文档。所以还应该在钩子函数中包含 `Vue.nextTick`/`vm.$nextTick` 例如: ``` js mounted: function () { this.$nextTick(function () { - // code that assumes this.$el is in-document + // 保证 this.$el 已经插入文档 }) } ``` {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find all examples of this hook.

      +

      升级方式

      +

      运行 migration helper 工具找到所有使用这个钩子的实例

      {% endraw %} ## `v-for` -### `v-for` Argument Order for Arrays +### `v-for` 数组参数的顺序 -When including an `index`, the argument order for arrays used to be `(index, value)`. It is now `(value, index)` to be more consistent with JavaScript's native array methods such as `forEach` and `map`. +当含有 `index` 时,以前传递的参数顺序是:`(index, value)`。现在变成了:`(value, index)` ,这样可以与js的新数组方法:`forEach`,`map` 保持一致。 {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the deprecated argument order. Note that if you name your index arguments something unusual like position or num, the helper will not flag them.

      +

      升级方式

      +

      运行 migration helper 来找到使用弃用参数顺序的实例。注意,该工具将不会标记以 position 或者 num 来命名 index 参数。

      {% endraw %} -### `v-for` Argument Order for Objects +### `v-for` 对象参数的顺序 -When including a `key`, the argument order for objects used to be `(key, value)`. It is now `(value, key)` to be more consistent with common object iterators such as lodash's. +当包含 `key` 时,对象的参数顺序是 `(key, value)`。现在改为了 `(value, key)`,这样可以和通用的对象迭代器(比如 lodash 的迭代器)保持一致。 {% raw %}

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the deprecated argument order. Note that if you name your key arguments something like name or property, the helper will not flag them.

      +

      运行 migration helper 来找到使用弃用参数顺序的实例。注意,该工具将不会标记以

      name 或者 property 来命名 key 参数。

      {% endraw %} ### `$index` and `$key` deprecated -The implicitly assigned `$index` and `$key` variables have been deprecated in favor of explicitly defining them in `v-for`. This makes the code easier to read for developers less experienced with Vue and also results in much clearer behavior when dealing with nested loops. - +隐式申明的 `$index` 的 `$key` 两个变量在新版里面已经弃用了,取代的是在 `v-for` 中显式地申明。这可以使无经验的 Vue 开发者更好地理解代码,同样也可以使得在处理嵌套循环时更加清晰。 {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of these deprecated variables. If you miss any, you should also see console errors such as: Uncaught ReferenceError: $index is not defined

      +

      升级方式

      +

      运行 migration helper 来找到使用弃用变量的实例。如果有些没有找到,也可以参考控制台警告信息 比如 Uncaught ReferenceError: $index is not defined

      {% endraw %} -### `track-by` deprecated +### `track-by` 弃用 -`track-by` has been replaced with `key`, which works like any other attribute: without the `v-bind:` or `:` prefix, it is treated as a literal string. In most cases, you'd want to use a dynamic binding which expects a full expression instead of a key. For example, in place of: +`track-by` 被 `key`取代,和其他参数一样,如果没有 `v-bind`或者`:` 前缀,它将被作为一个字符串。大多数情况下, 我们想要能够动态绑定完整的表达式,而不是一个 key。例如: ``` html
      ``` -You would now write: +现在应该写成: ``` html
      @@ -222,27 +221,27 @@ You would now write: {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of track-by.

      +

      升级方式

      +

      运行 migration helper 找到含 track-by的实例。

      {% endraw %} -### `v-for` Range Values +### `v-for` 排序值 -Previously, `v-for="number in 10"` would have `number` starting at 0 and ending at 9. Now it starts at 1 and ends at 10. +显然 `v-for="number in 10"` 将使得 `number` 从0到9迭代,现在变成了从1到10. {% raw %}
      -

      Upgrade Path

      -

      Search your codebase for the regex /\w+ in \d+/. Wherever it appears in a v-for, check to see if you may be affected.

      +

      升级方式

      +

      以正则 /\w+ in \d+/搜索整个代码,当出现在 v-for里面时,检查一下,对你是否有影响。

      {% endraw %} ## Props -### `coerce` Prop Option deprecated +### `coerce` Prop的参数 弃用 -If you want to coerce a prop, setup a local computed value based on it instead. For example, instead of: +如果需要检查prop的值,创建一个内部的computed值,而不再在props内部去定义,例如: ``` js props: { @@ -257,7 +256,7 @@ props: { } ``` -You could write: +现在应该写为: ``` js props: { @@ -272,95 +271,96 @@ computed: { } ``` -There are a few advantages: +这样有一些好处: -- You still have access to the original value of the prop. -- You are forced to be more explicit, by giving your coerced value a name that differentiates it from the value passed in the prop. +- 你可以对保持原始 prop 值的操作权限。 +- 通过给予验证后的值一个不同的命名,强制开发者使用显式申明。 {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the coerce option.

      +

      升级方式

      +

      运行 migration helper 工具找出包含 coerce 选项的实例。

      {% endraw %} -### `twoWay` Prop Option deprecated +### `twoWay` Prop 的参数 弃用 -Props are now always one-way down. To produce side effects in the parent scope, a component needs to explicitly emit an event instead of relying on implicit binding. For more information, see: +Props现在只能单项传递。为了对父组件产生反向影响,子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定。详见: -- [Custom component events](components.html#Custom-Events) -- [Custom input components](components.html#Form-Input-Components-using-Custom-Events) (using component events) -- [Global state managment](state-management.html) +- [自定义组件事件](components.html#Custom-Events) +- [自定义输入组件](components.html#Form-Input-Components-using-Custom-Events) (using component events) +- [全局状态管理](state-management.html) {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the twoWay option.

      +

      升级方式

      +

      运行 migration helper工具,找出含有 twoWay 参数的实例。

      {% endraw %} -### `v-bind` with `.once` and `.sync` Modifiers deprecated +### `v-bind` 的 `.once`和`.sync` 修饰符 弃用 -Props are now always one-way down. To produce side effects in the parent scope, a component needs to explicitly emit an event instead of relying on implicit binding. For more information, see: +Props现在只能单向传递。为了对父组件产生反向影响,子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定。详见: -- [Custom component events](components.html#Custom-Events) -- [Custom input components](components.html#Form-Input-Components-using-Custom-Events) (using component events) -- [Global state managment](state-management.html) +- [自定义组件事件](components.html#Custom-Events) +- [自定义输入组件](components.html#Form-Input-Components-using-Custom-Events) (使用组件事件) +- [全局状态管理](state-management.html) {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the .once and .sync modifiers.

      +

      升级方式

      +

      运行 migration helper 工具找到使用 .once.sync 修饰符的实例。

      {% endraw %} -### Prop Mutation deprecated +### 修改 Props deprecated -Mutating a prop locally is now considered an anti-pattern, e.g. declaring a prop and then setting `this.myProp = 'someOtherValue'` in the component. Due to the new rendering mechanism, whenever the parent component re-renders, the child component's local changes will be overwritten. +组件内修改prop是反模式(不推荐的)的。比如,先申明一个prop,然后在组件中通过 `this.myProp = 'someOtherValue'` 改变prop的值。根据渲染机制,当父组件重新渲染时,子组件的内部prop +值也将被覆盖。 -Most use cases of mutating a prop can be replaced by one of these options: +大多数情况下,改变prop值可以用以下选项代替: -- a data property, with the prop used to set its default value -- a computed property +- 通过 data 属性,用prop去设置一个data属性的默认值。//todu +- 通过 computed 属性。 {% raw %}
      -

      Upgrade Path

      -

      Run your end-to-end test suite or app after upgrading and look for console warnings about prop mutations.

      +

      升级方式

      +

      运行端对端测试,查看关于 prop 修改的控制台警告信息

      {% endraw %} -### Props on a Root Instance deprecated +### 根实例的 Props 弃用 -On root Vue instances (i.e. instances created with `new Vue({ ... })`), you must use `propsData` instead of `props`. +对于一个根实例来说 (比如:用 `new Vue({ ... })` 创建的实例),只能用 `propsData` 而不是 `props`. {% raw %}
      -

      Upgrade Path

      -

      Run your end-to-end test suite, if you have one. The failed tests should alert to you to the fact that props passed to root instances are no longer working.

      +

      升级方式

      +

      运行端对端测试,将会弹出 failed tests 来通知你使用 `props` 的根实例已经失效。

      {% endraw %} -## Built-In Directives +## Built-In 指令 -### Truthiness/Falsiness with `v-bind` +### `v-bind` 真/假值 -When used with `v-bind`, the only falsy values are now: `null`, `undefined`, and `false`. This means `0` and empty strings will render as truthy. So for example, `v-bind:draggable="''"` will render as `draggable="true"`. +在2.0中使用 `v-bind` 时, 只有 `null`, `undefined`, 和 `false`被看作是假。这意味着,`0` 和空字符串将被作为真值渲染。比如 `v-bind:draggable="''"` 将被渲染为 `draggable="true"`。 -For enumerated attributes, in addition to the falsy values above, the string `"false"` will also render as `attr="false"`. +对于枚举属性,除了以上假值之外,字符串 `"false"` 也会被渲染为 `attr="false"`。 -

      Note that for other directives (e.g. `v-if` and `v-show`), JavaScript's normal truthiness still applies.

      +

      注意,对于其它钩子 (如 `v-if` 和 `v-show`), 他们依然遵循 js 对真假值判断的一般规则。

      {% raw %}
      -

      Upgrade Path

      -

      Run your end-to-end test suite, if you have one. The failed tests should alert to you to any parts of your app that may be affected by this change.

      +

      升级方式

      +

      运行端到端测试,如果你app的任何部分有可能被这个升级影响到,将会弹出failed tests

      {% endraw %} -### Listening for Native Events on Components with `v-on` - -When used on a component, `v-on` now only listens to custom events `$emit`ted by that component. To listen for a native DOM event on the root element, you can use the `.native` modifier. For example: +### 用 `v-on` 监听原生事件 + + 现在在组件上使用 `v-on` 只会监听自定义事件(组件用 `$emit` 触发的事件)。如果要监听根元素的原生事件,可以使用 `.native` 修饰符,比如: ``` html @@ -368,16 +368,16 @@ When used on a component, `v-on` now only listens to custom events `$emit`ted by {% raw %}
      -

      Upgrade Path

      -

      Run your end-to-end test suite, if you have one. The failed tests should alert to you to any parts of your app that may be affected by this change.

      +

      升级方式

      +

      运行端对端测试,如果你app的任何部分有可能被这个升级影响到,将会弹出failed tests

      {% endraw %} -### `v-model` with `debounce` deprecated +### 带有 `debounce` 的 `v-model`弃用 -Debouncing is used to limit how often we execute Ajax requests and other expensive operations. Vue's `debounce` attribute parameter for `v-model` made this easy for very simple cases, but it actually debounced __state updates__ rather than the expensive operations themselves. It's a subtle difference, but it comes with limitations as an application grows. +Debouncing 曾经被用来控制 Ajax 请求及其它高耗任务的频率。 Vue 中`v-model`的 `debounce` 属性参数使得在一些简单情况下非常容易实现这种控制。但实际上,这是控制了 __状态更新__ 的频率,而不是控制高耗时任务本身。这是个微小的差别,但是会随着应用增长而显现出局限性。 -These limitations become apparent when designing a search indicator, like this one for example: +例如在设计一个搜索提示时的局限性: {% raw %} @@ -423,14 +423,13 @@ new Vue({ {% endraw %} -Using the `debounce` attribute, there'd be no way to detect the "Typing" state, because we lose access to the input's real-time state. By decoupling the debounce function from Vue however, we're able to debounce only the operation we want to limit, removing the limits on features we can develop: +使用 `debounce` 参数,便无法观察 "Typing" 的状态。因为无法对输入状态进行实时检测。然而,通过将 `debounce` 与 Vue 解耦,可以仅仅只延迟我们想要控制的操作,从而避开这些局限性: ``` html
      @@ -465,7 +464,7 @@ new Vue({ } }, methods: { - // This is where the debounce actually belongs. + // 这是 debounce 实现的地方。 expensiveOperation: _.debounce(function () { this.isCalculating = true setTimeout(function () { @@ -477,25 +476,25 @@ new Vue({ }) ``` -Another advantage of this approach is there will be times when debouncing isn't quite the right wrapper function. For example, when hitting an API for search suggestions, waiting to offer suggestions until after the user has stopped typing for a period of time isn't an ideal experience. What you probably want instead is a __throttling__ function. Now since you're already using a utility library like lodash, refactoring to use its `throttle` function instead takes only a few seconds. +这种方式的另外一个优点是:当包裹函数执行时间与延时时间相当时,将会等待较长时间。比如,当给出搜索建议时,要等待用户输入停止一段时间后才给出建议,这个体验非常差。其实,这时候更适合用__throttling__函数。因为现在你可以自由的使用类似lodash之类的库,所以很快就可以用throttling重构项目。 {% raw %}

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the debounce attribute.

      +

      运行 migration helper 工具找出石勇 debounce 参数的 实例。

      {% endraw %} -### `v-model` with `lazy` or `number` Param Attributes deprecated +### 使用 `lazy` 或者 `number` 参数的 `v-model` 。 弃用 -The `lazy` and `number` param attributes are now modifiers, to make it more clear what That means instead of: +`lazy` 和 `number` 参数现在以修饰符的形式使用,这样看起来更加清晰,而不是这样: ``` html ``` -You would use: +现在写成这样: ``` html @@ -504,22 +503,22 @@ You would use: {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the these deprecated param attributes.

      +

      升级方式

      +

      运行 migration helper工具找到这些弃用参数。

      {% endraw %} -### `v-model` with Inline `value` deprecated +###使用内联 `value`的`v-model` 弃用 -`v-model` no longer cares about the initial value of an inline `value` attribute. For predictability, it will instead always treat the Vue instance data as the source of truth. +`v-model` 不再以内联 `value` 方式初始化的初值了,显然他将以实例的data相应的属性作为真正的初值。 -That means this element: +这意味着以下元素: ``` html ``` -backed by this data: +在data选项中有下面写法的: ``` js data: { @@ -527,7 +526,7 @@ data: { } ``` -will render with a value of "bar" instead of "foo". The same goes for a ` ``` -You should ensure your initial value for `text` is "hello world". +必须保证 `text` 初值为 "hello world" {% raw %}
      -

      Upgrade Path

      -

      Run your end-to-end test suite or app after upgrading and look for console warnings about inline value attributes with v-model.

      +

      升级方式

      +

      升级后运行端对端测试,注意关于v-model内联参数的 console warnings

      {% endraw %} ### `v-model` with `v-for` Iterated Primitive Values deprecated -Cases like this no longer work: +像这样的写法将失效: ``` html ``` -The reason is this is the equivalent JavaScript that the `` would compile to: +因为 `` 将被便宜成类似下面的js代码: ``` js strings.map(function (str) { @@ -560,9 +559,9 @@ strings.map(function (str) { }) ``` -As you can see, `v-model`'s two-way binding doesn't make sense here. Setting `str` to another value in the iterator function will do nothing because it's just a local variable in the function scope. +这样,`v-model` 的双向绑定在这里就失效了。把 `str` 赋值给迭代器里的另一个值也没有用,因为它仅仅是函数内部的一个变量。 -Instead, you should use an array of __objects__ so that `v-model` can update the field on the object. For example: +替代方案是,你可以使用对象数组,这样`v-model` 就可以同步更新对象里面的字段了,例如: ``` html @@ -570,20 +569,20 @@ Instead, you should use an array of __objects__ so that `v-model` can update the {% raw %}
      -

      Upgrade Path

      -

      Run your test suite, if you have one. The failed tests should alert to you to any parts of your app that may be affected by this change.

      +

      升级方式

      +

      运行测试,如果你的 app 有地方被这个更新影响到的话将会弹出failed tests提示。

      {% endraw %} -### `v-bind:style` with Object Syntax and `!important` deprecated +### 带有 `!important` 的`v-bind:style` 弃用 -This will no longer work: +这样写将失效: ``` html

      hello

      ``` -If you really need to override another `!important`, you must use the string syntax: +如果确实需要覆盖其它的 `!important`,最好用字符串形式去写: ``` html

      hello

      @@ -591,30 +590,29 @@ If you really need to override another `!important`, you must use the string syn {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of style bindings with !important in objects.

      +

      升级方式

      +

      运行 迁移帮助工具。找到含有 !important 的style绑定对象。

      {% endraw %} -### `v-el` and `v-ref` deprecated +### `v-el` 和`v-ref` 弃用 -For simplicity, `v-el` and `v-ref` have been merged into the `ref` attribute, accessible on a component instance via `$refs`. That means `v-el:my-element` would become `ref="myElement"` and `v-ref:my-component` would become `ref="myComponent"`. When used on a normal element, the `ref` will be the DOM element, and when used on a component, the `ref` will be the component instance. - -Since `v-ref` is no longer a directive, but a special attribute, it can also be dynamically defined. This is especially useful in combination with `v-for`. For example: +简单起见, `v-el` 和 `v-ref` 合并为一个 `ref` 属性了,可以在组件实例中通过 `$refs` 来调用。这意味着 `v-el:my-element` 将写成这样: `ref="myElement"`, `v-ref:my-component` 变成了这样: `ref="myComponent"`。绑定在一般元素上时,`ref` 指DOM元素,绑定在组件上时,`ref` 为一组件实例。 +因为 `v-ref` 不再是一个指令了而是一个特殊的属性,它也可以被动态定义了。这样在和`v-for` 结合的时候是很有用的: ``` html

      ``` -Previously, `v-el`/`v-ref` combined with `v-for` would produce an array of elements/components, because there was no way to give each item a unique name. You can still achieve this behavior by given each item the same `ref`: +以前 `v-el`/`v-ref` 和 `v-for` 一起使用将产生一个DOM数组或者组件数组,因为没法给每个元素一个特定名字。现在你还仍然可以这样做,给每个元素一个同样的`ref`: ``` html

      ``` -Unlike in 1.x, these `$refs` are not reactive, because they're registered/updated during the render process itself. Making them reactive would require duplicate renders for every change. +和 1.x 中不同, `$refs` 不是响应的,因为它们在渲染过程中注册/更新。只有监听变化并重复渲染才能使它们响应。 because they're registered/updated during the render process itself. Making them reactive would require duplicate renders for every change. -On the other hand, `$refs` are designed primarily for programmatic access in JavaScript - it is not recommended to rely on them in templates, because that would mean referring to state that does not belong to the instance itself. This would violate Vue's data-driven view model. +另一方面,设计`$refs`主要是提供给 js 程序访问的,并不建议在模板中过度依赖使用它。因为这意味着在实例之外去访问实例状态,违背了 Vue 数据驱动的思想。 {% raw %}
      @@ -623,16 +621,16 @@ On the other hand, `$refs` are designed primarily for programmatic access in Jav
      {% endraw %} -### `v-else` with `v-show` deprecated +### `v-show`后面使用`v-else` 弃用 -`v-else` no longer works with `v-show`. Use `v-if` with a negation expression instead. For example, instead of: +`v-else` 不能再跟在 `v-show`后面使用。请在`v-if`的否定分支中使用`v-show`来代替。例如: ``` html

      Foo

      Not foo, but bar

      ``` -You can use: +现在应该写出这样: ``` html

      Foo

      @@ -641,35 +639,35 @@ You can use: {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the v-else with v-show.

      +

      升级方式

      +

      运行 migration helper 找出实例中存在的 v-else 以及 v-show

      {% endraw %} -## Custom Directives +## 自定义指令 -Directives have a greatly reduced scope of responsibility: they are now only used for applying low-level direct DOM manipulations. In most cases, you should prefer using components as the main code-reuse abstraction. +在新版中,指令的使用范围已经大大减小了:现在指令仅仅被用于低级的 DOM 操作。大多数情况下,最好是把模板作为代码复用的抽象层。 -Some of the most notable differences include: +显要的改变有如下几点: -- Directives no longer have instances. This means there's no more `this` inside directive hooks. Instead, they receive everything they might need as arguments. If you really must persist state across hooks, you can do so on `el`. -- Options such as `acceptStatement`, `deep`, `priority`, etc are all deprecated. To replace `twoWay` directives, see [this example](#Two-Way-Filters-deprecated). -- Some of the current hooks have different behavior and there are also a couple new hooks. +- 指令不在拥有实例。意思是,在指令的钩子函数中不再拥有实例的`this`。替代的是,你可以在参数中接受你需要的任何数据。如果确实需要,可以通过`el`来访问实例。 +- 类似 `acceptStatement`, `deep`, `priority`等都已被弃用。为了替换`双向`指令,见 [示例](#Two-Way-Filters-deprecated)。 +- 现在有些钩子的意义和以前不一样了,并且多了两个钩子函数。 -Fortunately, since the new directives are much simpler, you can master them more easily. Read the new [Custom Directives guide](custom-directive.html) to learn more. +幸运的是,新钩子更加简单,更加容易掌握。详见 [自定义指令指南](custom-directive.html)。 {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of defined directives. The helper will flag all of them, as it's likely in most cases that you'll want to refactor to a component.

      +

      升级方式

      +

      运行 migration helper 找到定义指令的地方。在helper 工具会把这些地方标记出来,因为很有可能这些地方需要重构。

      {% endraw %} -### Directive `.literal` Modifier deprecated +### 指令 `.literal` 修饰符 废弃 -The `.literal` modifier has been removed, as the same can be easily achieved by just providing a string literal as the value. +`.literal` 修饰符已经被移除,为了获取一样的功能,可以简单地提供字符串修饰符作为值。 -For example, you can update: +示例,如下更改: ``` js

      @@ -688,73 +686,75 @@ to just:
      {% endraw %} -## Transitions +## 过渡 -### `transition` Attribute deprecated +### `transition` 参数 弃用 -Vue's transition system has changed quite drastically and now uses `` and `` wrapper elements, rather than the `transition` attribute. It's recommended to read the new [Transitions guide](transitions.html) to learn more. +Vue 的过渡系统有了彻底的改变,现在通过使用 `` 和 `` 来包裹元素实现过渡效果,而不再使用 `transition` 属性。详见 [Transitions guide](transitions.html)。 {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the transition attribute.

      +

      升级方式

      +

      运行 migration helper 工具找到使用 transition 属性的地方。

      {% endraw %} -### `Vue.transition` for Reusable Transitions deprecated +### 可复用的过渡 `Vue.transition` 弃用 -With the new transition system, you can now just [use components for reusable transitions](http://rc.vuejs.org/guide/transitions.html#Reusable-Transitions). +在新的过渡系统中,可以[通过模板复用过渡效果](http://rc.vuejs.org/guide/transitions.html#Reusable-Transitions). {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of Vue.transition.

      +

      升级方式

      +

      运行 migration helper 工具找到使用 transition 属性的地方。

      {% endraw %} -### Transition `stagger` Attribute deprecated +### 过渡的 `stagger` 参数 deprecated -If you need to stagger list transitions, you can control timing by setting and accessing a `data-index` (or similar attribute) on an element. See [an example here](transitions.html#Staggering-List-Transitions). +如果希望在列表渲染中使用渐近过渡,可以通过设置元素的`data-index` (或类似属性)来控制时间。 请参考[这个例子](transitions.html#Staggering-List-Transitions)。 {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the transition attribute. During your update, you can transition (pun very much intended) to the new staggering strategy as well.

      +

      升级方式

      +

      运行 migration helper 工具找到使用 transition 属性的地方。升级期间,你可以“过渡”到新的过渡策略。

      {% endraw %} -## Events +## 事件 -### `events` option deprecated +### `events` 选项 弃用 -The `events` option has been deprecated. Event handlers should now be registered in the `created` hook instead. Check out the [`$dispatch` and `$broadcast` migration guide](#dispatch-and-broadcast-deprecated) for a detailed example. +`events` 选项被弃用。事件处理器现在在 `created` 钩子中被注册。参考详细示例 [`$dispatch` and `$broadcast` 迁移指南](#dispatch-and-broadcast-deprecated) -### `Vue.directive('on').keyCodes` deprecated +### `Vue.directive('on').keyCodes` 弃用 -The new, more concise way to configure `keyCodes` is through`Vue.config.keyCodes`. For example: +新的简明配置 `keyCodes` 的方式是通过 `Vue.config.keyCodes`例如: ``` js -// enable v-on:keyup.f1 +// v-on:keyup.f1 不可用 Vue.config.keyCodes.f1 = 112 ``` {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the the old keyCode configuration syntax.

      +

      升级方式

      +

      运行 migration helper 找到过时的keyCode配置

      {% endraw %} -### `$dispatch` and `$broadcast` deprecated +### `$dispatch` 和 `$broadcast` 弃用 + +`$dispatch` 和 `$broadcast` 已经被弃用。请使用更多简明清晰的组件间通信和更好的状态管理方案,如:[Vuex](https://github.com/vuejs/vuex). -`$dispatch` and `$broadcast` are being deprecated in favor of more explicitly cross-component communication and more maintainable state management solutions, such as [Vuex](https://github.com/vuejs/vuex). +因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好,我们也不希望在以后让开发者们太痛苦。并且`$dispatch` 和 `$broadcast` 也没有解决兄弟组件间的通信问题。 -The problem is event flows that depend on a component's tree structure can be hard to reason about and very brittle when the tree becomes large. It simply doesn't scale well and we don't want to set you up for pain later. `$dispatch` and `$broadcast` also do not solve communication between sibling components. +对于`$dispatch` 和 `$broadcast`最简单的升级方式就是:通过使用事件中心,允许组件自由交流,无论组件处于组件树的哪一层。由于Vue 实例实现了一个事件分发接口,你可以通过实例化一个空的Vue实例来实现这个目的。 One of the most common uses for these methods is to communicate between a parent and its direct children. In these cases, you can actually [listen to an `$emit` from a child with `v-on`](http://vuejs.org/guide/components.html#Form-Input-Components-using-Custom-Events). This allows you to keep the convenience of events with added explicitness. However, when communicating between distant descendants/ancestors, `$emit` won't help you. Instead, the simplest possible upgrade would be to use a centralized event hub. This has the added benefit of allowing you to communicate between components no matter where they are in the component tree - even between siblings! Because Vue instances implement an event emitter interface, you can actually use an empty Vue instance for this purpose. -For example, let's say we have a todo app structured like this: +比如,假设我们有个 todo 的应用结构如下: ``` Todos @@ -763,15 +763,15 @@ Todos |-- DeleteTodoButton ``` -We could manage communication between components with this single event hub: +可以通过单独的事件中心管理组件间的通信: ``` js -// This is the event hub we'll use in every -// component to communicate between them. +// 将在各处使用该事件中心 +// 组件通过它来通信 var eventHub = new Vue() ``` -Then in our components, we can use `$emit`, `$on`, `$off` to emit events, listen for events, and clean up event listeners, respectively: +然后再组件中,可以使用 `$emit`, `$on`, `$off` 分别来分发、监听、取消监听事件: ``` js // NewTodoInput @@ -801,8 +801,8 @@ created: function () { eventHub.$on('add-todo', this.addTodo) eventHub.$on('delete-todo', this.deleteTodo) }, -// It's good to clean up event listeners before -// a component is destroyed. +// 最好在组件销毁前 +// 清除事件监听 beforeDestroy: function () { eventHub.$off('add-todo', this.addTodo) eventHub.$off('delete-todo', this.deleteTodo) @@ -819,26 +819,26 @@ methods: { } ``` -This pattern can serve as a replacement for `$dispatch` and `$broadcast` in simple scenarios, but for more complex cases, it's recommended to use a dedicated state management layer such as [Vuex](https://github.com/vuejs/vuex). +在简单的情况下这样做可以代替 `$dispatch` 和 `$broadcast`,但是对于大多数复杂情况,更推荐使用一个专用的状态管理层如:[Vuex](https://github.com/vuejs/vuex). {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of $dispatch and $broadcast.

      +

      升级方式

      +

      运行 migration helper 工具找出使用 $dispatch$broadcast的实例。

      {% endraw %} -## Filters +## 过滤器 -### Filters Outside Text Interpolations deprecated +### 插入文本之外的过滤器 弃用 -Filters can now only be used inside text interpolations (`{% raw %}{{ }}{% endraw %}` tags). In the past we've found using filters within directives such as `v-model`, `v-on`, etc led to more complexity than convenience. For list filtering on `v-for`, it's also better to move that logic into JavaScript as computed properties, so that it can be reused throughout your component. +现在过滤器只能用在插入文本中 (`{% raw %}{{ }}{% endraw %}` tags)。我们发现在指令(如:`v-model`, `v-on`等)中使用过滤器使事情变得更复杂。像`v-for` 这样的列表过滤器最好把处理逻辑作为一个计算属性放在js里面,这样就可以在整个模板中复用。 -In general, whenever something can be achieved in plain JavaScript, we want to avoid introducing a special syntax like filters to take care of the same concern. Here's how you can replace Vue's built-in directive filters: +总之,能在原生js中实现的东西,我们尽量避免引入一个新的符号去重复处理同样的问题。下面是如何替换 Vue 内置过滤器: -#### Replacing the `debounce` Filter +#### 替换 `debounce` 过滤器 -Instead of: +不再这样写 ``` html @@ -852,7 +852,7 @@ methods: { } ``` -Use [lodash's `debounce`](https://lodash.com/docs/4.15.0#debounce) (or possibly [`throttle`](https://lodash.com/docs/4.15.0#throttle)) to directly limit calling the expensive method. You can achieve the same as above like this: +请使用 [lodash's `debounce`](https://lodash.com/docs/4.15.0#debounce) (也有可能是 [`throttle`](https://lodash.com/docs/4.15.0#throttle)) 来直接控制高耗任务。可以这样来实现上面的功能: ``` html @@ -866,17 +866,17 @@ methods: { } ``` -For more on the advantages of this strategy, see [the example here with `v-model`](#v-model-with-debounce-deprecated). +这种写法的更多优点详见: [the example here with `v-model`](#v-model-with-debounce-deprecated). -#### Replacing the `limitBy` Filter +#### 替换 `limitBy` 过滤器 -Instead of: +不再这样写: ``` html

      {{ item }}

      ``` -Use JavaScript's built-in [`.slice` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice#Examples) in a computed property: +在 computed 属性中使用js内置方法: [`.slice` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice#Examples): ``` html

      {{ item }}

      @@ -890,15 +890,15 @@ computed: { } ``` -#### Replacing the `filterBy` Filter +#### 替换 `filterBy` 过滤器 -Instead of: +不再这样写: ``` html

      {{ user.name }}

      ``` -Use JavaScript's built-in [`.filter` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter#Examples) in a computed property: +在 computed 属性中使用js内置方法 [`.filter` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter#Examples): ``` html

      {{ user.name }}

      @@ -914,7 +914,7 @@ computed: { } ``` -JavaScript's native `.filter` can also manage much more complex filtering operations, because you have access to the full power of JavaScript within computed properties. For example, if you wanted to find all active users and case-insensitively match against both their name and email: +js原生的 `.filter` 同样能实现很多复杂的过滤器操作,因为可以在计算 computed 属性中使用所有js方法。比如,想要通过匹配用户名字和电子邮箱地址(不区分大小写)找到用户: ``` js this.users.filter(function (user) { @@ -926,15 +926,15 @@ this.users.filter(function (user) { }) ``` -#### Replacing the `orderBy` Filter +#### 替换 `orderBy` 过滤器 -Instead of: +不这样写: ``` html

      {{ user.name }}

      ``` -Use [lodash's `orderBy`](https://lodash.com/docs/4.15.0#orderBy) (or possibly [`sortBy`](https://lodash.com/docs/4.15.0#sortBy)) in a computed property: +而是在 computed 属性中使用 [lodash's `orderBy`](https://lodash.com/docs/4.15.0#orderBy) (or possibly [`sortBy`](https://lodash.com/docs/4.15.0#sortBy)): ``` html

      {{ user.name }}

      @@ -948,7 +948,7 @@ computed: { } ``` -You can even order by multiple columns: +甚至可以字段排序: ``` js _.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc']) @@ -956,20 +956,20 @@ _.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc']) {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of filters being used inside directives. If you miss any, you should also see console errors.

      +

      升级方式

      +

      运行 migration helper 工具找到指令中使用的过滤器。如果有些没找到,看看控制台错误信息.

      {% endraw %} -### Filter Argument Syntax +### 过滤器参数符号 -Filters' syntax for arguments now better aligns with JavaScript function invocation. So instead of taking space-delimited arguments: +现在过滤器参数形式可以更好地与js函数调用方式一致,因此不用再用空格分隔参数: ``` html

      {{ date | formatDate 'YY-MM-DD' timeZone }}

      ``` -We surround the arguments with parentheses and delimit the arguments with commas: +现在用圆括号括起来并用逗号分隔: ``` html

      {{ date | formatDate('YY-MM-DD', timeZone) }}

      @@ -977,42 +977,42 @@ We surround the arguments with parentheses and delimit the arguments with commas {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the old filter syntax. If you miss any, you should also see console errors.

      +

      升级方式

      +

      运行 migration helper 工具找到老式的调用符号,如果有遗漏,请看控制台错误信息.

      {% endraw %} -### Built-In Text Filters deprecated +### 内置文本过滤器 弃用 -Although filters within text interpolations are still allowed, all of the filters have been removed. Instead, it's recommended to use more specialized libraries for solving problems in each domain (e.g. [`date-fns`](https://date-fns.org/) to format dates and [`accounting`](http://openexchangerates.github.io/accounting.js/) for currencies). +尽管插入文本内部的过滤器依然有效,但是所有内置过滤器已经移除了。取代的是,推荐在每个区域使用更专业的库来解决。(比如用 [`date-fns`](https://date-fns.org/) 来格式化日期,用 [`accounting`](http://openexchangerates.github.io/accounting.js/) 来格式化货币). -For each of Vue's built-in text filters, we go through how you can replace them below. The example code could exist in custom helper functions, methods, or computed properties. +对于每个内置过滤器,我们大概总结了下该怎么替换。代码示例可能写在自定义 helper 函数,方法或计算属性中。 -#### Replacing the `json` Filter +#### 替换 `json` 过滤器 -You actually don't need to for debugging anymore, as Vue will nicely format output for you automatically, whether it's a string, number, array, or plain object. If you want the exact same functionality as JavaScript's `JSON.stringify` though, then you can use that in a method or computed property. +不用一个个改,因为Vue已经帮你自动格式化好了,无论是字符串,数字还是数组,对象。如果想用js的 `JSON.stringify` 功能去实现,你也可以把它写在方法或者计算属性里面。 -#### Replacing the `capitalize` Filter +#### 替换 `capitalize` 过滤器 ``` js text[0].toUpperCase() + text.slice(1) ``` -#### Replacing the `uppercase` Filter +#### 替换 `uppercase` 过滤器 ``` js text.toUpperCase() ``` -#### Replacing the `lowercase` Filter +#### 替换 `lowercase` 过滤器 ``` js text.toLowerCase() ``` -#### Replacing the `pluralize` Filter +#### 替换 `pluralize` 过滤器 -The [pluralize](https://www.npmjs.com/package/pluralize) package on NPM serves this purpose nicely, but if you only want to pluralize a specific word or want to have special output for cases like `0`, then you can also easily define your own pluralize functions. For example: +NPM 上的 [pluralize](https://www.npmjs.com/package/pluralize) 库可以很好的实现这个功能。如果仅仅想将特定的词格式化成复数形式或者想给特定的值('0')指定特定的输出,也可以很容易地自定义复数格式化过滤器: ``` js function pluralizeKnife (count) { @@ -1028,18 +1028,18 @@ function pluralizeKnife (count) { #### Replacing the `currency` Filter -For a very naive implementation, you could just do something like this: +对于简单的问题,可以这样做: ``` js '$' + price.toFixed(2) ``` -In many cases though, you'll still run into strange behavior (e.g. `0.035.toFixed(2)` rounds up to `0.4`, but `0.045` rounds down to `0.4`). To work around these issues, you can use the [`accounting`](http://openexchangerates.github.io/accounting.js/) library to more reliably format currencies. +大多数情况下,仍然会有奇怪的现象(比如 `0.035.toFixed(2)` 向上舍入得到 `0.4`,但是 `0.045` 向下舍入却也得到 `0.4`)。解决这些问题可以使用 [`accounting`](http://openexchangerates.github.io/accounting.js/) 库来实现更多货币格式化。 {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the deprecated text filters. If you miss any, you should also see console errors.

      +

      升级方式

      +

      运行 migration helper 工具找到舍弃的过滤器。如果有些遗漏,请参考控制台错误信息.

      {% endraw %} @@ -1087,33 +1087,33 @@ You may notice that: ## Slots -### Duplicate Slots deprecated +### 重名的 Slots 弃用 -It is no longer supported to have ``s with the same name in the same template. When a slot is rendered it is "used up" and cannot be rendered elsewhere in the same render tree. If you must render the same content in multiple places, pass that content as a prop. +同一模板中的重名 `` 已经弃用。当一个 slot 已经被渲染过了,那么就不能在同一模板其它地方被再次渲染了。如果要在不同位置渲染同一内容,可一用prop来传递。 {% raw %}
      -

      Upgrade Path

      -

      Run your end-to-end test suite or app after upgrading and look for console warnings about duplicate slots v-model.

      +

      升级方式

      +

      更新后运行测试,查看 控制台警告信息 关于重名slots的提示 v-model

      {% endraw %} -### `slot` Attribute Styling deprecated +### `slot` 样式参数 deprecated -Content inserted via named `` no longer preserves the `slot` attribute. Use a wrapper element to style them, or for advanced use cases, modify the inserted content programmatically using [render functions](render-function.html). +通过具名 `` 插入的片段不再保持 `slot` 的参数。请用一个包裹元素来控制样式。或者用更高级方法:通过编程方式修改内容 :[render functions](render-function.html). {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find CSS selectors targeting named slots (e.g. [slot="my-slot-name"]).

      +

      升级方式

      +

      运行 migration helper 找到选择slots标签CSS选择器(例如: [slot="my-slot-name"]).

      {% endraw %} -## Special Attributes +## 特殊属性 -### `keep-alive` Attribute deprecated +### `keep-alive` 属性 deprecated -`keep-alive` is no longer a special attribute, but rather a wrapper component, similar to ``. For example: +`keep-alive` 不再是一个特殊属性而是一个包裹组件,类似于 ``比如: ``` html @@ -1121,7 +1121,7 @@ Content inserted via named `` no longer preserves the `slot` attribute. Us ``` -This makes it possible to use `` on multiple conditional children: +这样可以在含多种状态子组件中使用 `` : ``` html @@ -1130,9 +1130,9 @@ This makes it possible to use `` on multiple conditional children: ``` -

      When `` has multiple children, they should eventually evaluate to a single child. Any child other than the first one will simply be ignored.

      +

      当 ``含有不同子组件时,应该分别影响到每一个子组件。不仅是第一个而是所有的子组件都将被忽略。

      -When used together with ``, make sure to nest it inside: +和 ``一起使用时,确保把内容包裹在内: ``` html @@ -1144,28 +1144,28 @@ When used together with ``, make sure to nest it inside: {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find keep-alive attributes.

      +

      升级方式

      +

      运行 migration helper 工具找到keep-alive 属性。

      {% endraw %} -## Interpolation +## 计算插值//todaymark -### Interpolation within Attributes deprecated +### 属性内部的计算插值 弃用 -Interpolation within attributes is no longer valid. For example: +属性内部的计算插值已经不能再使用了: ``` html ``` -Should either be updated to use an inline expression: +应该写成行内表达式: ``` html ``` -Or a data/computed property: +或者计算属性: ``` html @@ -1181,86 +1181,86 @@ computed: { {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of interpolation used within attributes.

      +

      升级方式

      +

      运行 migration helper 找到属性内部的计算插值

      {% endraw %} -### HTML Interpolation deprecated +### HTML 计算插值 deprecated -HTML interpolations (`{% raw %}{{{ foo }}}{% endraw %}`) have been deprecated in favor of the [`v-html` directive](/api/#v-html). +HTML 的计算插值 (`{% raw %}{{{ foo }}}{% endraw %}`) 已经弃用,取代的是 [`v-html` 指令](/api/#v-html). {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find HTML interpolations.

      +

      升级方式

      +

      运行 migration helper 找到 HTML 计算插值。

      {% endraw %} -### One-Time Bindings deprecated +### 单次绑定sup>弃用 -One time bindings (`{% raw %}{{* foo }}{% endraw %}`) have been deprecated in favor of the new [`v-once` directive](/api/#v-once). +单次绑定 (`{% raw %}{{* foo }}{% endraw %}`) 已经弃用取代的是 [`v-once` directive](/api/#v-once). {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find one-time bindings.

      +

      升级方式

      +

      运行 migration helper工具找到单次绑定使用位置。

      {% endraw %} -## Reactivity +## 响应 ### `vm.$watch` -Watchers created via `vm.$watch` are now fired before the associated component rerenders. This gives you the chance to further update state before the component rerender, thus avoiding unnecessary updates. For example, you can watch a component prop and update the component's own data when the prop changes. +通过 `vm.$watch`创建的观察器现在将在组件渲染时被激活。这样可以让你在组件渲染前更新状态,不用做不必要的更新。比如可以通过观察组件的prop变化来更新组件本身的值。 -If you were previously relying on `vm.$watch` to do something with the DOM after a component updates, you can instead do so in the `updated` lifecycle hook. +如果以前通过 `vm.$watch` 在组件更新后与 DOM 交互,现在就可以通过`updated`生命周期钩子来做这些。 {% raw %}
      -

      Upgrade Path

      -

      Run your end-to-end test suite, if you have one. The failed tests should alert to you to the fact that a watcher was relying on the old behavior.

      +

      升级方式

      +

      运行测试,如果有依赖于老方法的观察器将弹出 failed tests

      {% endraw %} ### `vm.$set` -The former `vm.$set` behavior has been deprecated and it is now just an alias for [`Vue.set`](/api/#Vue-set). +曾经的 `vm.$set` 方法已经弃用,现在这样写: [`Vue.set`](/api/#Vue-set). {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the deprecated usage.

      +

      升级方式

      +

      运行 migration helper 工具找到过时的用法

      {% endraw %} ### `vm.$delete` -The former `vm.$delete` behavior has been deprecated and it is now just an alias for [`Vue.delete`](/api/#Vue-delete) +曾经的 `vm.$delete` 方法已经弃用,现在这样写: [`Vue.delete`](/api/#Vue-delete) {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of the deprecated usage.

      +

      升级方式

      +

      运行 migration helper 工具找到过时的用法

      {% endraw %} -### `Array.prototype.$set` deprecated +### `Array.prototype.$set` 弃用 -use Vue.set instead +用 Vue.set 代替 (console error, migration helper) {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of .$set on an array. If you miss any, you should see console errors from the missing method.

      +

      升级方式

      +

      运行 migration helper 工具找到数组上的.$set。如有遗漏请参考控制台错误信息

      {% endraw %} -### `Array.prototype.$remove` deprecated +### `Array.prototype.$remove` 弃用 -Use `Array.prototype.splice` instead. For example: +用 `Array.prototype.splice` 代替,例如: ``` js methods: { @@ -1271,7 +1271,7 @@ methods: { } ``` -Or better yet, just pass removal methods an index: +或者更好的方法,直接给除去的方法一个index参数: ``` js methods: { @@ -1283,49 +1283,49 @@ methods: { {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of .$remove on an array. If you miss any, you should see console errors from the missing method.

      +

      升级方式

      +

      运行 migration helper 工具找到数组上的.$remove。如有遗漏请参考控制台错误信息

      {% endraw %} -### `Vue.set` and `Vue.delete` on Vue instances deprecated +### Vue实例上的`Vue.set` 和 `Vue.delete`弃用 -Vue.set and Vue.delete can no longer work on Vue instances. It is now mandatory to properly declare all top-level reactive properties in the data option. If you'd like to delete properties on a Vue instance or its `$data`, just set it to null. +Vue.set 和 Vue.delete在实例上将不再起作用。现在都强制在实例的data选项中声明所有顶级响应值。如果删除实例属性或实例`$data`上的某个值,直接将它设置为null即可。 {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of Vue.set or Vue.delete on a Vue instance. If you miss any, they'll trigger console warnings.

      +

      升级方式

      +

      运行 migration helper 找到实例中的 Vue.setVue.delete 。如有遗漏请参考控制台错误信息.

      {% endraw %} -### Replacing `vm.$data` deprecated +### 替换 `vm.$data` 弃用 -It is now prohibited to replace a component instance's root $data. This prevents some edge cases in the reactivity system and makes the component state more predictable (especially with type-checking systems). +现在禁止替换实例的 $data。这样防止了响应系统的一些极端情况并且让组件状态更加可控可预测(特别是对于存在类型检查的系统)。 {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of overwriting vm.$data. If you miss any, console warnings will be emitted.

      +

      升级方式

      +

      运行 migration helper 工具找到覆盖 vm.$data的位置。如有遗漏请参考控制台警告信息

      {% endraw %} -### `vm.$get` deprecated +### `vm.$get` 弃用 -Just retrieve reactive data directly. +可以直接取回响应数据。 {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of vm.$get. If you miss any, you'll see console errors.

      +

      升级方式

      +

      运行 migration helper工具找到vm.$get。如有遗漏请参考 控制台错误信息

      {% endraw %} -## DOM-Focused Instance Methods +## 围绕 DOM 的实例方法 -### `vm.$appendTo` deprecated +### `vm.$appendTo` 弃用 -Use the native DOM API: +使用 DOM 原生方法: ``` js myElement.appendChild(vm.$el) @@ -1333,14 +1333,14 @@ myElement.appendChild(vm.$el) {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of vm.$appendTo. If you miss any, you'll see console errors.

      +

      升级方式

      +

      运行 migration helper 工具找到 vm.$appendTo。如果有遗漏可以参考控制台错误信息

      {% endraw %} -### `vm.$before` deprecated +### `vm.$before` 弃用 -Use the native DOM API: +使用 DOM 原生方法: ``` js myElement.parentNode.insertBefore(vm.$el, myElement) @@ -1348,20 +1348,20 @@ myElement.parentNode.insertBefore(vm.$el, myElement) {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of vm.$before. If you miss any, you'll see console errors.

      +

      升级方式

      +

      运行 migration helper工具找到 vm.$before。如有遗漏,请参考 控制台错误信息

      {% endraw %} ### `vm.$after` deprecated -Use the native DOM API: +使用 DOM 原生方法: ``` js myElement.parentNode.insertBefore(vm.$el, myElement.nextSibling) ``` -Or if `myElement` is the last child: +如果 `myElement` 是最后一个节点也可以这样写: ``` js myElement.parentNode.appendChild(vm.$el) @@ -1369,14 +1369,14 @@ myElement.parentNode.appendChild(vm.$el) {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of vm.$after. If you miss any, you'll see console errors.

      +

      升级方式

      +

      运行 migration helper 找到vm.$after。如有遗漏,请参考控制台错误信息.

      {% endraw %} ### `vm.$remove` deprecated -Use the native DOM API: +使用 DOM 原生方法: ``` js vm.$el.remove() @@ -1384,16 +1384,16 @@ vm.$el.remove() {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of vm.$remove. If you miss any, you'll see console errors.

      +

      升级方式

      +

      运行 migration helper找到vm.$remove.。如有遗漏,请参考控制台错误信息

      {% endraw %} -## Meta Instance Methods +## 底层实例方法 -### `vm.$eval` deprecated +### `vm.$eval` 弃用 -No real use. If you do happen to rely on this feature somehow and aren't sure how to work around it, post on [the forum](http://forum.vuejs.org/) for ideas. +尽量不要使用,如果必须使用该功能并且不肯定如何使用请参考 [the forum](http://forum.vuejs.org/)。 {% raw %}
      @@ -1402,33 +1402,33 @@ No real use. If you do happen to rely on this feature somehow and aren't sure ho
      {% endraw %} -### `vm.$interpolate` deprecated +### `vm.$interpolate` 弃用 -No real use. If you do happen to rely on this feature somehow and aren't sure how to work around it, post on [the forum](http://forum.vuejs.org/) for ideas. +尽量不要使用,如果必须使用该功能并且不肯定如何使用请参考 [the forum](http://forum.vuejs.org/)。 {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of vm.$interpolate. If you miss any, you'll see console errors.

      +

      升级方式

      +

      运行 migration helper 找到vm.$interpolate。如有遗漏请参考控制台错误信息.

      {% endraw %} -### `vm.$log` deprecated +### `vm.$log` 弃用 -Use the [Vue Devtools](https://github.com/vuejs/vue-devtools) for the optimal debugging experience. +请使用 [Vue Devtools](https://github.com/vuejs/vue-devtools) 感受最佳debug体验。 {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of vm.$log. If you miss any, you'll see console errors.

      +

      升级方式

      +

      运行 migration helper 找到 vm.$log。如有遗漏请参考控制台错误信息.

      {% endraw %} -## Instance DOM Options +## 实例 DOM 选项 -### `replace: false` deprecated +### `replace: false` 弃用 -Components now always replace the element they're bound to. To simulate the behavior of `replace: false`, you can wrap your root component with an element similar to the one you're replacing. For example: +现在组件总是会替换掉他们被绑定的元素。为了模仿`replace: false`的行为,可以用一个和将要替换元素类似的元素将根组件包裹起来: ``` js new Vue({ @@ -1437,7 +1437,7 @@ new Vue({ }) ``` -Or with a render function: +或者使用渲染函数: ``` js new Vue({ @@ -1454,21 +1454,21 @@ new Vue({ {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of replace: false.

      +

      升级方式

      +

      运行 migration helper 工具找到 replace: false使用的位置。

      {% endraw %} -## Global Config +## 全局配置 -### `Vue.config.debug` deprecated +### `Vue.config.debug` 弃用 -No longer necessary, since warnings come with stack traces by default now. +不再需要,因为警告信息将默认在堆栈信息里输出。 {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of Vue.config.debug.

      +

      升级方式

      +

      运行 migration helper 找到包含Vue.config.debug的地方。

      {% endraw %} @@ -1478,30 +1478,30 @@ Async is now required for rendering performance. {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of Vue.config.async.

      +

      升级方式

      +

      运行 migration helper工具找到使用Vue.config.async的实例。

      {% endraw %} -### `Vue.config.delimiters` deprecated +### `Vue.config.delimiters` 弃用 -This has been reworked as a [component-level option](/api/#delimiters). This allows you to use alternative delimiters within your app without breaking 3rd-party components. +以 [模板选项](/api/#delimiters)的方式使用。这样可以 可以在使用自定义分隔符时避免影响第三方模板。 {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of Vue.config.delimiters.

      +

      升级方式

      +

      运行 migration helper 工具找到使用Vue.config.delimiters的实例。

      {% endraw %} -### `Vue.config.unsafeDelimiters` deprecated +### `Vue.config.unsafeDelimiters` 弃用 -HTML interpolation has been [deprecated in favor of `v-html`](#HTML-Interpolation-deprecated). +HTML interpolation [替换为 `v-html`](#HTML-Interpolation-deprecated). {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of Vue.config.unsafeDelimiters. After this, the helper will also find instances of HTML interpolation so that you can replace them with `v-html`.

      +

      升级方式

      +

      运行 migration helper 工具找到 Vue.config.unsafeDelimiters。然后 helper 工具也会找到HTML插入的实例,可以用`v-HTML`来替换。

      {% endraw %} @@ -1509,37 +1509,44 @@ HTML interpolation has been [deprecated in favor of `v-html`](#HTML-Interpolatio ### `Vue.extend` with `el` deprecated -The el option can no longer be used in `Vue.extend`. It's only valid as an instance creation option. +el 选项不再在 `Vue.extend`中使用。仅在实例创建参数中可用。 {% raw %}
      -

      Upgrade Path

      -

      Run your end-to-end test suite or app after upgrading and look for console warnings about the el option with Vue.extend.

      +

      升级方式

      +

      更新后运行测试在控制台警告信息中找到关于带有Vue.extendel

      {% endraw %} -### `Vue.elementDirective` deprecated +### `Vue.elementDirective` 弃用 -Use components instead. +用组件来代替 {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of Vue.elementDirective.

      +

      升级方式

      +

      运行 migration helper 工具找到包含Vue.elementDirective的实例。

      {% endraw %} -### `Vue.partial` deprecated +### `Vue.partial` 弃用 Partials have been deprecated in favor of more explicit data flow between components, using props. Unless you're using a partial in a performance-critical area, the recommendation is to simply use a [normal component](components.html) instead. If you were dynamically binding the `name` of a partial, you can use a [dynamic component](http://vuejs.org/guide/components.html#Dynamic-Components). -If you happen to be using partials in a performance-critical part of your app, then you should upgrade to [functional components](render-function.html#Functional-Components). They must be in a plain JavaScript file (rather than in a `.vue` file) and are stateless and instanceless, just like partials. This makes rendering extremely fast. +If you happen to be using partials in a performance-critical part of your app, then you should upgrade to [functional components](render-function.html#Functional-Components). They must be in a plain JS/JSX file (rather than in a `.vue` file) and are stateless and instanceless, just like partials. This makes rendering extremely fast. A benefit of functional components over partials is that they can be much more dynamic, because they grant you access to the full power of JavaScript. There is a cost to this power however. If you've never used a component framework with render functions before, they may take a bit longer to learn. + {% raw %}
      -

      Upgrade Path

      -

      Run the migration helper on your codebase to find examples of Vue.partial.

      +

      升级方式

      +

      运行 migration helper 工具找到包含 Vue.partial的实例

      {% endraw %} + +*** + +> 原文: http://vuejs.org/guide/migration.html + +*** \ No newline at end of file diff --git a/src/guide/mixins.md b/src/guide/mixins.md index ad0758f508..6a62abd12a 100644 --- a/src/guide/mixins.md +++ b/src/guide/mixins.md @@ -140,3 +140,9 @@ Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) { } } ``` + +*** + +> 原文: http://vuejs.org/guide/mixins.html + +*** diff --git a/src/guide/plugins.md b/src/guide/plugins.md index b709cbb427..8398dc8bd4 100644 --- a/src/guide/plugins.md +++ b/src/guide/plugins.md @@ -79,3 +79,10 @@ Vue.use(VueRouter) ``` Checkout [awesome-vue](https://github.com/vuejs/awesome-vue#libraries--plugins) for a huge collection of community-contributed plugins and libraries. + + +*** + +> 原文: http://vuejs.org/guide/plugins.html + +*** \ No newline at end of file diff --git a/src/guide/reactivity.md b/src/guide/reactivity.md index ac7abd9e0f..fe2e4db36e 100644 --- a/src/guide/reactivity.md +++ b/src/guide/reactivity.md @@ -290,3 +290,9 @@ Vue.component('example', { } }) ``` + +*** + +> 原文: http://vuejs.org/guide/reactivity.html + +*** diff --git a/src/guide/render-function.md b/src/guide/render-function.md index 9a4e451cec..d69d701ba2 100644 --- a/src/guide/render-function.md +++ b/src/guide/render-function.md @@ -159,6 +159,20 @@ One thing to note: similar to how `v-bind:class` and `v-bind:style` have special nativeOn: { click: this.nativeClickHandler }, + // Custom directives. Note that the binding's + // oldValue cannot be set, as Vue keeps track + // of it for you. + directives: [ + { + name: 'my-custom-directive', + value: '2' + expression: '1 + 1', + arg: 'foo', + modifiers: { + bar: true + } + } + ], // The name of a slot if the child of a component slot: 'name-of-slot' // 其他特殊顶层属性 @@ -481,3 +495,9 @@ console.error = function (error) { } {% endraw %} + +*** + +> 原文: http://vuejs.org/guide/render-function.html + +*** diff --git a/src/guide/routing.md b/src/guide/routing.md index ef96b55399..78849bbb91 100644 --- a/src/guide/routing.md +++ b/src/guide/routing.md @@ -40,3 +40,9 @@ new Vue({ ## 整合第三方路由 如果有非常喜欢的第三方路由,如[Page.js](https://github.com/visionmedia/page.js)或者 [Director](https://github.com/flatiron/director), 整合[很简单](https://github.com/chrisvfritz/vue-2.0-simple-routing-example/compare/master...pagejs). 这有个 [复杂示例](https://github.com/chrisvfritz/vue-2.0-simple-routing-example/tree/pagejs) 用了Page.js. + +*** + +> 原文: http://vuejs.org/guide/routing.html + +*** diff --git a/src/guide/single-file-components.md b/src/guide/single-file-components.md index a9f52713e5..7b65ddb0b5 100644 --- a/src/guide/single-file-components.md +++ b/src/guide/single-file-components.md @@ -98,3 +98,9 @@ NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js ``` bash NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o build.css ] -e main.js | uglifyjs -c -m > build.js ``` + +*** + +> 原文: http://vuejs.org/guide/single-file-components.html + +*** diff --git a/src/guide/ssr.md b/src/guide/ssr.md index 29325827dc..6c02f6df08 100644 --- a/src/guide/ssr.md +++ b/src/guide/ssr.md @@ -330,8 +330,8 @@ Vue.component({ - [vue-server-renderer 文档](https://www.npmjs.com/package/vue-server-renderer#api):更多细节在这里,和更多先进的主题一起的文档。 例如 [preventing cross-request contamination](https://www.npmjs.com/package/vue-server-renderer#why-use-bundlerenderer) 和 [添加独立的服务构建](https://www.npmjs.com/package/vue-server-renderer#creating-the-server-bundle) - [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0): 明确整合了 所有主要的Vue库和概念在单个应用中 --------------------------------------------------------------------------------- +*** -> 原文: http://rc.vuejs.org/guide/ssr.html +> 原文: http://vuejs.org/guide/ssr.html *** diff --git a/src/guide/state-management.md b/src/guide/state-management.md index 2d84c645cf..067fca63d8 100644 --- a/src/guide/state-management.md +++ b/src/guide/state-management.md @@ -4,17 +4,17 @@ type: guide order: 21 --- -## Official Flux-Like Implementation +## 类 Flux 状态管理的官方实现 -Large applications can often grow in complexity, due to multiple pieces of state scattered across many components and the interactions between them. To solve this problem, Vue offers [vuex](https://github.com/vuejs/vuex): our own Elm-inspired state management library. It even integrates into [vue-devtools](https://github.com/vuejs/vue-devtools), providing zero-setup access to time travel. +由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue 提供 [vuex](https://github.com/vuejs/vuex): 我们有受到 Elm 启发的状态管理库。vuex 甚至融入了 [vue-devtools](https://github.com/vuejs/vue-devtools),无需配置即可访问时光旅行。 -### Information for React Developers +### React 的开发者请参考以下信息 -If you're coming from React, you may be wondering how vuex compares to [redux](https://github.com/reactjs/redux), the most popular Flux implementation in that ecosystem. Redux is actually view-layer agnostic, so it can easily be used with Vue via some [simple bindings](https://github.com/egoist/revue). Vuex is different in that it _knows_ it's in a Vue app. This allows it to better integrate with Vue, offering a more intuitive API and improved development experience. +如果你是来自 React 的开发者,你可能会对 vuex 和 [redux](https://github.com/reactjs/redux) 间的差异表示关注,redux 是 React 生态环境中最流行的 Flux 实现。Redux 事实上无法感知视图层,所以它能够轻松的通过一些[简单绑定](https://github.com/egoist/revue)和Vue一起使用。vuex区别在于它是一个专门为 vue 应用所设计。这使得它能够更好地和vue进行整合,同时提供直观的API和改善过的开发体验。 -## Simple State Management from Scratch +## 来自 Scratch 的简单状态管理 -It is often overlooked that the source of truth in Vue applications is the raw `data` object - a Vue instance simply proxies access to it. Therefore, if you have a piece of state that should be shared by multiple instances, you can simply share it by identity: +经常被忽略的是,Vue 应用中原始 `数据` 对象的实际来源 - 当访问数据对象时,一个 Vue 实例只是简单的代理访问。所以,如果你有一处需要被多个实例间共享的状态,可以简单地通过维护一份数据来实现共享: ``` js const sourceOfTruth = {} @@ -28,9 +28,9 @@ const vmB = new Vue({ }) ``` -Now whenever `sourceOfTruth` is mutated, both `vmA` and `vmB` will update their views automatically. Subcomponents within each of these instances would also have access via `this.$root.$data`. We have a single source of truth now, but debugging would be a nightmare. Any piece of data could be changed by any part of our app at any time, without leaving a trace. +现在当 `sourceOfTruth` 发生变化,`vmA` 和 `vmB` 都将自动的更新引用它们的视图。子组件们的每个实例也会通过 `this.$root.$data` 去访问。现在我们有了唯一的实际来源,但是,调试将会变为噩梦。任何时间,我们应用中的任何部分,在任何数据改变后,都不会留下变更过的痕迹。 -To help solve this problem, we can adopt a simple **store pattern**: +如何解决这个问题呢?我们采用一个简单的 **store 模式**: ``` js var store = { @@ -49,9 +49,9 @@ var store = { } ``` -Notice all actions that mutate the store's state are put inside the store itself. This type of centralized state management makes it easier to understand what type of mutations could happen and how are they triggered. When something goes wrong, we'll also now have a log of what happened leading up to the bug. +需要注意,所有 store 中 state 的改变,都放置在 store 自身的 action 中去管理。这种类型的集中式状态管理能够被更容易地理解,是哪部分 mutation 发生变更,以及 mutation 是如何被触发。当错误出现时,我们现在也会有一个 log 记录 bug 之前发生了什么。 -In additon, each instance/component can still own and manage its own private state: +此外,每个实例/组件仍然可以拥有和管理自己的私有状态: ``` js var vmA = new Vue({ @@ -69,10 +69,16 @@ var vmB = new Vue({ }) ``` -![State Management](/images/state.png) +![状态管理](/images/state.png) -

      It's important to note that you should never replace the original state object in your actions - the components and the store need to share reference to the same object in order for mutations to be observed.

      +

      重要的是,注意你不应该在 action 中 替换原始的状态对象 - 组件和 store 需要引用同一个共享对象,变更才能够被观察

      -As we continue developing the convention where components are never allowed to directly mutate state that belongs to a store, but should instead dispatch events that notify the store to perform actions, we eventually arrive at the [Flux](https://facebook.github.io/flux/) architecture. The benefit of this convention is we can record all state mutations happening to the store and implement advanced debugging helpers such as mutation logs, snapshots, and history re-rolls / time travel. +接着我们继续延伸约定,组件不允许直接修改属于 store 实例的 state,而是应该使用分发 (dispatch) 事件通知 store 执行 action 作为替代,我们最终达成了 [Flux](https://facebook.github.io/flux/) 架构。这样约定的好处是,我们能够记录所有 store 中发生的 state 改变,同时实现能做到记录变更 (mutation) 、保存状态快照、历史回滚/时光旅行的先进的调试工具。 -This brings us full circle back to [vuex](https://github.com/vuejs/vuex), so if you've read this far it's probably time to try it out! +[vuex](https://github.com/vuejs/vuex) 给我们带来了整个循环机制,如果你读了这么久,不妨去尝试一下它! + +*** + +> 原文: http://vuejs.org/guide/state-management.html + +*** diff --git a/src/guide/syntax.md b/src/guide/syntax.md index 4641794ac7..0fbc8ef9de 100644 --- a/src/guide/syntax.md +++ b/src/guide/syntax.md @@ -4,59 +4,59 @@ type: guide order: 4 --- -Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance's data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers. +Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。 -Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal amount of components to re-render and apply the minimal amount of DOM manipulations when the app state changes. +在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,在应用状态改变时,Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 -If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also [directly write render functions](/guide/render-function.html) instead of templates, with optional JSX support. +如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,[直接写渲染(render)函数](/guide/render-function.html),使用可选的 JSX 语法。 -## Interpolations +## 插值 -### Text +### 文本 -The most basic form of data binding is text interpolation using the "Mustache" syntax (double curly braces): +数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值: ``` html Message: {{ msg }} ``` -The mustache tag will be replaced with the value of the `msg` property on the corresponding data object. It will also be updated whenever the data object's `msg` property changes. +Mustache 标签将会被替代为对应数据对象上 `msg` 属性的值。无论合适绑定的数据对象上 `msg` 属性发生了改变,插值处的内容都会更新。 -You can also perform one-time interpolations that do not update on data change by using the [v-once directive](/api/#v-once), but keep in mind this will also affect any binding on the same node: +通过使用 [v-once 指令](/api/#v-once),你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定: ``` html This will never change: {{ msg }} ``` -### Raw HTML +### 纯 HTML -The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the `v-html` directive: +双大括号会将数据解释为纯文本,而非 HTML。为了输出真正的 HTML,你需要使用 `v-html` 指令: ``` html
      ``` -The contents are inserted as plain HTML - data bindings are ignored. Note that you cannot use `v-html` to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition. +被插入的内容都会被当做 HTML —— 数据绑定会被忽略。注意,你不能使用 `v-html` 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元。 -

      Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use HTML interpolation on trusted content and **never** on user-provided content.

      +

      你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。请只对可信内容使用 HTML 插值,**绝不要**对用户提供的内容插值。

      -### Attributes +### 属性 -Mustaches cannot be used inside HTML attributes, instead use a [v-bind directive](/api/#v-bind): +Mustache 不能在 HTML 属性中使用,应使用 [v-bind 指令](/api/#v-bind): ``` html
      ``` -It also works for boolean attributes - the attribute will be removed if the condition evaluates to a falsy value: +这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除: ``` html ``` -### Using JavaScript Expressions +### 使用 JavaScript 表达式 -So far we've only been binding to simple property keys in our templates. But Vue.js actually supports the full power of JavaScript expressions inside all data bindings: +迄今为止,在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。 ``` html {{ number + 1 }} @@ -68,29 +68,31 @@ So far we've only been binding to simple property keys in our templates. But Vue
      ``` -These expressions will be evaluated as JavaScript in the data scope of the owner Vue instance. One restriction is that each binding can only contain **one single expression**, so the following will **NOT** work: +这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含**单个表达式**,所以下面的例子都**不会**生效。 ``` html - + {{ var a = 1 }} - + {{ if (ok) { return message } }} ``` +

      模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如 `Math` 和 `Date`。你不应该在模板表达式中视图访问用户定义的全局变量。

      +

      Template expressions are sandboxed and only have access to a whitelist of globals such as `Math` and `Date`. You should not attempt to access user defined globals in template expressions.

      -### Filters +### 过滤器 -Vue.js allows you to define filters that can be used to apply common text formatting. Filters should be appended to the end of a **mustache interpolation**, denoted by the "pipe" symbol: +Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。过滤器应该被添加在 **mustache 插值**的尾部,由“管道符”指示: ``` html {{ message | capitalize }} ``` -

      Vue 2.x filters can only be used inside mustache bindings. To achieve the same behavior inside directive bindings, you should use [Computed properties](/guide/computed.html) instead.

      +

      Vue 2.x 中,过滤器只能在 mustache 绑定中使用。为了在指令绑定中实现同样的行为,你应该使用[计算属性](/guide/computed.html)。

      -The filter function always receives the expression's value as the first argument. +过滤器函数总接受表达式的值作为第一个参数。 ``` js new Vue({ @@ -105,81 +107,86 @@ new Vue({ }) ``` -Filters can be chained: +过滤器可以串联: ``` html {{ message | filterA | filterB }} ``` -Filters are JavaScript functions, therefore they can take arguments: +过滤器是 JavaScript 函数,因此可以接受参数: ``` html {{ message | filterA('arg1', arg2) }} ``` -Here, the plain string `'arg1'` will be passed into the filter as the second argument, and the value of expression `arg2` will be evaluated and passed in as the third argument. +这里,字符串 `'arg1'` 将传给过滤器作为第二个参数,`arg2` 表达式的值将被求值然后传给过滤器作为第三个参数。 -## Directives +## 指令 -Directives are special attributes with the `v-` prefix. Directive attribute values are expected to be **a single JavaScript expression** (with the exception for `v-for`, which will be discussed later). A directive's job is to reactively apply side effects to the DOM when the value of its expression changes. Let's review the example we saw in the introduction: +指令(Directives)是带有 `v-` 前缀的特殊属性。指令属性的值预期是**单一 JavaScript 表达式**(除了 `v-for`,之后再讨论)。指令的职责就是当其表达式的值改变时响应地将某些行为应用到 DOM 上。让我们回顾一下在介绍里的例子: ``` html

      Now you see me

      ``` -Here, the `v-if` directive would remove/insert the `

      ` element based on the truthiness of the value of the expression `seen`. +这里,`v-if` 指令将根据表达式 `seen` 的值的真假来移除/插入 `

      ` 元素。 -### Arguments +### 参数 -Some directives can take an "argument", denoted by a colon after the directive name. For example, the `v-bind` directive is used to reactively update an HTML attribute: +一些指令能接受一个“参数”,在指令后以冒号指明。例如,`v-bind` 指令被用来响应地更新 HTML 属性: ``` html ``` -Here `href` is the argument, which tells the `v-bind` directive to bind the element's `href` attribute to the value of the expression `url`. +在这里 `href` 是参数,告知 `v-bind` 指令将该元素的 `href` 属性与表达式 `url` 的值绑定。 -Another example is the `v-on` directive, which listens to DOM events: +另一个例子是 `v-on` 指令,它用于监听 DOM 事件: ``` html ``` -Here the argument is the event name to listen to. We will talk about event handling in more detail too. +在这里参数是监听的事件名。我们也会更详细地讨论事件处理。 -### Modifiers +### 修饰符 -Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the `.prevent` modifier tells the `v-on` directive to call `event.preventDefault()` on the triggered event: +修饰符(Modifiers)是以半角句号 `.` 指明的特殊后缀,用于指出一个指定应该以特殊方式绑定。例如,`.prevent` 装饰符告诉 `v-on` 指令对于触发的事件调用 `event.preventDefault()`: ``` html

      ``` -We will see more use of modifiers later when we take a more thorough look at `v-on` and `v-model`. +之后当我们更深入地了解 `v-on` 与 `v-model`时,会看到更多装饰符的使用。 -## Shorthands +## 缩写 -The `v-` prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the `v-` prefix becomes less important when you are building an [SPA](https://en.wikipedia.org/wiki/Single-page_application) where Vue.js manages every template. Therefore, Vue.js provides special shorthands for two of the most often used directives, `v-bind` and `v-on`: +`v-` 前缀可作为一种模板中标识 Vue 特性的视觉暗示。当你使用 Vue.js 为现有的标记添加动态行为时,它会很有用,但对于一些频繁使用的指令来说略显冗余。同时,当搭建 Vue.js 管理所有模板的 [SPA](https://en.wikipedia.org/wiki/Single-page_application) 时,`v-` 前缀也变得没那么重要了。因此,Vue.js 为两个最为常用的指令提供了特别的缩写: -### `v-bind` Shorthand +### `v-bind` 缩写 ``` html - + - + ``` - -### `v-on` Shorthand +### `v-on` 缩写 ``` html - + - + ``` -They may look a bit different from normal HTML, but `:` and `@` are valid chars for attribute names and all Vue.js supported browsers can parse it correctly. In addition, they do not appear in the final rendered markup. The shorthand syntax is totally optional, but you will likely appreciate it when you learn more about its usage later. +它们看起来可能与普通的 HTML 略有不同,但 `:` 与 `@` 对于属性名来说都是合法字符,在所有支持 Vue.js 的浏览器都能被正确地解析。而且,它们不会出现在最终渲染的标记。缩写语法是完全可选的,但随着你更深入地了解它们的作用,你会庆幸拥有它们。 + +*** + +> 原文: http://vuejs.org/guide/syntax.html + +*** diff --git a/src/guide/transitioning-state.md b/src/guide/transitioning-state.md index 67cea4d36b..d453fd98ad 100644 --- a/src/guide/transitioning-state.md +++ b/src/guide/transitioning-state.md @@ -527,3 +527,9 @@ new Vue({ 我们能在组件中结合使用这一节讲到各种过渡策略和 Vue [内建的过渡系统](transitions.html)。总之,对于完成各种过渡动效几乎没有阻碍。 +*** + +> 原文: http://vuejs.org/guide/transitioning-state.html + +*** + diff --git a/src/guide/transitions.md b/src/guide/transitions.md index 7d625bfea4..f2b126c09e 100644 --- a/src/guide/transitions.md +++ b/src/guide/transitions.md @@ -1674,7 +1674,7 @@ new Vue({ *** -> 原文:http://rc.vuejs.org/guide/transitions.html +> 原文:http://vuejs.org/guide/transitions.html *** diff --git a/src/guide/unit-testing.md b/src/guide/unit-testing.md index ff8743adbe..61ac1c067f 100644 --- a/src/guide/unit-testing.md +++ b/src/guide/unit-testing.md @@ -6,11 +6,10 @@ order: 22 ## 配置和工具 -Anything compatible with a module-based build system will work, but if you're looking for a specific recommendation, try the [Karma](http://karma-runner.github.io) test runner. It has a lot of community plugins, including support for [Webpack](https://github.com/webpack/karma-webpack) and [Browserify](https://github.com/Nikku/karma-browserify). For detailed setup, please refer to each project's respective documentation, though these example Karma configurations for [Webpack](https://github.com/vuejs/vue-loader-example/blob/master/build/karma.conf.js) and [Browserify](https://github.com/vuejs/vueify-example/blob/master/karma.conf.js) may help you get started. +任何兼容基于模块的构建系统都可以正常使用,但如果你需要一个具体的建议,可以使用[Karma](http://karma-runner.github.io)进行自动化测试。它有很多社区版的插件,包括对[Webpack](https://github.com/webpack/karma-webpack)和[Browserify](https://github.com/Nikku/karma-browserify)的支持。更多详细的安装步骤,请参考各项目的安装文档,通过这些Karma配置的例子可以快速帮助你上手([Webpack](https://github.com/vuejs/vue-loader-example/blob/master/build/karma.conf.js)配置,[Browserify](https://github.com/vuejs/vueify-example/blob/master/karma.conf.js)配置)。 ## 简单的断言 -In terms of code structure for testing, you don't have to do anything special in your components to make them testable. Just export the raw options: 在测试的代码结构方面,你不必在你的组件中做任何特殊的事情使它们可测试。主要导出原始设置就可以了: ``` html @@ -71,7 +70,7 @@ describe('MyComponent', () => { ## 编写可被测试的组件 -A lot of components' render output are primarily determined by the props they receive. In fact, if a component's render output solely depends on its props, it becomes quite straightforward to test, similar to asserting the return value of a pure function with different arguments. Take an contrived example: +很多组件的渲染输出由它的props决定。事实上,如果一个组件的渲染输出完全取决于它的props,那么它会让测试变得简单, 就好像断言不同参数的纯函数的返回值。看下面这个例子: ``` html