From 3a3f7635b18440131bfa52a70832748dee00cb9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E8=82=A1?= Date: Sun, 25 Jan 2015 23:56:16 +0800 Subject: [PATCH 01/28] fixed hexo version --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index fa539e6626..2f83ce2d8b 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "hexo", - "version": "2.8.3", + "version": "2.5.7", "private": true, "dependencies": { "hexo-renderer-ejs": "^0.1.0", "hexo-renderer-marked": "^0.1.0", "hexo-renderer-stylus": "^0.1.0" } -} +} \ No newline at end of file From 884a575f8d1e215bee5599c2e15113219da34aa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E8=82=A1?= Date: Mon, 26 Jan 2015 01:57:52 +0800 Subject: [PATCH 02/28] translated guide/index --- source/guide/index.md | 87 +++++++++++++++++++++++++++++++++++++------ 1 file changed, 75 insertions(+), 12 deletions(-) diff --git a/source/guide/index.md b/source/guide/index.md index e24f21ffb5..126eae9c23 100644 --- a/source/guide/index.md +++ b/source/guide/index.md @@ -1,113 +1,168 @@ -title: Getting Started +title: 起步 type: guide order: 2 --- -## Introduction +## 介绍 +Vue.js 是一个用于创建 web 交互界面的库。 +从技术角度讲,Vue.js 专注于 MVVM 模型的 [ViewModel](#ViewModel) 层。它通过双向数据绑定把 [View](#View) 层和 [Model](#Model) 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了 [Directives](#Directives) 和 [Filters](#Filters)。 +从哲学角度讲,我们希望创造的价值,在于通过一个尽量简单的 API 产生可反映的数据绑定和可组合的视图组件。它不是一个大而全的框架——它为简单灵活的视图层而生。您可以独立使用它快速开发原型、也可以混合别的库做更多的事情。它同时天然的适用于诸如 Firebase 的 no-backend 服务。 +Vue.js 的 API 设计深受 [AngularJS]、[KnockoutJS]、[Ractive.js] 和 [Rivets.js] 的影响。尽管有不少雷同,但我们相信 Vue.js 能够通过在简约和功能两者之间的巧妙契合,体现出其特殊的价值。 +即便您已经熟悉了一些这类的库或框架,我们还是推荐您继续阅读接下来的概览,因为您对它们的认识也许和 Vue.js 中的情景不尽相同。 -## Concepts Overview +## 概览 ### ViewModel +一个同步 Model 和 View 的对象。在 Vue.js 中,每个 Vue 实例都是一个 ViewModel。它们是通过构造函数 `Vue` 或其子类被初始化出来的。 ```js var vm = new Vue({ /* options */ }) ``` +这是您作为一个开发者在使用 Vue.js 时主要打交道的对象。更多的细节请移步至[Vue 构造函数](/api/)。 -### View +### 视图 (View) +实际被 Vue 实例管理的 DOM。 ```js vm.$el // The View ``` +Vue.js 使用基于 DOM 的模板。每个 Vue 实例都关联着一个相应的 DOM 元素。当一个 Vue 实例被创建时,它会递归便利根元素的所有子结点,同时完成必要的数据绑定。当这个视图被编译之后,它就会自动反映数据的变化。 +在使用 Vue.js 时,除了自定义的指令 (directives) 您几乎不必直接接触 DOM (稍后会有解释)。当数据发生变化时,视图将会自动触发更新。这些更新的颗粒度是精确到 textNode 的。同时为了更好的性能,这些更新是批量异步执行的。 -### Model +### 模型 (Model) +一个轻微改动过的普通 JavaScript 对象。 ```js vm.$data // The Model ``` +Vue.js 中的模型就是普通的 JavaScript 对象——也可以称为**数据对象**。你可以操作它们的属性,同时 Vue 实例观察到这些属性的变化时也会被提示。Vue.js 把数据对象的属性都转换成了 ES5 中的 getter/setters,以此达到无副作用的数据观察效果。无需 dirty checking,也不需要刻意给 Vue 任何更新视图的信号。每当数据变化时,视图都会在下一帧自动更新。 +Vue 实例代理了它们观察到的数据对象的所有属性。所以一旦一个对象 `{ a: 1 }` 被观察,那么 `vm.$data.a` 和 `vm.a` 将会返回相同的值,而设置 `vm.a = 2` 则也会修改 `vm.$data`。 +数据对象有时是突变的,所以修改数据的引用和修改 `vm.$data` 具有相同的效果。这也意味着多个 Vue 实例可以观察同一份数据。在较大型的应用程序中,我们也推荐将 Vue 实例作为纯粹的视图看待,同时把数据处理逻辑放在更独立的外部数据层。 +值得提醒的是,一旦数据被观察,Vue.js 就不会再侦测到新加入或删除的属性了。作为弥补,我们会为被观察的对象增加 `$add` 和 `$delete` 方法。 -### Directives +### 指令 (Directives) +带特殊前缀的 HTML 特性,可以让 Vue.js 对一个 DOM 元素做各种处理。 ```html
``` +这里的 div 元素有一个 `v-text` 指令,其值为 `message`。Vue.js 会让该 div 的文本内容是和 Vue 实例中的 `message` 属性值保持一致。 +Directives 可以封装任何 DOM 操作。比如 `v-attr` 会操作一个元素的特性;`v-repeat` 会基于一个数组克隆某个元素;`v-on` 会绑定事件等。稍后会有更多的介绍。 -### Mustache Bindings +### Mustache 风格的绑定 +你也可以使用 mustache 风格的绑定,不管在文本中还是在特性中。它们在底层会被转换成 `v-text` 和 `v-attr` 的指令。比如: ```html
Hello {{name}}!
``` +这很方便,不过有一些注意事项: -

The `src` attribute on an `` element makes an HTTP request when a value is set, so when the template is first parsed it will result in a 404. In this case `v-attr` is preferred.

+ +

一个 `` 的 `src` 特性在赋值时会产生一个 HTTP 请求,所以当模板在第一次被解析时会产生一个 404 请求。这种情况下更适合用 `v-attr`。

-

Internet Explorer will remove invalid inline `style` attributes when parsing HTML, so always use `v-style` when binding inline CSS if you want to support IE.

+ +

Internet Explorer 在解析 HTML 时会移除非法的内联 `style` 特性,所以如果你想支持 IE,请在绑定内联 CSS 的时候始终使用 `v-style`。

+ +你可以使用三对花括号来回避 HTML 代码,而这种写法会在底层转换为 `v-html`: ``` html {{{ safeHTMLString }}} ``` +不过这种用法会留下 XSS 攻击的隐患,所以建议只对绝对信任的数据来源使用三对花括号的写法,或者先通过自定义的过滤器 (filter) 对不可信任的 HTML 进行过滤。 +最后,你可以在你的 mustache 绑定里加入 `*` 来注明这是一个一次性撰写的数据,这样的话它就不会反应后续的数据变化: ``` html {{* onlyOnce }} ``` -### Filters +### 过滤器 (Filters) +过滤器是用于在更新视图之前处理原始值的函数。它们通过一个“管道”在指令或绑定中进行处理: ```html
{{message | capitalize}}
``` +这样在 div 的文本内容被更新之前,`message` 的值会先传给 `capitalizie` 函数处理。更多内容可移步至[深入了解过滤器 (Filters)](/guide/filters.html)。 -### Components +### 组件 (Components) +在 Vue.js,每个组件都是一个简单的 Vue 实例。一个树形嵌套的各种组件就代表了你的应用程序的各种接口。通过 `Vue.extend` 返回的自定义构造函数可以把这些组件实例化,不过更声明式的建议是通过 `Vue.component(id, constructor)` 注册这些组件。一旦组件被注册,它们就可以在 Vue 实例的模板中以声明的形式嵌套使用了。 ``` html
@@ -115,9 +170,11 @@ In Vue.js, every component is simply a Vue instance. Components form a nested tr
``` +这个简单的机制使得我们可以以类似 [Web Components](http://www.w3.org/TR/components-intro/) 的声明形式对 Vue 实例进行复用和组合,无需最新版的浏览器或笨重的 polyfills。通过将一个应用程序拆分成简单的组件,代码库可以被尽可能的解耦,同时更易于维护。更多内容可移步至[组件系统](/guide/components.html)。 -## A Quick Example +## 一个简单的例子 ``` html
@@ -174,11 +231,17 @@ var demo = new Vue({ }) +也可以通过 [jsfiddle](http://jsfiddle.net/yyx990803/yMv7y/) 查看。 +你可以点击一个 todo 来开关它,也可以打开你的浏览器命令行直接操作 `demo` 对象:比如改变 `demo.title`、向 `demo.todos` 里放入一个新的对象、或开关某个 todo 的 `done` 状态值。 +也许你脑海中还有一些问题,别担心,我们稍后都会提到的。接下来可移步至:[深入了解指令 (Directives)](/guide/directives.html)。 [AngularJS]: http://angularjs.org [KnockoutJS]: http://knockoutjs.com From a7317fac828cf049e9a735a38cbf9dc36536b082 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E8=82=A1?= Date: Mon, 26 Jan 2015 02:08:28 +0800 Subject: [PATCH 03/28] translated guide/installation --- source/guide/installation.md | 30 ++++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/source/guide/installation.md b/source/guide/installation.md index 0ba09cf137..72005ca09f 100644 --- a/source/guide/installation.md +++ b/source/guide/installation.md @@ -1,4 +1,4 @@ -title: Installation +title: 安装 type: guide order: 1 vue_version: 0.11.4 @@ -7,32 +7,36 @@ min_size: 55.18 gz_size: 18.11 --- -> **Compatibility Note:** Vue.js does not support IE8 and below. +> **兼容性提示:**Vue.js 不支持 IE8 及其以下版本。 -## Standalone +## 直接下载 +直接下载并写入一个 script 标签中,`Vue` 就会被注册为一个全局变量。
-Development Version{{dev_size}}kb, plenty of comments and debug/warning messages. +开发者版本{{dev_size}}kb, plenty of comments and debug/warning messages. -Production Version{{min_size}}kb minified / {{gz_size}}kb gzipped +生产版本{{min_size}}kb minified / {{gz_size}}kb gzipped
+也可以在 [cdnjs](//cdnjs.cloudflare.com/ajax/libs/vue/{{vue_version}}/vue.min.js) 使用 (版本更新会略滞后)。 ## NPM ``` bash $ npm install vue -# for edge version: +# 获得尖端版本: $ npm install yyx990803/vue#dev ``` ## Bower ``` bash -# only stable version is available through Bower +# Bower 只能够获得稳定版本 $ bower install vue ``` @@ -40,7 +44,7 @@ $ bower install vue ```js var Vue = require('yyx990803/vue') -// for edge version: +// 获得尖端版本: var Vue = require('yyx990803/vue@dev') ``` @@ -48,14 +52,16 @@ var Vue = require('yyx990803/vue@dev') ``` bash $ component install yyx990803/vue -# for edge version: +# 获得尖端版本: $ component install yyx990803/vue@dev ``` -## AMD Module Loaders +## AMD 模块加载器 +直接下载或通过 Bower 安装的版本可以用 UMD 包裹起来直接作为 AMD 模块使用。 -## Ready? +## 准备好了吗? -[Let's Get Started](/guide/). \ No newline at end of file +[走起!](/guide/) \ No newline at end of file From 7e3b4c7669f7b00681e08d7cb910a572d1e88ce1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E8=82=A1?= Date: Mon, 26 Jan 2015 02:27:22 +0800 Subject: [PATCH 04/28] translated perf --- source/perf/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/source/perf/index.md b/source/perf/index.md index 01953b6cbf..add5b70900 100644 --- a/source/perf/index.md +++ b/source/perf/index.md @@ -1,14 +1,14 @@ -title: Performance Comparisons +title: 性能对比 --- -## TodoMVC Benchmark +## TodoMVC 跑分 > *Last Updated: 2014-10-12* -Looking for the TodoMVC Benchmark? It's been removed because after discussion with some other framework authors we have agreed that: +找不到 TodoMVC 跑分了?因为我们已经把它去掉了。在跟一些框架的作者交流之后,我们达成了以下几点共识: -1. The original intention of these benchmarks were for comparing Browser performance rather than that of frameworks. The "synchrorously trigger an action xxx times" test routine doesn't reflect meaningful real world user actions. +1. 这些跑分的初衷是比较浏览器们的性能,而不是比较框架们的性能。“同时触发一个动作多少次”的测试惯例并不能反映用户真实的使用场景。 -2. Due to internal implementation differences, frameworks that uses async rendering (e.g. Vue, Om, Mercury) gains the advantage by skipping part of the calculations that happened in the same event loop. The real world user experience doesn't demonstrate such dramatic difference. +2. 由于内部实现的不同,(诸如 Vue、Om、Mercury 等) 采用异步方式渲染的框架由于跳过了同一个时间循环 (event loop) 的计算而在跑分中获益。而真实的用户体验并不会因此而变得不同。 -3. Overall this benchmark suite gave rise to more controversy than constructive insights, so it's been removed and I'd be happy to replace it with a more meaningful way to measure front-end performance. \ No newline at end of file +3. 总体上,跑分程序带来的争议多于它带来的建设性意见,所以我们把它删除了,同时我们也乐于将其改换为更有意义的测量前端性能的方式。 \ No newline at end of file From 6b27cda2c15aebe05702de0e40a3acb1458e9851 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E8=82=A1?= Date: Mon, 26 Jan 2015 02:55:47 +0800 Subject: [PATCH 05/28] translated index and header/footer --- themes/vue/layout/page.ejs | 2 +- themes/vue/layout/partials/index.ejs | 56 ++++++++++++------------ themes/vue/layout/partials/main_menu.ejs | 6 +-- 3 files changed, 32 insertions(+), 32 deletions(-) diff --git a/themes/vue/layout/page.ejs b/themes/vue/layout/page.ejs index 3b57ae1b9d..1c8dff4322 100644 --- a/themes/vue/layout/page.ejs +++ b/themes/vue/layout/page.ejs @@ -7,5 +7,5 @@
<%- page.content %> - + \ No newline at end of file diff --git a/themes/vue/layout/partials/index.ejs b/themes/vue/layout/partials/index.ejs index c72e8a251e..5c9f08389f 100644 --- a/themes/vue/layout/partials/index.ejs +++ b/themes/vue/layout/partials/index.ejs @@ -10,18 +10,18 @@

Vue.js

-

MVVM Made Simple

-

Vue.js is a library for building interactive web interfaces.
It provides data-reactive components with a simple and flexible API.

+

精简的 MVVM

+

Vue.js 是一个用于创建 web 交互界面的库。
它具有简单而灵活的 API,创建出来的组件可以实时反映数据的变化。

- Get Vue.js v<%- theme.vue_version %> - Source on GitHub + 获取 Vue.js v<%- theme.vue_version %> + 源代码在 GitHub 上

  • @@ -34,7 +34,7 @@
-

10 Second Example

+

10 秒钟看懂 Vue.js

1
 2
@@ -85,43 +85,43 @@
 
-

Simple

-

Write some HTML, grab some JSON, create a Vue instance, that's it.

+

简单

+

写点 HTML,拿来 JSON,创建一个 Vue 示例,就这么简单。

-

Fast

-

Precise and efficient async batch DOM updates.

+

快速

+

以精确有效的异步批处理方式更新 DOM。

-

Composable

-

Compose your application with decoupled, reusable components.

+

组合

+

用解耦的、可复用的组件组合你的应用程序。

-

Compact

-

~18kb min+gzip, no dependency.

+

紧凑

+

~18kb min+gzip,且无依赖。

-

Powerful

-

Expressions & computed properties with transparent dependency tracking.

+

强大

+

表达式 & 无需声明依赖的可推导属性 (computed properties)。

-

Module Friendly

-

Install via NPM, Bower or Duo - leverage your favorite eco system!

+

对模块友好

+

可以通过 NPM、Bower 或 Duo 安装——无缝融入你的生命!

-

You should try it out if you like:

+

不妨试试看,如果你喜欢:

    -
  • Extendable Data bindings
  • -
  • Plain JS object models
  • -
  • API that simply makes sense
  • -
  • Build UI by composing components
  • -
  • Mix & matching small libraries
  • +
  • 可扩展的数据绑定
  • +
  • 将普通的 JS 对象作为 model
  • +
  • 简洁明了的 API
  • +
  • 组件化 UI 构建
  • +
  • 配合别的库使用
\ No newline at end of file diff --git a/themes/vue/layout/partials/main_menu.ejs b/themes/vue/layout/partials/main_menu.ejs index 24ed194f76..55a94ab44e 100644 --- a/themes/vue/layout/partials/main_menu.ejs +++ b/themes/vue/layout/partials/main_menu.ejs @@ -1,5 +1,5 @@ -
  • Guide
  • -
  • API Reference
  • -
  • Examples
  • +
  • 入门
  • +
  • API 索引
  • +
  • 示例
  • Blog
  • GitHub
  • \ No newline at end of file From 0c6796057dd08058230e7f7385946db5aad672f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E8=82=A1?= Date: Mon, 26 Jan 2015 03:46:57 +0800 Subject: [PATCH 06/28] translated directive & filter, titles in guide --- source/guide/application.md | 2 +- source/guide/components.md | 2 +- source/guide/computed.md | 2 +- source/guide/custom-directive.md | 2 +- source/guide/custom-filter.md | 2 +- source/guide/directives.md | 55 +++++++++++++++++++++++++------- source/guide/events.md | 2 +- source/guide/extending.md | 2 +- source/guide/faq.md | 2 +- source/guide/filters.md | 24 +++++++++++--- source/guide/forms.md | 2 +- source/guide/list.md | 2 +- source/guide/transitions.md | 2 +- 13 files changed, 74 insertions(+), 27 deletions(-) diff --git a/source/guide/application.md b/source/guide/application.md index 6cf0417071..af20ee9298 100644 --- a/source/guide/application.md +++ b/source/guide/application.md @@ -1,4 +1,4 @@ -title: Building Larger Apps +title: 创建大型应用 type: guide order: 13 --- diff --git a/source/guide/components.md b/source/guide/components.md index 69e8545a95..8ec9bf0733 100644 --- a/source/guide/components.md +++ b/source/guide/components.md @@ -1,4 +1,4 @@ -title: Component System +title: 组件系统 type: guide order: 11 --- diff --git a/source/guide/computed.md b/source/guide/computed.md index 888d11b52f..de24f513fb 100644 --- a/source/guide/computed.md +++ b/source/guide/computed.md @@ -1,4 +1,4 @@ -title: Computed Properties +title: 可推导的属性 type: guide order: 8 --- diff --git a/source/guide/custom-directive.md b/source/guide/custom-directive.md index 6977f92dd4..cb24a131fe 100644 --- a/source/guide/custom-directive.md +++ b/source/guide/custom-directive.md @@ -1,4 +1,4 @@ -title: Custom Directives +title: 自定义指令 type: guide order: 9 --- diff --git a/source/guide/custom-filter.md b/source/guide/custom-filter.md index 556f25ea04..3c62e036fa 100644 --- a/source/guide/custom-filter.md +++ b/source/guide/custom-filter.md @@ -1,4 +1,4 @@ -title: Custom Filters +title: 自定义过滤器 type: guide order: 10 --- diff --git a/source/guide/directives.md b/source/guide/directives.md index 02248e56b3..6d9dcedc3e 100644 --- a/source/guide/directives.md +++ b/source/guide/directives.md @@ -1,11 +1,13 @@ -title: Directives +title: 指令 type: guide order: 3 --- -## Synopsis +## 摘要 +如果你还没有使用过 AngularJS,你可能不太清楚指令 (directive) 是什么。一个指令的本质是一个特殊的标记符号,使得该库对一个 DOM 元素进行一些处理。在 Vue.js 中,指令的概念和 Angular 是完全一样的。Vue.js 中的指令就是带有特殊前缀的 HTML 特性,它会以下面的格式出现: ``` html ``` -## A Simple Example +## 一个简单的例子 ``` html
    ``` +这里默认的前缀是 `v`。指令 ID 是 `text`,表达式是 `message`。该指令会在该 Vue 实例的 `message` 属性发生变化时更新这个 div 的 `textContent`。 -## Inline Expressions +## 内联表达式 ``` html
    ``` +这里我们用一个可推导的表达式 (computed expression) 提到了简单的属性名。Vue.js 会自动跟踪表达式中依赖的属性并在这些依赖发生变化的时候更新指令。而且因为有异步批处理更新机制,哪怕多个依赖同时变化时,表达式也只会在时间循环里触发一次。 +你应该灵活的使用表达式,以避免在你的模板里放入过多的逻辑,尤其是有边界效应的语句 (事件监听表达式除外)。为了在模板内防止逻辑被滥用,Vue.js 把内联表达式限制为**只能是一条语句**。如果需要绑定更复杂的操作,请使用[可推导的属性](/guide/computed.html)。 -

    For security reasons, in inline expressions you can only access properties and methods present on the current context Vue instance and its parents.

    + +

    由于安全方面的原因,在内联表达式中你只能访问当前上下文中 Vue 实例及其祖先的属性和方法。

    -## Argument +## 参数 ``` html
    ``` +有些指令需要在路径或表达式前加一个参数。在这个例子中 `click` 参数代表了我们希望 `v-on` 指令监听到点击事件之后调用该 ViewModel 实例的 `clickHandler` 方法。 -## Filters +## 过滤器 +过滤器可以紧跟在指令的路径或表达式之后,在更新 DOM 之前对值进行进一步处理。过滤器会被像 shell 脚本一样表示在一个竖线 (`|`) 之后。更多内容请移步至[深入了解过滤器](/guide/filters.html)。 -## Multiple Clauses +## 多重语句指令 +你可以在同一个特性的同一个指令里创建多个绑定。这些绑定是用逗号分隔开的。它们在底层被分解为多个指令实例进行绑定。 ``` html
    ``` +这里的 `"my-component"` 并不是一个数据属性——它是一个字符串 ID,用来让 Vue.js 查找对应的组件构造函数。 +你也可以在字面量指令中使用 mustache 表达式。比如,下面的代码允许你动态的解析你想要的组件类型: ``` html
    ``` +当花括号内部的表达式改变时,渲染出来的组件也会随之改变哦! +尽管如此,值得注意的是只有 `v-component` 和 `v-partial` 这两个字面量指令有这种可响应的行为。Mustache 表达式在别的字面量指令,如 `v-ref` 中,是**只运行一次**的。在指令被编译之后,就不再响应值的变化了。 +完整的字面量指令列表可以在 [API 索引](/api/directives.html#Literal_Directives) 中找到。 -## Empty Directives +## 空指令 +有些指令并不需要判断特性的值——这些操作对某个元素处理且仅处理一次。比如 `v-pre` 指令: ``` html
    @@ -90,6 +119,10 @@ Some directives don't even expect an attribute value - they simply do something
    ``` +完整的空指令列表可以在 [API 索引](/api/directives.html#Empty_Directives) 中找到。 -Next, let's talk about [Filters](/guide/filters.html). \ No newline at end of file +接下来,我们来看一看[过滤器](/guide/filters.html)。 \ No newline at end of file diff --git a/source/guide/events.md b/source/guide/events.md index f8eef8f9e3..374c534419 100644 --- a/source/guide/events.md +++ b/source/guide/events.md @@ -1,4 +1,4 @@ -title: Listening for Events +title: 事件监听 type: guide order: 6 --- diff --git a/source/guide/extending.md b/source/guide/extending.md index 69a4f501dd..93a9fec421 100644 --- a/source/guide/extending.md +++ b/source/guide/extending.md @@ -1,4 +1,4 @@ -title: Extending Vue +title: 扩展 Vue type: guide order: 14 --- diff --git a/source/guide/faq.md b/source/guide/faq.md index 4ba4de9bc0..48c5b4cb09 100644 --- a/source/guide/faq.md +++ b/source/guide/faq.md @@ -1,4 +1,4 @@ -title: Common FAQs +title: 常见问题 type: guide order: 15 --- diff --git a/source/guide/filters.md b/source/guide/filters.md index 03e74b398c..02ac8ae4ae 100644 --- a/source/guide/filters.md +++ b/source/guide/filters.md @@ -1,39 +1,49 @@ -title: Filters +title: 过滤器 type: guide order: 4 --- -## Synopsis +## 摘要 +一个 Vue.js 的过滤器本质上是一个函数,这个函数会接收一个值,将其处理并返回。它被标记在一个竖线 (`|`) 之后,并可以跟随一个或多个参数: ``` html ``` -## Examples +## 示例 +过滤器必须放置在一个指令的值的最后: ``` html ``` +你也可以用在 mustache 风格的绑定的内部: ``` html {{message | uppercase}} ``` +可以把多个过滤器链在一起: ``` html {{message | lowercase | reverse}} ``` -## Arguments +## 参数 +一些过滤器是可以附带参数的。只需用空格分隔开: ``` html {{order | pluralize st nd rd th}} @@ -43,6 +53,10 @@ Some filters can take optional arguments. Simply add arguments separated by spac ``` +上述示例的具体用法参见[完整的内建过滤器列表](/api/filters.html)。 -Now that you know what directives and filters are, let's get our hands dirty and try to [display a list of items](/guide/list.html). \ No newline at end of file +现在你已经了解了指令和过滤器,接下来我们趁热打铁[展示一个列表](/guide/list.html)吧。 \ No newline at end of file diff --git a/source/guide/forms.md b/source/guide/forms.md index b36d78dcf8..635113546f 100644 --- a/source/guide/forms.md +++ b/source/guide/forms.md @@ -1,4 +1,4 @@ -title: Handling Forms +title: 处理表单 type: guide order: 7 --- diff --git a/source/guide/list.md b/source/guide/list.md index d5aab1612b..d975abf2fc 100644 --- a/source/guide/list.md +++ b/source/guide/list.md @@ -1,4 +1,4 @@ -title: Displaying a List +title: 列表展示 type: guide order: 5 --- diff --git a/source/guide/transitions.md b/source/guide/transitions.md index 061a7dc2b5..d90d31f478 100644 --- a/source/guide/transitions.md +++ b/source/guide/transitions.md @@ -1,4 +1,4 @@ -title: Transitions +title: 过渡效果 type: guide order: 12 --- From bd0d16e06f954e26bdec9a94bab118e325755d2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E8=82=A1?= Date: Mon, 26 Jan 2015 03:53:52 +0800 Subject: [PATCH 07/28] updated config --- _config.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_config.yml b/_config.yml index cb1d5b0325..21d5b2a6da 100644 --- a/_config.yml +++ b/_config.yml @@ -12,8 +12,8 @@ language: # URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' -url: http://vuejs.org -root: / +url: http://jinjiang.github.io/vuejs.org +root: /vuejs.org/ permalink: :year/:month/:day/:title/ tag_dir: tags archive_dir: archives @@ -97,4 +97,4 @@ markdown: ## Docs: http://zespia.tw/hexo/docs/deployment.html deploy: type: github - repository: git@github.com:vuejs/vuejs.org.git \ No newline at end of file + repository: git@github.com:Jinjiang/vuejs.org.git \ No newline at end of file From ccc885248c263babf61f6f2455d82a1593bd0a73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E8=82=A1?= Date: Mon, 26 Jan 2015 04:31:05 +0800 Subject: [PATCH 08/28] added root path to theme --- themes/vue/layout/layout.ejs | 12 ++++++------ themes/vue/layout/partials/blog.ejs | 4 ++-- themes/vue/layout/partials/header.ejs | 2 +- themes/vue/layout/partials/index.ejs | 14 +++++++------- themes/vue/layout/partials/main_menu.ejs | 8 ++++---- themes/vue/layout/partials/sidebar.ejs | 2 +- themes/vue/layout/post.ejs | 2 +- 7 files changed, 22 insertions(+), 22 deletions(-) diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs index bd12605f08..c240eec5ad 100644 --- a/themes/vue/layout/layout.ejs +++ b/themes/vue/layout/layout.ejs @@ -5,19 +5,19 @@ - - + + <%- css(page.index ? 'css/index' : 'css/page') %> <%- partial('partials/ga') %> - +
    - +
    <% if (page.index) { %> @@ -35,8 +35,8 @@ <% if (!page.index) { %> - - + + <% } %> diff --git a/themes/vue/layout/partials/blog.ejs b/themes/vue/layout/partials/blog.ejs index 0005f2c8c1..f2e49401fc 100644 --- a/themes/vue/layout/partials/blog.ejs +++ b/themes/vue/layout/partials/blog.ejs @@ -7,10 +7,10 @@

    The Vue.js Blog

    <% site.posts.sort('date', -1).each(function (post) { %>
    -

    <%- post.title %>

    +

    <%- post.title %>

    <%- post.date.format('MMM D[,] YYYY') %>

    <%- post.excerpt %>
    - ... continue reading + ... continue reading
    <% }) %> \ No newline at end of file diff --git a/themes/vue/layout/partials/header.ejs b/themes/vue/layout/partials/header.ejs index ac6837fab0..637af41c9d 100644 --- a/themes/vue/layout/partials/header.ejs +++ b/themes/vue/layout/partials/header.ejs @@ -1,6 +1,6 @@ ``` -这里默认的前缀是 `v`。指令 ID 是 `text`,表达式是 `message`。该指令会在该 Vue 实例的 `message` 属性发生变化时更新这个 div 的 `textContent`。 +这里默认的前缀是 `v`。指令 ID 是 `text`,表达式是 `message`。该指令会在该 Vue 实例的 `message` 属性发生变化时更新这个 div 的 `textContent`。 ## 内联表达式 @@ -31,15 +27,10 @@ Here the prefix is `v` which is the default. The directive ID is `text` and the
    ``` -这里我们用一个可推导的表达式 (computed expression) 提到了简单的属性名。Vue.js 会自动跟踪表达式中依赖的属性并在这些依赖发生变化的时候更新指令。而且因为有异步批处理更新机制,哪怕多个依赖同时变化时,表达式也只会在时间循环里触发一次。 +这里我们用一个可推导的表达式 (computed expression) 提到了简单的属性名。Vue.js 会自动跟踪表达式中依赖的属性并在这些依赖发生变化的时候更新指令。而且因为有异步批处理更新机制,哪怕多个依赖同时变化时,表达式也只会在时间循环里触发一次。 -你应该灵活的使用表达式,以避免在你的模板里放入过多的逻辑,尤其是有边界效应的语句 (事件监听表达式除外)。为了在模板内防止逻辑被滥用,Vue.js 把内联表达式限制为**只能是一条语句**。如果需要绑定更复杂的操作,请使用[可推导的属性](/guide/computed.html)。 +你应该灵活的使用表达式,以避免在你的模板里放入过多的逻辑,尤其是有边界效应的语句 (事件监听表达式除外)。为了在模板内防止逻辑被滥用,Vue.js 把内联表达式限制为**只能是一条语句**。如果需要绑定更复杂的操作,请使用[可推导的属性](/guide/computed.html)。 -

    由于安全方面的原因,在内联表达式中你只能访问当前上下文中 Vue 实例及其祖先的属性和方法。

    ## 参数 @@ -48,21 +39,15 @@ You should use expressions wisely and avoid putting too much logic in your templ
    ``` -有些指令需要在路径或表达式前加一个参数。在这个例子中 `click` 参数代表了我们希望 `v-on` 指令监听到点击事件之后调用该 ViewModel 实例的 `clickHandler` 方法。 +有些指令需要在路径或表达式前加一个参数。在这个例子中 `click` 参数代表了我们希望 `v-on` 指令监听到点击事件之后调用该 ViewModel 实例的 `clickHandler` 方法。 ## 过滤器 -过滤器可以紧跟在指令的路径或表达式之后,在更新 DOM 之前对值进行进一步处理。过滤器会被像 shell 脚本一样表示在一个竖线 (`|`) 之后。更多内容请移步至[深入了解过滤器](/guide/filters.html)。 +过滤器可以紧跟在指令的路径或表达式之后,在更新 DOM 之前对值进行进一步处理。过滤器会被像 shell 脚本一样表示在一个竖线 (`|`) 之后。更多内容请移步至[深入了解过滤器](/guide/filters.html)。 ## 多重语句指令 -你可以在同一个特性的同一个指令里创建多个绑定。这些绑定是用逗号分隔开的。它们在底层被分解为多个指令实例进行绑定。 +你可以在同一个特性的同一个指令里创建多个绑定。这些绑定是用逗号分隔开的。它们在底层被分解为多个指令实例进行绑定。 ``` html
    ``` -这里的 `"my-component"` 并不是一个数据属性——它是一个字符串 ID,用来让 Vue.js 查找对应的组件构造函数。 +这里的 `"my-component"` 并不是一个数据属性——它是一个字符串 ID,用来让 Vue.js 查找对应的组件构造函数。 -你也可以在字面量指令中使用 mustache 表达式。比如,下面的代码允许你动态的解析你想要的组件类型: +你也可以在字面量指令中使用 mustache 表达式。比如,下面的代码允许你动态的解析你想要的组件类型: ``` html
    ``` -当花括号内部的表达式改变时,渲染出来的组件也会随之改变哦! +当花括号内部的表达式改变时,渲染出来的组件也会随之改变哦! -尽管如此,值得注意的是只有 `v-component` 和 `v-partial` 这两个字面量指令有这种可响应的行为。Mustache 表达式在别的字面量指令,如 `v-ref` 中,是**只运行一次**的。在指令被编译之后,就不再响应值的变化了。 +尽管如此,值得注意的是只有 `v-component` 和 `v-partial` 这两个字面量指令有这种可响应的行为。Mustache 表达式在别的字面量指令,如 `v-ref` 中,是**只运行一次**的。在指令被编译之后,就不再响应值的变化了。 -完整的字面量指令列表可以在 [API 索引](/api/directives.html#Literal_Directives) 中找到。 +完整的字面量指令列表可以在 [API 索引](/api/directives.html#Literal_Directives) 中找到。 ## 空指令 -有些指令并不需要判断特性的值——这些操作对某个元素处理且仅处理一次。比如 `v-pre` 指令: +有些指令并不需要判断特性的值——这些操作对某个元素处理且仅处理一次。比如 `v-pre` 指令: ``` html
    @@ -119,10 +90,6 @@ Some directives don't even expect an attribute value - they simply do something
    ``` -完整的空指令列表可以在 [API 索引](/api/directives.html#Empty_Directives) 中找到。 +完整的空指令列表可以在 [API 索引](/api/directives.html#Empty_Directives) 中找到。 -接下来,我们来看一看[过滤器](/guide/filters.html)。 \ No newline at end of file +接下来,我们来看一看[过滤器](/guide/filters.html)。 \ No newline at end of file diff --git a/source/guide/filters.md b/source/guide/filters.md index 02ac8ae4ae..e9e1cbe29d 100644 --- a/source/guide/filters.md +++ b/source/guide/filters.md @@ -5,9 +5,7 @@ order: 4 ## 摘要 -一个 Vue.js 的过滤器本质上是一个函数,这个函数会接收一个值,将其处理并返回。它被标记在一个竖线 (`|`) 之后,并可以跟随一个或多个参数: +一个 Vue.js 的过滤器本质上是一个函数,这个函数会接收一个值,将其处理并返回。它被标记在一个竖线 (`|`) 之后,并可以跟随一个或多个参数: ``` html @@ -15,25 +13,19 @@ A Vue.js filter is essentially a function that takes a value, processes it, and ## 示例 -过滤器必须放置在一个指令的值的最后: +过滤器必须放置在一个指令的值的最后: ``` html ``` -你也可以用在 mustache 风格的绑定的内部: +你也可以用在 mustache 风格的绑定的内部: ``` html {{message | uppercase}} ``` -可以把多个过滤器链在一起: +可以把多个过滤器链在一起: ``` html {{message | lowercase | reverse}} @@ -41,9 +33,7 @@ Multiple filters can be chained together: ## 参数 -一些过滤器是可以附带参数的。只需用空格分隔开: +一些过滤器是可以附带参数的。只需用空格分隔开: ``` html {{order | pluralize st nd rd th}} @@ -53,10 +43,6 @@ Some filters can take optional arguments. Simply add arguments separated by spac ``` -上述示例的具体用法参见[完整的内建过滤器列表](/api/filters.html)。 +上述示例的具体用法参见[完整的内建过滤器列表](/api/filters.html)。 -现在你已经了解了指令和过滤器,接下来我们趁热打铁[展示一个列表](/guide/list.html)吧。 \ No newline at end of file +现在你已经了解了指令和过滤器,接下来我们趁热打铁[展示一个列表](/guide/list.html)吧。 \ No newline at end of file diff --git a/source/guide/index.md b/source/guide/index.md index 126eae9c23..63edfc28c5 100644 --- a/source/guide/index.md +++ b/source/guide/index.md @@ -5,140 +5,92 @@ order: 2 ## 介绍 -Vue.js 是一个用于创建 web 交互界面的库。 +Vue.js 是一个用于创建 web 交互界面的库。 -从技术角度讲,Vue.js 专注于 MVVM 模型的 [ViewModel](#ViewModel) 层。它通过双向数据绑定把 [View](#View) 层和 [Model](#Model) 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了 [Directives](#Directives) 和 [Filters](#Filters)。 +从技术角度讲,Vue.js 专注于 MVVM 模型的 [ViewModel](#ViewModel) 层。它通过双向数据绑定把 [View](#View) 层和 [Model](#Model) 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了 [Directives](#Directives) 和 [Filters](#Filters)。 -从哲学角度讲,我们希望创造的价值,在于通过一个尽量简单的 API 产生可反映的数据绑定和可组合的视图组件。它不是一个大而全的框架——它为简单灵活的视图层而生。您可以独立使用它快速开发原型、也可以混合别的库做更多的事情。它同时天然的适用于诸如 Firebase 的 no-backend 服务。 +从哲学角度讲,我们希望创造的价值,在于通过一个尽量简单的 API 产生可反映的数据绑定和可组合的视图组件。它不是一个大而全的框架——它为简单灵活的视图层而生。您可以独立使用它快速开发原型、也可以混合别的库做更多的事情。它同时天然的适用于诸如 Firebase 的 no-backend 服务。 -Vue.js 的 API 设计深受 [AngularJS]、[KnockoutJS]、[Ractive.js] 和 [Rivets.js] 的影响。尽管有不少雷同,但我们相信 Vue.js 能够通过在简约和功能两者之间的巧妙契合,体现出其特殊的价值。 +Vue.js 的 API 设计深受 [AngularJS]、[KnockoutJS]、[Ractive.js] 和 [Rivets.js] 的影响。尽管有不少雷同,但我们相信 Vue.js 能够通过在简约和功能两者之间的巧妙契合,体现出其特殊的价值。 -即便您已经熟悉了一些这类的库或框架,我们还是推荐您继续阅读接下来的概览,因为您对它们的认识也许和 Vue.js 中的情景不尽相同。 +即便您已经熟悉了一些这类的库或框架,我们还是推荐您继续阅读接下来的概览,因为您对它们的认识也许和 Vue.js 中的情景不尽相同。 ## 概览 ### ViewModel -一个同步 Model 和 View 的对象。在 Vue.js 中,每个 Vue 实例都是一个 ViewModel。它们是通过构造函数 `Vue` 或其子类被初始化出来的。 +一个同步 Model 和 View 的对象。在 Vue.js 中,每个 Vue 实例都是一个 ViewModel。它们是通过构造函数 `Vue` 或其子类被初始化出来的。 ```js var vm = new Vue({ /* options */ }) ``` -这是您作为一个开发者在使用 Vue.js 时主要打交道的对象。更多的细节请移步至[Vue 构造函数](/api/)。 +这是您作为一个开发者在使用 Vue.js 时主要打交道的对象。更多的细节请移步至[Vue 构造函数](/api/)。 ### 视图 (View) -实际被 Vue 实例管理的 DOM。 +实际被 Vue 实例管理的 DOM。 ```js vm.$el // The View ``` -Vue.js 使用基于 DOM 的模板。每个 Vue 实例都关联着一个相应的 DOM 元素。当一个 Vue 实例被创建时,它会递归便利根元素的所有子结点,同时完成必要的数据绑定。当这个视图被编译之后,它就会自动反映数据的变化。 +Vue.js 使用基于 DOM 的模板。每个 Vue 实例都关联着一个相应的 DOM 元素。当一个 Vue 实例被创建时,它会递归便利根元素的所有子结点,同时完成必要的数据绑定。当这个视图被编译之后,它就会自动反映数据的变化。 -在使用 Vue.js 时,除了自定义的指令 (directives) 您几乎不必直接接触 DOM (稍后会有解释)。当数据发生变化时,视图将会自动触发更新。这些更新的颗粒度是精确到 textNode 的。同时为了更好的性能,这些更新是批量异步执行的。 +在使用 Vue.js 时,除了自定义的指令 (directives) 您几乎不必直接接触 DOM (稍后会有解释)。当数据发生变化时,视图将会自动触发更新。这些更新的颗粒度是精确到 textNode 的。同时为了更好的性能,这些更新是批量异步执行的。 ### 模型 (Model) -一个轻微改动过的普通 JavaScript 对象。 +一个轻微改动过的普通 JavaScript 对象。 ```js vm.$data // The Model ``` -Vue.js 中的模型就是普通的 JavaScript 对象——也可以称为**数据对象**。你可以操作它们的属性,同时 Vue 实例观察到这些属性的变化时也会被提示。Vue.js 把数据对象的属性都转换成了 ES5 中的 getter/setters,以此达到无副作用的数据观察效果。无需 dirty checking,也不需要刻意给 Vue 任何更新视图的信号。每当数据变化时,视图都会在下一帧自动更新。 +Vue.js 中的模型就是普通的 JavaScript 对象——也可以称为**数据对象**。你可以操作它们的属性,同时 Vue 实例观察到这些属性的变化时也会被提示。Vue.js 把数据对象的属性都转换成了 ES5 中的 getter/setters,以此达到无副作用的数据观察效果。无需 dirty checking,也不需要刻意给 Vue 任何更新视图的信号。每当数据变化时,视图都会在下一帧自动更新。 -Vue 实例代理了它们观察到的数据对象的所有属性。所以一旦一个对象 `{ a: 1 }` 被观察,那么 `vm.$data.a` 和 `vm.a` 将会返回相同的值,而设置 `vm.a = 2` 则也会修改 `vm.$data`。 +Vue 实例代理了它们观察到的数据对象的所有属性。所以一旦一个对象 `{ a: 1 }` 被观察,那么 `vm.$data.a` 和 `vm.a` 将会返回相同的值,而设置 `vm.a = 2` 则也会修改 `vm.$data`。 -数据对象有时是突变的,所以修改数据的引用和修改 `vm.$data` 具有相同的效果。这也意味着多个 Vue 实例可以观察同一份数据。在较大型的应用程序中,我们也推荐将 Vue 实例作为纯粹的视图看待,同时把数据处理逻辑放在更独立的外部数据层。 +数据对象有时是突变的,所以修改数据的引用和修改 `vm.$data` 具有相同的效果。这也意味着多个 Vue 实例可以观察同一份数据。在较大型的应用程序中,我们也推荐将 Vue 实例作为纯粹的视图看待,同时把数据处理逻辑放在更独立的外部数据层。 -值得提醒的是,一旦数据被观察,Vue.js 就不会再侦测到新加入或删除的属性了。作为弥补,我们会为被观察的对象增加 `$add` 和 `$delete` 方法。 +值得提醒的是,一旦数据被观察,Vue.js 就不会再侦测到新加入或删除的属性了。作为弥补,我们会为被观察的对象增加 `$add` 和 `$delete` 方法。 ### 指令 (Directives) -带特殊前缀的 HTML 特性,可以让 Vue.js 对一个 DOM 元素做各种处理。 +带特殊前缀的 HTML 特性,可以让 Vue.js 对一个 DOM 元素做各种处理。 ```html
    ``` -这里的 div 元素有一个 `v-text` 指令,其值为 `message`。Vue.js 会让该 div 的文本内容是和 Vue 实例中的 `message` 属性值保持一致。 +这里的 div 元素有一个 `v-text` 指令,其值为 `message`。Vue.js 会让该 div 的文本内容是和 Vue 实例中的 `message` 属性值保持一致。 -Directives 可以封装任何 DOM 操作。比如 `v-attr` 会操作一个元素的特性;`v-repeat` 会基于一个数组克隆某个元素;`v-on` 会绑定事件等。稍后会有更多的介绍。 +Directives 可以封装任何 DOM 操作。比如 `v-attr` 会操作一个元素的特性;`v-repeat` 会基于一个数组克隆某个元素;`v-on` 会绑定事件等。稍后会有更多的介绍。 ### Mustache 风格的绑定 -你也可以使用 mustache 风格的绑定,不管在文本中还是在特性中。它们在底层会被转换成 `v-text` 和 `v-attr` 的指令。比如: +你也可以使用 mustache 风格的绑定,不管在文本中还是在特性中。它们在底层会被转换成 `v-text` 和 `v-attr` 的指令。比如: ```html
    Hello {{name}}!
    ``` -这很方便,不过有一些注意事项: +这很方便,不过有一些注意事项: -

    一个 `` 的 `src` 特性在赋值时会产生一个 HTTP 请求,所以当模板在第一次被解析时会产生一个 404 请求。这种情况下更适合用 `v-attr`。

    -

    Internet Explorer 在解析 HTML 时会移除非法的内联 `style` 特性,所以如果你想支持 IE,请在绑定内联 CSS 的时候始终使用 `v-style`。

    -你可以使用三对花括号来回避 HTML 代码,而这种写法会在底层转换为 `v-html`: +你可以使用三对花括号来回避 HTML 代码,而这种写法会在底层转换为 `v-html`: ``` html {{{ safeHTMLString }}} ``` -不过这种用法会留下 XSS 攻击的隐患,所以建议只对绝对信任的数据来源使用三对花括号的写法,或者先通过自定义的过滤器 (filter) 对不可信任的 HTML 进行过滤。 +不过这种用法会留下 XSS 攻击的隐患,所以建议只对绝对信任的数据来源使用三对花括号的写法,或者先通过自定义的过滤器 (filter) 对不可信任的 HTML 进行过滤。 -最后,你可以在你的 mustache 绑定里加入 `*` 来注明这是一个一次性撰写的数据,这样的话它就不会反应后续的数据变化: +最后,你可以在你的 mustache 绑定里加入 `*` 来注明这是一个一次性撰写的数据,这样的话它就不会反应后续的数据变化: ``` html {{* onlyOnce }} @@ -146,23 +98,17 @@ Finally, you can add `*` to your mustache bindings to indicate a one-time only i ### 过滤器 (Filters) -过滤器是用于在更新视图之前处理原始值的函数。它们通过一个“管道”在指令或绑定中进行处理: +过滤器是用于在更新视图之前处理原始值的函数。它们通过一个“管道”在指令或绑定中进行处理: ```html
    {{message | capitalize}}
    ``` -这样在 div 的文本内容被更新之前,`message` 的值会先传给 `capitalizie` 函数处理。更多内容可移步至[深入了解过滤器 (Filters)](/guide/filters.html)。 +这样在 div 的文本内容被更新之前,`message` 的值会先传给 `capitalizie` 函数处理。更多内容可移步至[深入了解过滤器 (Filters)](/guide/filters.html)。 ### 组件 (Components) -在 Vue.js,每个组件都是一个简单的 Vue 实例。一个树形嵌套的各种组件就代表了你的应用程序的各种接口。通过 `Vue.extend` 返回的自定义构造函数可以把这些组件实例化,不过更声明式的建议是通过 `Vue.component(id, constructor)` 注册这些组件。一旦组件被注册,它们就可以在 Vue 实例的模板中以声明的形式嵌套使用了。 +在 Vue.js,每个组件都是一个简单的 Vue 实例。一个树形嵌套的各种组件就代表了你的应用程序的各种接口。通过 `Vue.extend` 返回的自定义构造函数可以把这些组件实例化,不过更声明式的建议是通过 `Vue.component(id, constructor)` 注册这些组件。一旦组件被注册,它们就可以在 Vue 实例的模板中以声明的形式嵌套使用了。 ``` html
    @@ -170,9 +116,7 @@ In Vue.js, every component is simply a Vue instance. Components form a nested tr
    ``` -这个简单的机制使得我们可以以类似 [Web Components](http://www.w3.org/TR/components-intro/) 的声明形式对 Vue 实例进行复用和组合,无需最新版的浏览器或笨重的 polyfills。通过将一个应用程序拆分成简单的组件,代码库可以被尽可能的解耦,同时更易于维护。更多内容可移步至[组件系统](/guide/components.html)。 +这个简单的机制使得我们可以以类似 [Web Components](http://www.w3.org/TR/components-intro/) 的声明形式对 Vue 实例进行复用和组合,无需最新版的浏览器或笨重的 polyfills。通过将一个应用程序拆分成简单的组件,代码库可以被尽可能的解耦,同时更易于维护。更多内容可移步至[组件系统](/guide/components.html)。 ## 一个简单的例子 @@ -231,17 +175,11 @@ var demo = new Vue({ }) -也可以通过 [jsfiddle](http://jsfiddle.net/yyx990803/yMv7y/) 查看。 +也可以通过 [jsfiddle](http://jsfiddle.net/yyx990803/yMv7y/) 查看。 -你可以点击一个 todo 来开关它,也可以打开你的浏览器命令行直接操作 `demo` 对象:比如改变 `demo.title`、向 `demo.todos` 里放入一个新的对象、或开关某个 todo 的 `done` 状态值。 +你可以点击一个 todo 来开关它,也可以打开你的浏览器命令行直接操作 `demo` 对象:比如改变 `demo.title`、向 `demo.todos` 里放入一个新的对象、或开关某个 todo 的 `done` 状态值。 -也许你脑海中还有一些问题,别担心,我们稍后都会提到的。接下来可移步至:[深入了解指令 (Directives)](/guide/directives.html)。 +也许你脑海中还有一些问题,别担心,我们稍后都会提到的。接下来可移步至:[深入了解指令 (Directives)](/guide/directives.html)。 [AngularJS]: http://angularjs.org [KnockoutJS]: http://knockoutjs.com diff --git a/source/guide/installation.md b/source/guide/installation.md index 72005ca09f..357df91dce 100644 --- a/source/guide/installation.md +++ b/source/guide/installation.md @@ -11,9 +11,7 @@ gz_size: 18.11 ## 直接下载 -直接下载并写入一个 script 标签中,`Vue` 就会被注册为一个全局变量。 +直接下载并写入一个 script 标签中,`Vue` 就会被注册为一个全局变量。
    开发者版本{{dev_size}}kb, plenty of comments and debug/warning messages. @@ -21,9 +19,7 @@ Simply download and include with a script tag. `Vue` will be registered as a glo 生产版本{{min_size}}kb minified / {{gz_size}}kb gzipped
    -也可以在 [cdnjs](//cdnjs.cloudflare.com/ajax/libs/vue/{{vue_version}}/vue.min.js) 使用 (版本更新会略滞后)。 +也可以在 [cdnjs](//cdnjs.cloudflare.com/ajax/libs/vue/{{vue_version}}/vue.min.js) 使用 (版本更新会略滞后)。 ## NPM @@ -58,9 +54,7 @@ $ component install yyx990803/vue@dev ## AMD 模块加载器 -直接下载或通过 Bower 安装的版本可以用 UMD 包裹起来直接作为 AMD 模块使用。 +直接下载或通过 Bower 安装的版本可以用 UMD 包裹起来直接作为 AMD 模块使用。 ## 准备好了吗? From 6a83b69f5edc714095190b3b86a1dc8b1aaa0d50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E8=82=A1?= Date: Mon, 26 Jan 2015 16:09:53 +0800 Subject: [PATCH 14/28] fixed abs path to relative path, added english blog link --- source/api/directives.md | 12 ++++++------ source/api/global-api.md | 14 +++++++------- source/api/index.md | 8 ++++---- source/api/instance-methods.md | 2 +- source/api/instance-properties.md | 6 +++--- source/api/options.md | 14 +++++++------- source/guide/application.md | 4 ++-- source/guide/components.md | 8 ++++---- source/guide/computed.md | 2 +- source/guide/custom-directive.md | 4 ++-- source/guide/custom-filter.md | 2 +- source/guide/directives.md | 10 +++++----- source/guide/events.md | 4 ++-- source/guide/filters.md | 4 ++-- source/guide/forms.md | 2 +- source/guide/index.md | 8 ++++---- source/guide/installation.md | 4 ++-- source/guide/list.md | 4 ++-- source/guide/transitions.md | 2 +- themes/vue/layout/page.ejs | 2 +- themes/vue/layout/partials/index.ejs | 3 ++- themes/vue/layout/partials/main_menu.ejs | 5 +++-- 22 files changed, 63 insertions(+), 61 deletions(-) diff --git a/source/api/directives.md b/source/api/directives.md index dc870c911e..ad04e024d4 100644 --- a/source/api/directives.md +++ b/source/api/directives.md @@ -112,14 +112,14 @@ When there is an argument, it will be used as the CSS property to apply. Combine - This directive requires an argument. - This directive requires the value to be a Function or a statement. -Attaches an event listener to the element. The event type is denoted by the argument. It is also the only directive that can be used with the `key` filter. For more details see [Listening for Events](/guide/events.html). +Attaches an event listener to the element. The event type is denoted by the argument. It is also the only directive that can be used with the `key` filter. For more details see [Listening for Events](../guide/events.html). ### v-model - This directive can only be used on ``, `