除了这些不同，请注意这份 cookbook 仍*不是*入门教程。其大部分内容都假设你已经理解 HTML、CSS、JavaScript、npm/yarn 等基本概念。
+
## 参与 Cookbook 贡献
### 我们的目标
Cookbook 为开发者提供了一些示例，涵盖常见的或有趣的用例，并逐步解释更复杂的细节。我们的目标是超越一个简单的示例介绍，展现更广泛适用的概念及其注意事项。
-如果你有兴趣参与贡献，请将您的想法填入 issue 并加上 **cookbook idea** 的标签作为起步，这样我们就可以帮助并引导您完成一个 pull request。在你的想法被认同之后，请尽可能遵循以下模板。有些小节是必须的，有些是可选的。我们强烈建议您遵循其顺序，但这也不是必须的。
-通常情况下案例应该：
+如果你有兴趣参与贡献，请将您的想法填入 issue 并加上 **cookbook idea** 的标签作为起步，这样我们就可以帮助并引导您完成一个 pull request。在你的想法被认同之后，请尽可能遵循以下模板。有些小节是必须的，有些是可选的。我们强烈建议您遵循其顺序，但这也不是必须的。通常情况下案例应该：
> * 解决一个具体的普遍性问题
> * 从尽可能简单的示例开始
diff --git a/src/v2/cookbook/packaging-sfc-for-npm.md b/src/v2/cookbook/packaging-sfc-for-npm.md
index fe1e37ea5..fd7c9ce48 100644
--- a/src/v2/cookbook/packaging-sfc-for-npm.md
+++ b/src/v2/cookbook/packaging-sfc-for-npm.md
@@ -24,7 +24,7 @@ export default {
Or even used via `
+
...
diff --git a/src/v2/examples/index.md b/src/v2/examples/index.md
index b1cc2fa36..c280cfbd1 100644
--- a/src/v2/examples/index.md
+++ b/src/v2/examples/index.md
@@ -6,4 +6,4 @@ order: 0
> 蠢萌的 Markdown 编辑器。
-
+
diff --git a/src/v2/examples/modal.md b/src/v2/examples/modal.md
index 56c93003e..9c5a0e084 100644
--- a/src/v2/examples/modal.md
+++ b/src/v2/examples/modal.md
@@ -4,6 +4,6 @@ type: examples
order: 6
---
-> 使用到的特性：组件，prop 传递，内容插入(content insertion)，过渡 (transitions)。
+> 使用到的特性：组件，prop 传递，内容插入 (content insertion)，过渡 (transitions)。
-
+
diff --git a/src/v2/examples/select2.md b/src/v2/examples/select2.md
index 7b34c102d..4510b9e39 100644
--- a/src/v2/examples/select2.md
+++ b/src/v2/examples/select2.md
@@ -6,4 +6,4 @@ order: 8
> 在本例中，我们整合了第三方 jQuery 插件 (select2)，怎么做到的呢？就是把它内嵌在一个常用组件中。
-
+
diff --git a/src/v2/examples/svg.md b/src/v2/examples/svg.md
index 67e7c0059..3bbd382e5 100644
--- a/src/v2/examples/svg.md
+++ b/src/v2/examples/svg.md
@@ -6,4 +6,4 @@ order: 5
> 本示例展示了一个结合体，它由常用组件、计算属性、2 种绑定方式和 SVG 的支持组成。
-
+
diff --git a/src/v2/examples/todomvc.md b/src/v2/examples/todomvc.md
index f87ad587f..bef86ba4d 100644
--- a/src/v2/examples/todomvc.md
+++ b/src/v2/examples/todomvc.md
@@ -6,6 +6,6 @@ order: 11
> 本例是一个完全和规范一致的 TodoMVC 实现，只用了 120 行有效的 JavaScript (不包含注释和空行)。
-
Note that if your web browser is configured to block 3rd-party data/cookies, the example below will not work, as the `localStorage` data will fail to be saved from JSFiddle. You'll have to click on `Edit in JSFiddle` to see the live result.
+
Note that if your web browser is configured to block 3rd-party data/cookies, the example below will not work, as the `localStorage` data will fail to be saved. You'll have to click on `Open Sandbox` to see the live result.
-
+
diff --git a/src/v2/examples/tree-view.md b/src/v2/examples/tree-view.md
index 6426ae918..66dc64d74 100644
--- a/src/v2/examples/tree-view.md
+++ b/src/v2/examples/tree-view.md
@@ -6,4 +6,4 @@ order: 4
> 本示例是一个简单的树形视图实现，它展现了组件的递归使用。
-
+
diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v2/index.html b/src/v2/examples/vue-10-two-way-currency-filter-v2/index.html
new file mode 100644
index 000000000..caf5244f4
--- /dev/null
+++ b/src/v2/examples/vue-10-two-way-currency-filter-v2/index.html
@@ -0,0 +1,88 @@
+
+
+
+
Two-way Currency Filter
+
+
+
+
+
+
+
+
+
+
+
Total: ${{ total }}
+
+
+
+
+
diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v2/package.json b/src/v2/examples/vue-10-two-way-currency-filter-v2/package.json
new file mode 100644
index 000000000..3dcc5dba3
--- /dev/null
+++ b/src/v2/examples/vue-10-two-way-currency-filter-v2/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-10-two-way-currency-filter-v2",
+ "version": "1.0.0",
+ "description": "Showing how delayed state updates can cause strange behavior.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v2/sandbox.config.json b/src/v2/examples/vue-10-two-way-currency-filter-v2/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-10-two-way-currency-filter-v2/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v3/currency-validator.js b/src/v2/examples/vue-10-two-way-currency-filter-v3/currency-validator.js
new file mode 100644
index 000000000..80ab295e3
--- /dev/null
+++ b/src/v2/examples/vue-10-two-way-currency-filter-v3/currency-validator.js
@@ -0,0 +1,61 @@
+var currencyValidator = {
+ format: function(number) {
+ return (Math.trunc(number * 100) / 100).toFixed(2);
+ },
+ parse: function(newString, oldNumber) {
+ var CleanParse = function(value) {
+ return { value: value };
+ };
+ var CurrencyWarning = function(warning, value) {
+ return {
+ warning: warning,
+ value: value,
+ attempt: newString
+ };
+ };
+ var NotAValidDollarAmountWarning = function(value) {
+ return new CurrencyWarning(
+ newString + " is not a valid dollar amount",
+ value
+ );
+ };
+ var AutomaticConversionWarning = function(value) {
+ return new CurrencyWarning(
+ newString + " was automatically converted to " + value,
+ value
+ );
+ };
+
+ var newNumber = Number(newString);
+ var indexOfDot = newString.indexOf(".");
+ var indexOfE = newString.indexOf("e");
+
+ if (isNaN(newNumber)) {
+ if (
+ indexOfDot === -1 &&
+ indexOfE > 0 &&
+ indexOfE === newString.length - 1 &&
+ Number(newString.slice(0, indexOfE)) !== 0
+ ) {
+ return new CleanParse(oldNumber);
+ } else {
+ return new NotAValidDollarAmountWarning(oldNumber);
+ }
+ }
+
+ var newCurrencyString = currencyValidator.format(newNumber);
+ var newCurrencyNumber = Number(newCurrencyString);
+
+ if (newCurrencyNumber === newNumber) {
+ if (indexOfE !== -1 && indexOfE === newString.length - 2) {
+ return new AutomaticConversionWarning(newNumber);
+ } else {
+ return new CleanParse(newNumber);
+ }
+ } else {
+ return new NotAValidDollarAmountWarning(
+ newNumber > newCurrencyNumber ? newCurrencyNumber : oldNumber
+ );
+ }
+ }
+};
diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v3/index.html b/src/v2/examples/vue-10-two-way-currency-filter-v3/index.html
new file mode 100644
index 000000000..40d6041b2
--- /dev/null
+++ b/src/v2/examples/vue-10-two-way-currency-filter-v3/index.html
@@ -0,0 +1,97 @@
+
+
+
+
Two-way Currency Filter
+
+
+
+
+
+
+
+
+
+
+
Total: ${{ total }}
+
+
+
+
+
diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v3/package.json b/src/v2/examples/vue-10-two-way-currency-filter-v3/package.json
new file mode 100644
index 000000000..082e912c9
--- /dev/null
+++ b/src/v2/examples/vue-10-two-way-currency-filter-v3/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-10-two-way-currency-filter-v3",
+ "version": "1.0.0",
+ "description": "Showing how delayed state updates can cause strange behavior.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v3/sandbox.config.json b/src/v2/examples/vue-10-two-way-currency-filter-v3/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-10-two-way-currency-filter-v3/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-10-two-way-currency-filter/index.html b/src/v2/examples/vue-10-two-way-currency-filter/index.html
new file mode 100644
index 000000000..e63f64f86
--- /dev/null
+++ b/src/v2/examples/vue-10-two-way-currency-filter/index.html
@@ -0,0 +1,56 @@
+
+
+
+
Two-way Currency Filter
+
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-10-two-way-currency-filter/package.json b/src/v2/examples/vue-10-two-way-currency-filter/package.json
new file mode 100644
index 000000000..ee92d5f0a
--- /dev/null
+++ b/src/v2/examples/vue-10-two-way-currency-filter/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-10-two-way-currency-filter",
+ "version": "1.0.0",
+ "description": "Showing how delayed state updates can cause strange behavior.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-10-two-way-currency-filter/sandbox.config.json b/src/v2/examples/vue-10-two-way-currency-filter/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-10-two-way-currency-filter/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-accessing-parent-component-instance/index.html b/src/v2/examples/vue-20-accessing-parent-component-instance/index.html
new file mode 100644
index 000000000..44606424d
--- /dev/null
+++ b/src/v2/examples/vue-20-accessing-parent-component-instance/index.html
@@ -0,0 +1,91 @@
+
+
+
+
Dependency Injection Google Maps Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-accessing-parent-component-instance/package.json b/src/v2/examples/vue-20-accessing-parent-component-instance/package.json
new file mode 100644
index 000000000..f01eaa982
--- /dev/null
+++ b/src/v2/examples/vue-20-accessing-parent-component-instance/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-accessing-parent-component-instance",
+ "version": "1.0.0",
+ "description": "Vue.js example accessing Parent Component Instance using Google Maps.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-accessing-parent-component-instance/sandbox.config.json b/src/v2/examples/vue-20-accessing-parent-component-instance/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-accessing-parent-component-instance/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-component-blog-post-example/index.html b/src/v2/examples/vue-20-component-blog-post-example/index.html
new file mode 100644
index 000000000..5682f7ef6
--- /dev/null
+++ b/src/v2/examples/vue-20-component-blog-post-example/index.html
@@ -0,0 +1,43 @@
+
+
+
+
Component Blog Post Example
+
+
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-component-blog-post-example/package.json b/src/v2/examples/vue-20-component-blog-post-example/package.json
new file mode 100644
index 000000000..65197ee44
--- /dev/null
+++ b/src/v2/examples/vue-20-component-blog-post-example/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-component-blog-post-example",
+ "version": "1.0.0",
+ "description": "Dynamically passing props, like when fetching posts from an API.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-component-blog-post-example/sandbox.config.json b/src/v2/examples/vue-20-component-blog-post-example/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-component-blog-post-example/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-dependency-injection/index.html b/src/v2/examples/vue-20-dependency-injection/index.html
new file mode 100644
index 000000000..78f72a66f
--- /dev/null
+++ b/src/v2/examples/vue-20-dependency-injection/index.html
@@ -0,0 +1,97 @@
+
+
+
+
Dependency Injection Google Maps Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-dependency-injection/package.json b/src/v2/examples/vue-20-dependency-injection/package.json
new file mode 100644
index 000000000..a4a7d58da
--- /dev/null
+++ b/src/v2/examples/vue-20-dependency-injection/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-dependency-injection",
+ "version": "1.0.0",
+ "description": "Vue.js Dependency Injection example using Google Maps.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-dependency-injection/sandbox.config.json b/src/v2/examples/vue-20-dependency-injection/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-dependency-injection/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-dynamic-components-with-binding/index.html b/src/v2/examples/vue-20-dynamic-components-with-binding/index.html
new file mode 100644
index 000000000..57ba72a4b
--- /dev/null
+++ b/src/v2/examples/vue-20-dynamic-components-with-binding/index.html
@@ -0,0 +1,74 @@
+
+
+
+
Dynamic Components Example
+
+
+
+
+
+
+ {{ tab.name }}
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-dynamic-components-with-binding/package.json b/src/v2/examples/vue-20-dynamic-components-with-binding/package.json
new file mode 100644
index 000000000..fdff914b6
--- /dev/null
+++ b/src/v2/examples/vue-20-dynamic-components-with-binding/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-dynamic-components-with-binding",
+ "version": "1.0.0",
+ "description": "Showing binding to a component's options object.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-dynamic-components-with-binding/sandbox.config.json b/src/v2/examples/vue-20-dynamic-components-with-binding/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-dynamic-components-with-binding/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-dynamic-components/index.html b/src/v2/examples/vue-20-dynamic-components/index.html
new file mode 100644
index 000000000..6d627b7cc
--- /dev/null
+++ b/src/v2/examples/vue-20-dynamic-components/index.html
@@ -0,0 +1,68 @@
+
+
+
+
Dynamic Components Example
+
+
+
+
+
+
+ {{ tab }}
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-dynamic-components/package.json b/src/v2/examples/vue-20-dynamic-components/package.json
new file mode 100644
index 000000000..67cb7f7c0
--- /dev/null
+++ b/src/v2/examples/vue-20-dynamic-components/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-dynamic-components",
+ "version": "1.0.0",
+ "description": "Used to dynamically switch between components, like in a tabbed interface.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-dynamic-components/sandbox.config.json b/src/v2/examples/vue-20-dynamic-components/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-dynamic-components/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-dynamic-state-transitions/index.html b/src/v2/examples/vue-20-dynamic-state-transitions/index.html
new file mode 100644
index 000000000..ff026bb78
--- /dev/null
+++ b/src/v2/examples/vue-20-dynamic-state-transitions/index.html
@@ -0,0 +1,129 @@
+
+
+
+
Dynamic State Transitions
+
+
+
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-dynamic-state-transitions/package.json b/src/v2/examples/vue-20-dynamic-state-transitions/package.json
new file mode 100644
index 000000000..6880b4244
--- /dev/null
+++ b/src/v2/examples/vue-20-dynamic-state-transitions/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-dynamic-state-transitions",
+ "version": "1.0.0",
+ "description": "Data backing state transitions can be updated in real time, like in this example.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-dynamic-state-transitions/sandbox.config.json b/src/v2/examples/vue-20-dynamic-state-transitions/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-dynamic-state-transitions/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-elastic-header/index.html b/src/v2/examples/vue-20-elastic-header/index.html
new file mode 100644
index 000000000..b14e19349
--- /dev/null
+++ b/src/v2/examples/vue-20-elastic-header/index.html
@@ -0,0 +1,115 @@
+
+
+
+
Elastic Header
+
+
+
+
+
+
+
+
+
+
+ Elastic Draggable SVG Header
+
+ with Vue.js +
+ dynamics.js
+
+
+
+
+ Note this is just an effect demo - there are of course many
+ additional details if you want to use this in production, e.g.
+ handling responsive sizes, reload threshold and content scrolling.
+ Those are out of scope for this quick little hack. However, the idea
+ is that you can hide them as internal details of a Vue.js component
+ and expose a simple Web-Component-like interface.
+
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-elastic-header/package.json b/src/v2/examples/vue-20-elastic-header/package.json
new file mode 100644
index 000000000..636222773
--- /dev/null
+++ b/src/v2/examples/vue-20-elastic-header/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-elastic-header",
+ "version": "1.0.0",
+ "description": "Elastic Draggable SVG Header",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-elastic-header/sandbox.config.json b/src/v2/examples/vue-20-elastic-header/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-elastic-header/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-elastic-header/style.css b/src/v2/examples/vue-20-elastic-header/style.css
new file mode 100644
index 000000000..f3fc3f0b5
--- /dev/null
+++ b/src/v2/examples/vue-20-elastic-header/style.css
@@ -0,0 +1,45 @@
+h1 {
+ font-weight: 300;
+ font-size: 1.8em;
+ margin-top: 0;
+}
+a {
+ color: #fff;
+}
+.draggable-header-view {
+ background-color: #fff;
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+ width: 320px;
+ height: 560px;
+ overflow: hidden;
+ margin: 30px auto;
+ position: relative;
+ font-family: "Roboto", Helvetica, Arial, sans-serif;
+ color: #fff;
+ font-size: 14px;
+ font-weight: 300;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.draggable-header-view .bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 0;
+}
+.draggable-header-view .header,
+.draggable-header-view .content {
+ position: relative;
+ z-index: 1;
+ padding: 30px;
+ box-sizing: border-box;
+}
+.draggable-header-view .header {
+ height: 160px;
+}
+.draggable-header-view .content {
+ color: #333;
+ line-height: 1.5em;
+}
diff --git a/src/v2/examples/vue-20-firebase-validation/index.html b/src/v2/examples/vue-20-firebase-validation/index.html
new file mode 100644
index 000000000..dcdcd7af0
--- /dev/null
+++ b/src/v2/examples/vue-20-firebase-validation/index.html
@@ -0,0 +1,96 @@
+
+
+
+
Firebase + Validation
+
+
+
+
+
+
+
+
+
+
+ {{user.name}} - {{user.email}}
+ X
+
+
+
+
+ Name cannot be empty.
+
+ Please provide a valid email address.
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-firebase-validation/package.json b/src/v2/examples/vue-20-firebase-validation/package.json
new file mode 100644
index 000000000..570fb291d
--- /dev/null
+++ b/src/v2/examples/vue-20-firebase-validation/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-firebase-validation",
+ "version": "1.0.0",
+ "description": "This example uses Firebase as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using computed properties and triggers CSS transitions when adding/removing items.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-firebase-validation/sandbox.config.json b/src/v2/examples/vue-20-firebase-validation/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-firebase-validation/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-firebase-validation/style.css b/src/v2/examples/vue-20-firebase-validation/style.css
new file mode 100644
index 000000000..761054c0c
--- /dev/null
+++ b/src/v2/examples/vue-20-firebase-validation/style.css
@@ -0,0 +1,33 @@
+body {
+ font-family: Helvetica, Arial, sans-serif;
+}
+
+ul {
+ padding: 0;
+}
+
+.user {
+ height: 30px;
+ line-height: 30px;
+ padding: 10px;
+ border-top: 1px solid #eee;
+ overflow: hidden;
+ transition: all 0.25s ease;
+}
+
+.user:last-child {
+ border-bottom: 1px solid #eee;
+}
+
+.v-enter,
+.v-leave-active {
+ height: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ border-top-width: 0;
+ border-bottom-width: 0;
+}
+
+.errors {
+ color: #f00;
+}
diff --git a/src/v2/examples/vue-20-github-commits/index.html b/src/v2/examples/vue-20-github-commits/index.html
new file mode 100644
index 000000000..fcd5d00d6
--- /dev/null
+++ b/src/v2/examples/vue-20-github-commits/index.html
@@ -0,0 +1,91 @@
+
+
+
+
GitHub Commits
+
+
+
+
+
+
Latest Vue.js Commits
+
+ {{ branch }}
+
+
vuejs/vue@{{ currentBranch }}
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-github-commits/package.json b/src/v2/examples/vue-20-github-commits/package.json
new file mode 100644
index 000000000..8afebc635
--- /dev/null
+++ b/src/v2/examples/vue-20-github-commits/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-github-commits",
+ "version": "1.0.0",
+ "description": "This example fetches latest Vue.js commits data from GitHub's API and displays them as a list. You can switch between the master and dev branches.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-github-commits/sandbox.config.json b/src/v2/examples/vue-20-github-commits/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-github-commits/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-github-commits/style.css b/src/v2/examples/vue-20-github-commits/style.css
new file mode 100644
index 000000000..c0e705b77
--- /dev/null
+++ b/src/v2/examples/vue-20-github-commits/style.css
@@ -0,0 +1,15 @@
+#demo {
+ font-family: "Helvetica", Arial, sans-serif;
+}
+a {
+ text-decoration: none;
+ color: #f66;
+}
+li {
+ line-height: 1.5em;
+ margin-bottom: 20px;
+}
+.author,
+.date {
+ font-weight: bold;
+}
diff --git a/src/v2/examples/vue-20-grid-component/index.html b/src/v2/examples/vue-20-grid-component/index.html
new file mode 100644
index 000000000..40e8a947a
--- /dev/null
+++ b/src/v2/examples/vue-20-grid-component/index.html
@@ -0,0 +1,121 @@
+
+
+
+
Grid Component
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-grid-component/package.json b/src/v2/examples/vue-20-grid-component/package.json
new file mode 100644
index 000000000..1734610da
--- /dev/null
+++ b/src/v2/examples/vue-20-grid-component/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-grid-component",
+ "version": "1.0.0",
+ "description": "This is an example of creating a reusable grid component and using it with external data.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-grid-component/sandbox.config.json b/src/v2/examples/vue-20-grid-component/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-grid-component/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-grid-component/style.css b/src/v2/examples/vue-20-grid-component/style.css
new file mode 100644
index 000000000..f10002ab8
--- /dev/null
+++ b/src/v2/examples/vue-20-grid-component/style.css
@@ -0,0 +1,60 @@
+body {
+ font-family: Helvetica Neue, Arial, sans-serif;
+ font-size: 14px;
+ color: #444;
+}
+
+table {
+ border: 2px solid #42b983;
+ border-radius: 3px;
+ background-color: #fff;
+}
+
+th {
+ background-color: #42b983;
+ color: rgba(255, 255, 255, 0.66);
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+td {
+ background-color: #f9f9f9;
+}
+
+th,
+td {
+ min-width: 120px;
+ padding: 10px 20px;
+}
+
+th.active {
+ color: #fff;
+}
+
+th.active .arrow {
+ opacity: 1;
+}
+
+.arrow {
+ display: inline-block;
+ vertical-align: middle;
+ width: 0;
+ height: 0;
+ margin-left: 5px;
+ opacity: 0.66;
+}
+
+.arrow.asc {
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-bottom: 4px solid #fff;
+}
+
+.arrow.dsc {
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 4px solid #fff;
+}
diff --git a/src/v2/examples/vue-20-hello-world/index.html b/src/v2/examples/vue-20-hello-world/index.html
new file mode 100644
index 000000000..95121199a
--- /dev/null
+++ b/src/v2/examples/vue-20-hello-world/index.html
@@ -0,0 +1,21 @@
+
+
+
+
My first Vue app
+
+
+
+
+ {{ message }}
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-hello-world/package.json b/src/v2/examples/vue-20-hello-world/package.json
new file mode 100644
index 000000000..c02e41273
--- /dev/null
+++ b/src/v2/examples/vue-20-hello-world/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-hello-world",
+ "version": "1.0.0",
+ "description": "The easiest way to try out Vue.js, edit this Hello World example",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-hello-world/sandbox.config.json b/src/v2/examples/vue-20-hello-world/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-hello-world/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-keep-alive-with-dynamic-components/index.html b/src/v2/examples/vue-20-keep-alive-with-dynamic-components/index.html
new file mode 100644
index 000000000..339d65106
--- /dev/null
+++ b/src/v2/examples/vue-20-keep-alive-with-dynamic-components/index.html
@@ -0,0 +1,97 @@
+
+
+
+
Vue Component Blog Post Example
+
+
+
+
+
+
+ {{ tab }}
+
+
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-keep-alive-with-dynamic-components/package.json b/src/v2/examples/vue-20-keep-alive-with-dynamic-components/package.json
new file mode 100644
index 000000000..7bf11e28e
--- /dev/null
+++ b/src/v2/examples/vue-20-keep-alive-with-dynamic-components/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-keep-alive-with-dynamic-components",
+ "version": "1.0.0",
+ "description": "The Posts tab maintains its state (the selected post) even when it's not rendered.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-keep-alive-with-dynamic-components/sandbox.config.json b/src/v2/examples/vue-20-keep-alive-with-dynamic-components/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-keep-alive-with-dynamic-components/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-keep-alive-with-dynamic-components/style.css b/src/v2/examples/vue-20-keep-alive-with-dynamic-components/style.css
new file mode 100644
index 000000000..5681ac6cb
--- /dev/null
+++ b/src/v2/examples/vue-20-keep-alive-with-dynamic-components/style.css
@@ -0,0 +1,49 @@
+.tab-button {
+ padding: 6px 10px;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ border: 1px solid #ccc;
+ cursor: pointer;
+ background: #f0f0f0;
+ margin-bottom: -1px;
+ margin-right: -1px;
+}
+.tab-button:hover {
+ background: #e0e0e0;
+}
+.tab-button.active {
+ background: #e0e0e0;
+}
+.tab {
+ border: 1px solid #ccc;
+ padding: 10px;
+}
+.posts-tab {
+ display: flex;
+}
+.posts-sidebar {
+ max-width: 40vw;
+ margin: 0;
+ padding: 0 10px 0 0;
+ list-style-type: none;
+ border-right: 1px solid #ccc;
+}
+.posts-sidebar li {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ cursor: pointer;
+}
+.posts-sidebar li:hover {
+ background: #eee;
+}
+.posts-sidebar li.selected {
+ background: lightblue;
+}
+.selected-post-container {
+ padding-left: 10px;
+}
+.selected-post > :first-child {
+ margin-top: 0;
+ padding-top: 0;
+}
diff --git a/src/v2/examples/vue-20-list-move-transitions/index.html b/src/v2/examples/vue-20-list-move-transitions/index.html
new file mode 100644
index 000000000..536a9ba25
--- /dev/null
+++ b/src/v2/examples/vue-20-list-move-transitions/index.html
@@ -0,0 +1,43 @@
+
+
+
+
List Move Transitions Sudoku Example
+
+
+
+
+
+
+
Lazy Sudoku
+
Keep hitting the shuffle button until you win.
+
+
+ Shuffle
+
+
+
+ {{ cell.number }}
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-list-move-transitions/package.json b/src/v2/examples/vue-20-list-move-transitions/package.json
new file mode 100644
index 000000000..f18a53b34
--- /dev/null
+++ b/src/v2/examples/vue-20-list-move-transitions/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-list-move-transitions",
+ "version": "1.0.0",
+ "description": "Example showing list entering/leaving transitions in Sudoku.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-list-move-transitions/sandbox.config.json b/src/v2/examples/vue-20-list-move-transitions/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-list-move-transitions/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-list-move-transitions/style.css b/src/v2/examples/vue-20-list-move-transitions/style.css
new file mode 100644
index 000000000..103973e3c
--- /dev/null
+++ b/src/v2/examples/vue-20-list-move-transitions/style.css
@@ -0,0 +1,25 @@
+.container {
+ display: flex;
+ flex-wrap: wrap;
+ width: 238px;
+ margin-top: 10px;
+}
+.cell {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ width: 25px;
+ height: 25px;
+ border: 1px solid #aaa;
+ margin-right: -1px;
+ margin-bottom: -1px;
+}
+.cell:nth-child(3n) {
+ margin-right: 0;
+}
+.cell:nth-child(27n) {
+ margin-bottom: 0;
+}
+.cell-move {
+ transition: transform 1s;
+}
diff --git a/src/v2/examples/vue-20-markdown-editor/index.html b/src/v2/examples/vue-20-markdown-editor/index.html
new file mode 100644
index 000000000..e740dfb81
--- /dev/null
+++ b/src/v2/examples/vue-20-markdown-editor/index.html
@@ -0,0 +1,35 @@
+
+
+
+
Markdown Editor
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-markdown-editor/package.json b/src/v2/examples/vue-20-markdown-editor/package.json
new file mode 100644
index 000000000..7866640c1
--- /dev/null
+++ b/src/v2/examples/vue-20-markdown-editor/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-markdown-editor",
+ "version": "1.0.0",
+ "description": "Dead simple Markdown editor.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-markdown-editor/sandbox.config.json b/src/v2/examples/vue-20-markdown-editor/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-markdown-editor/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-markdown-editor/style.css b/src/v2/examples/vue-20-markdown-editor/style.css
new file mode 100644
index 000000000..01cacdc9d
--- /dev/null
+++ b/src/v2/examples/vue-20-markdown-editor/style.css
@@ -0,0 +1,33 @@
+html,
+body,
+#editor {
+ margin: 0;
+ height: 100%;
+ font-family: "Helvetica Neue", Arial, sans-serif;
+ color: #333;
+}
+
+textarea,
+#editor div {
+ display: inline-block;
+ width: 49%;
+ height: 100%;
+ vertical-align: top;
+ box-sizing: border-box;
+ padding: 0 20px;
+}
+
+textarea {
+ border: none;
+ border-right: 1px solid #ccc;
+ resize: none;
+ outline: none;
+ background-color: #f6f6f6;
+ font-size: 14px;
+ font-family: "Monaco", courier, monospace;
+ padding: 20px;
+}
+
+code {
+ color: #f66;
+}
diff --git a/src/v2/examples/vue-20-modal-component/index.html b/src/v2/examples/vue-20-modal-component/index.html
new file mode 100644
index 000000000..60235e8e7
--- /dev/null
+++ b/src/v2/examples/vue-20-modal-component/index.html
@@ -0,0 +1,69 @@
+
+
+
+
Modal Component
+
+
+
+
+
+
+
+
+ Show Modal
+
+
+
+ custom header
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-modal-component/package.json b/src/v2/examples/vue-20-modal-component/package.json
new file mode 100644
index 000000000..6d64ba243
--- /dev/null
+++ b/src/v2/examples/vue-20-modal-component/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-modal-component",
+ "version": "1.0.0",
+ "description": "Features used: component, prop passing, content insertion, transitions.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-modal-component/sandbox.config.json b/src/v2/examples/vue-20-modal-component/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-modal-component/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-modal-component/style.css b/src/v2/examples/vue-20-modal-component/style.css
new file mode 100644
index 000000000..d36f166fb
--- /dev/null
+++ b/src/v2/examples/vue-20-modal-component/style.css
@@ -0,0 +1,63 @@
+.modal-mask {
+ position: fixed;
+ z-index: 9998;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: table;
+ transition: opacity 0.3s ease;
+}
+
+.modal-wrapper {
+ display: table-cell;
+ vertical-align: middle;
+}
+
+.modal-container {
+ width: 300px;
+ margin: 0px auto;
+ padding: 20px 30px;
+ background-color: #fff;
+ border-radius: 2px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+ transition: all 0.3s ease;
+ font-family: Helvetica, Arial, sans-serif;
+}
+
+.modal-header h3 {
+ margin-top: 0;
+ color: #42b983;
+}
+
+.modal-body {
+ margin: 20px 0;
+}
+
+.modal-default-button {
+ float: right;
+}
+
+/*
+ * The following styles are auto-applied to elements with
+ * transition="modal" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the modal transition by editing
+ * these styles.
+ */
+
+.modal-enter {
+ opacity: 0;
+}
+
+.modal-leave-active {
+ opacity: 0;
+}
+
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+ -webkit-transform: scale(1.1);
+ transform: scale(1.1);
+}
diff --git a/src/v2/examples/vue-20-priority-d-rules-correct-example/index.html b/src/v2/examples/vue-20-priority-d-rules-correct-example/index.html
new file mode 100644
index 000000000..50b2cba0e
--- /dev/null
+++ b/src/v2/examples/vue-20-priority-d-rules-correct-example/index.html
@@ -0,0 +1,47 @@
+
+
+
+
Priority D Rules Correct Example
+
+
+
+
+
+
+
+ Save
+
+
+ Edit
+
+
+
+
+ With a unique key on each conditional element, the
+ transition is now applied.
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-priority-d-rules-correct-example/package.json b/src/v2/examples/vue-20-priority-d-rules-correct-example/package.json
new file mode 100644
index 000000000..7afc08c22
--- /dev/null
+++ b/src/v2/examples/vue-20-priority-d-rules-correct-example/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-priority-d-rules-correct-example",
+ "version": "1.0.0",
+ "description": "A unique key on each conditional element so the transition is applied.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-priority-d-rules-correct-example/sandbox.config.json b/src/v2/examples/vue-20-priority-d-rules-correct-example/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-priority-d-rules-correct-example/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/index.html b/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/index.html
new file mode 100644
index 000000000..81951e766
--- /dev/null
+++ b/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/index.html
@@ -0,0 +1,54 @@
+
+
+
+
Priority D Rules Unintended Consequences
+
+
+
+
+
+
+
+ Save
+
+
+ Edit
+
+
+
+
+ When clicking on the <button> above, the transition
+ is never applied because Vue is reusing the same element for render
+ efficiency. To force Vue to treat these as separate elements, a
+ unique key must be added
+ to each conditional element.
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/package.json b/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/package.json
new file mode 100644
index 000000000..43c1c3a9f
--- /dev/null
+++ b/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-priority-d-rules-unintended-consequences",
+ "version": "1.0.0",
+ "description": "Lacking a unique key on each conditional element, the transition is never applied.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/sandbox.config.json b/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-programmatic-event-listeners/index.html b/src/v2/examples/vue-20-programmatic-event-listeners/index.html
new file mode 100644
index 000000000..ba0503c97
--- /dev/null
+++ b/src/v2/examples/vue-20-programmatic-event-listeners/index.html
@@ -0,0 +1,32 @@
+
+
+
+
Programmatic Event Listeners using Pikaday
+
+
+
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-programmatic-event-listeners/package.json b/src/v2/examples/vue-20-programmatic-event-listeners/package.json
new file mode 100644
index 000000000..42312caa1
--- /dev/null
+++ b/src/v2/examples/vue-20-programmatic-event-listeners/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-programmatic-event-listeners",
+ "version": "1.0.0",
+ "description": "Vue.js Programmatic Event Listeners example using Pikaday",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-programmatic-event-listeners/sandbox.config.json b/src/v2/examples/vue-20-programmatic-event-listeners/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-programmatic-event-listeners/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-realtime-with-deepstreamhub/index.html b/src/v2/examples/vue-20-realtime-with-deepstreamhub/index.html
new file mode 100644
index 000000000..e9396f386
--- /dev/null
+++ b/src/v2/examples/vue-20-realtime-with-deepstreamhub/index.html
@@ -0,0 +1,184 @@
+
+
+
+
Realtime with deepstreamHub
+
+
+
+
+
+
+
+
+
+ Connection-State is: {{connectionState}}
+
+
+
+
+
+
+
+
+
Realtime Datastore
+
+ Firstname
+
+
+ Lastname
+
+
+
+
+
+
+
Publish
+
+ Send test-event with
+
+
+
+
+
+
+
+
+
Request
+
+ Make multiply request
+
+
+ {{displayResponse}}
+
+
+
+
Response
+
Multiply number with:
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-realtime-with-deepstreamhub/package.json b/src/v2/examples/vue-20-realtime-with-deepstreamhub/package.json
new file mode 100644
index 000000000..abf1458b2
--- /dev/null
+++ b/src/v2/examples/vue-20-realtime-with-deepstreamhub/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-realtime-with-deepstreamhub",
+ "version": "1.0.0",
+ "description": "This example uses deepstreamHub to synchronize realtime data, send events and make remote procedure calls between clients (you can try opening it in multiple browser windows).",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-realtime-with-deepstreamhub/sandbox.config.json b/src/v2/examples/vue-20-realtime-with-deepstreamhub/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-realtime-with-deepstreamhub/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-realtime-with-deepstreamhub/style.css b/src/v2/examples/vue-20-realtime-with-deepstreamhub/style.css
new file mode 100644
index 000000000..b643051df
--- /dev/null
+++ b/src/v2/examples/vue-20-realtime-with-deepstreamhub/style.css
@@ -0,0 +1,122 @@
+* {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ font-family: RobotoCondensed, sans-serif;
+ font-size: 14px;
+ color: #333;
+ box-sizing: border-box;
+ outline: none;
+ transition: all 200ms ease;
+}
+
+body {
+ background-color: #fff;
+}
+
+.group {
+ width: 80%;
+ max-width: 800px;
+ margin: 40px auto;
+ padding: 20px;
+ position: relative;
+ overflow: hidden;
+}
+
+.group.connectionState {
+ margin: 10px auto 0;
+ padding: 0 20px;
+}
+
+h2 {
+ font-size: 20px;
+ border-bottom: 1px solid #ccc;
+ padding-bottom: 4px;
+ margin-bottom: 10px;
+ position: relative;
+}
+
+h2 small {
+ position: absolute;
+ right: 0;
+}
+
+h2 small * {
+ display: inline-block;
+ vertical-align: middle;
+ font-weight: normal;
+ color: #333;
+ font-size: 12px;
+ cursor: pointer;
+}
+
+button,
+input,
+.item {
+ height: 32px;
+ padding: 6px;
+}
+
+button {
+ border: none;
+ background: #7185ec;
+ color: #fff;
+ font-weight: 500;
+ border-radius: 4px;
+ cursor: pointer;
+ text-align: center;
+ cursor: pointer;
+ font-weight: bold;
+ box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
+}
+
+button:hover {
+ background-color: #586cd8;
+}
+
+button:active {
+ position: relative;
+ top: 1px;
+ left: 1px;
+ box-shadow: none;
+}
+
+.half {
+ width: 48%;
+ float: left;
+ position: relative;
+}
+
+.half.left {
+ margin-right: 4%;
+}
+
+label {
+ font-size: 11px;
+ font-style: italic;
+}
+
+input {
+ border-radius: 4px;
+ border: 1px solid #ccc;
+}
+
+input:focus {
+ border-color: #7185ec;
+}
+
+.input-group input {
+ width: 100%;
+}
+
+span.response {
+ display: inline-block;
+ background-color: #dddddd;
+}
+
+@media screen and (max-width: 900px) {
+ .half {
+ width: 100%;
+ margin: 0 0 10px !important;
+ }
+}
diff --git a/src/v2/examples/vue-20-single-file-components/Hello.vue b/src/v2/examples/vue-20-single-file-components/Hello.vue
new file mode 100644
index 000000000..9ca04cbb4
--- /dev/null
+++ b/src/v2/examples/vue-20-single-file-components/Hello.vue
@@ -0,0 +1,20 @@
+
+ {{ greeting }} World!
+
+
+
+
+
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-single-file-components/index.html b/src/v2/examples/vue-20-single-file-components/index.html
new file mode 100644
index 000000000..865e670f4
--- /dev/null
+++ b/src/v2/examples/vue-20-single-file-components/index.html
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-single-file-components/index.js b/src/v2/examples/vue-20-single-file-components/index.js
new file mode 100644
index 000000000..4cd7af61f
--- /dev/null
+++ b/src/v2/examples/vue-20-single-file-components/index.js
@@ -0,0 +1,10 @@
+import Vue from "vue";
+import App from "./Hello";
+
+Vue.config.productionTip = false;
+
+new Vue({
+ el: "#app",
+ template: "
",
+ components: { App }
+});
diff --git a/src/v2/examples/vue-20-single-file-components/package.json b/src/v2/examples/vue-20-single-file-components/package.json
new file mode 100644
index 000000000..36dd9df6e
--- /dev/null
+++ b/src/v2/examples/vue-20-single-file-components/package.json
@@ -0,0 +1,17 @@
+{
+ "name": "vue-20-single-file-components",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint"
+ },
+ "dependencies": {
+ "vue": "^2.6.11"
+ },
+ "devDependencies": {},
+ "browserslist": ["> 1%", "last 2 versions", "not ie <= 8"],
+ "keywords": [],
+ "description": "Hello.vue single-file components example using a .vue extension."
+}
diff --git a/src/v2/examples/vue-20-svg-graph/index.html b/src/v2/examples/vue-20-svg-graph/index.html
new file mode 100644
index 000000000..885a3fbbe
--- /dev/null
+++ b/src/v2/examples/vue-20-svg-graph/index.html
@@ -0,0 +1,142 @@
+
+
+
+
SVG Graph
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{stat.label}}
+ {{stat.value}}
+ X
+
+
+
{{ stats }}
+
+
+
* input[type="range"] requires IE10 or above.
+
+
+
+
diff --git a/src/v2/examples/vue-20-svg-graph/package.json b/src/v2/examples/vue-20-svg-graph/package.json
new file mode 100644
index 000000000..afbe362f7
--- /dev/null
+++ b/src/v2/examples/vue-20-svg-graph/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-svg-graph",
+ "version": "1.0.0",
+ "description": "This example showcases a combination of custom component, computed property, two-way binding and SVG support.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-svg-graph/sandbox.config.json b/src/v2/examples/vue-20-svg-graph/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-svg-graph/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-svg-graph/style.css b/src/v2/examples/vue-20-svg-graph/style.css
new file mode 100644
index 000000000..b533e006a
--- /dev/null
+++ b/src/v2/examples/vue-20-svg-graph/style.css
@@ -0,0 +1,31 @@
+body {
+ font-family: Helvetica Neue, Arial, sans-serif;
+}
+
+polygon {
+ fill: #42b983;
+ opacity: 0.75;
+}
+
+circle {
+ fill: transparent;
+ stroke: #999;
+}
+
+text {
+ font-family: Helvetica Neue, Arial, sans-serif;
+ font-size: 10px;
+ fill: #666;
+}
+
+label {
+ display: inline-block;
+ margin-left: 10px;
+ width: 20px;
+}
+
+#raw {
+ position: absolute;
+ top: 0;
+ left: 300px;
+}
diff --git a/src/v2/examples/vue-20-template-compilation/index.html b/src/v2/examples/vue-20-template-compilation/index.html
new file mode 100644
index 000000000..1582c6ea4
--- /dev/null
+++ b/src/v2/examples/vue-20-template-compilation/index.html
@@ -0,0 +1,83 @@
+
+
+
+
Template Compilation
+
+
+
+
+
+
+
+
render:
+
{{ result.render }}
+
staticRenderFns:
+
_m({{ index }}): {{ fn }}
+
{{ result.staticRenderFns }}
+
+
+
Compilation Error:
+
{{ result }}
+
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-template-compilation/package.json b/src/v2/examples/vue-20-template-compilation/package.json
new file mode 100644
index 000000000..c802e5660
--- /dev/null
+++ b/src/v2/examples/vue-20-template-compilation/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-template-compilation",
+ "version": "1.0.0",
+ "description": "A demo using Vue.compile to live-compile a template string.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-template-compilation/sandbox.config.json b/src/v2/examples/vue-20-template-compilation/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-template-compilation/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-template-compilation/style.css b/src/v2/examples/vue-20-template-compilation/style.css
new file mode 100644
index 000000000..02a88e450
--- /dev/null
+++ b/src/v2/examples/vue-20-template-compilation/style.css
@@ -0,0 +1,45 @@
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+body {
+ font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+ -webkit-user-select: inherit;
+ user-select: inherit;
+ font-size: 14px;
+ color: #34495e;
+}
+
+pre {
+ padding: 10px;
+ overflow-x: auto;
+ background: #f2f2f2;
+}
+
+code {
+ white-space: pre;
+ padding: 0;
+}
+
+code,
+pre,
+textarea {
+ font-family: "Roboto Mono", Monaco, courier, monospace;
+}
+
+textarea {
+ width: 100%;
+ font-size: 14px;
+ margin-bottom: 8px;
+ border-color: #bbb;
+ padding: 8px;
+ border-bottom-width: 2px;
+ outline: none;
+ color: #34495e;
+}
+
+textarea:focus {
+ background: lightyellow;
+}
diff --git a/src/v2/examples/vue-20-todomvc/index.html b/src/v2/examples/vue-20-todomvc/index.html
new file mode 100644
index 000000000..04463a3b7
--- /dev/null
+++ b/src/v2/examples/vue-20-todomvc/index.html
@@ -0,0 +1,258 @@
+
+
+
+
TodoMVC
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-todomvc/package.json b/src/v2/examples/vue-20-todomvc/package.json
new file mode 100644
index 000000000..8fb7dbe6d
--- /dev/null
+++ b/src/v2/examples/vue-20-todomvc/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-todomvc",
+ "version": "1.0.0",
+ "description": "This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines).",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-todomvc/sandbox.config.json b/src/v2/examples/vue-20-todomvc/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-todomvc/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-tree-view/index.html b/src/v2/examples/vue-20-tree-view/index.html
new file mode 100644
index 000000000..63476085e
--- /dev/null
+++ b/src/v2/examples/vue-20-tree-view/index.html
@@ -0,0 +1,121 @@
+
+
+
+
Tree View
+
+
+
+
+
+
+
+
(You can double click on an item to turn it into a folder.)
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-tree-view/package.json b/src/v2/examples/vue-20-tree-view/package.json
new file mode 100644
index 000000000..911f9e37e
--- /dev/null
+++ b/src/v2/examples/vue-20-tree-view/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-tree-view",
+ "version": "1.0.0",
+ "description": "Example of a simple tree view implementation showcasing recursive usage of components.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-tree-view/sandbox.config.json b/src/v2/examples/vue-20-tree-view/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-tree-view/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-tree-view/style.css b/src/v2/examples/vue-20-tree-view/style.css
new file mode 100644
index 000000000..39c9133b8
--- /dev/null
+++ b/src/v2/examples/vue-20-tree-view/style.css
@@ -0,0 +1,15 @@
+body {
+ font-family: Menlo, Consolas, monospace;
+ color: #444;
+}
+.item {
+ cursor: pointer;
+}
+.bold {
+ font-weight: bold;
+}
+ul {
+ padding-left: 1em;
+ line-height: 1.5em;
+ list-style-type: dot;
+}
diff --git a/src/v2/examples/vue-20-two-way-currency-filter/currency-validator.js b/src/v2/examples/vue-20-two-way-currency-filter/currency-validator.js
new file mode 100644
index 000000000..80ab295e3
--- /dev/null
+++ b/src/v2/examples/vue-20-two-way-currency-filter/currency-validator.js
@@ -0,0 +1,61 @@
+var currencyValidator = {
+ format: function(number) {
+ return (Math.trunc(number * 100) / 100).toFixed(2);
+ },
+ parse: function(newString, oldNumber) {
+ var CleanParse = function(value) {
+ return { value: value };
+ };
+ var CurrencyWarning = function(warning, value) {
+ return {
+ warning: warning,
+ value: value,
+ attempt: newString
+ };
+ };
+ var NotAValidDollarAmountWarning = function(value) {
+ return new CurrencyWarning(
+ newString + " is not a valid dollar amount",
+ value
+ );
+ };
+ var AutomaticConversionWarning = function(value) {
+ return new CurrencyWarning(
+ newString + " was automatically converted to " + value,
+ value
+ );
+ };
+
+ var newNumber = Number(newString);
+ var indexOfDot = newString.indexOf(".");
+ var indexOfE = newString.indexOf("e");
+
+ if (isNaN(newNumber)) {
+ if (
+ indexOfDot === -1 &&
+ indexOfE > 0 &&
+ indexOfE === newString.length - 1 &&
+ Number(newString.slice(0, indexOfE)) !== 0
+ ) {
+ return new CleanParse(oldNumber);
+ } else {
+ return new NotAValidDollarAmountWarning(oldNumber);
+ }
+ }
+
+ var newCurrencyString = currencyValidator.format(newNumber);
+ var newCurrencyNumber = Number(newCurrencyString);
+
+ if (newCurrencyNumber === newNumber) {
+ if (indexOfE !== -1 && indexOfE === newString.length - 2) {
+ return new AutomaticConversionWarning(newNumber);
+ } else {
+ return new CleanParse(newNumber);
+ }
+ } else {
+ return new NotAValidDollarAmountWarning(
+ newNumber > newCurrencyNumber ? newCurrencyNumber : oldNumber
+ );
+ }
+ }
+};
diff --git a/src/v2/examples/vue-20-two-way-currency-filter/index.html b/src/v2/examples/vue-20-two-way-currency-filter/index.html
new file mode 100644
index 000000000..c3fd6e255
--- /dev/null
+++ b/src/v2/examples/vue-20-two-way-currency-filter/index.html
@@ -0,0 +1,90 @@
+
+
+
+
Two-way Currency Filter
+
+
+
+
+
+
+
+
+
+
+
Total: ${{ total }}
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-two-way-currency-filter/package.json b/src/v2/examples/vue-20-two-way-currency-filter/package.json
new file mode 100644
index 000000000..ef67bd57a
--- /dev/null
+++ b/src/v2/examples/vue-20-two-way-currency-filter/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-two-way-currency-filter",
+ "version": "1.0.0",
+ "description": "Using lifecycle hooks and DOM events in place of the hidden behavior of two-way filters",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
diff --git a/src/v2/examples/vue-20-two-way-currency-filter/sandbox.config.json b/src/v2/examples/vue-20-two-way-currency-filter/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-two-way-currency-filter/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-wrapper-component/index.html b/src/v2/examples/vue-20-wrapper-component/index.html
new file mode 100644
index 000000000..7ee7577af
--- /dev/null
+++ b/src/v2/examples/vue-20-wrapper-component/index.html
@@ -0,0 +1,90 @@
+
+
+
+
Wrapper Component
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-wrapper-component/package.json b/src/v2/examples/vue-20-wrapper-component/package.json
new file mode 100644
index 000000000..92fe02c5c
--- /dev/null
+++ b/src/v2/examples/vue-20-wrapper-component/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-wrapper-component",
+ "version": "1.0.0",
+ "description": "In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-wrapper-component/sandbox.config.json b/src/v2/examples/vue-20-wrapper-component/sandbox.config.json
new file mode 100644
index 000000000..5866ed744
--- /dev/null
+++ b/src/v2/examples/vue-20-wrapper-component/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/guide/class-and-style.md b/src/v2/guide/class-and-style.md
index 2138dc349..4f8628113 100644
--- a/src/v2/guide/class-and-style.md
+++ b/src/v2/guide/class-and-style.md
@@ -4,10 +4,12 @@ type: guide
order: 6
---
-操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 `v-bind` 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 `v-bind` 用于 `class` 和 `style` 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
+操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 `v-bind` 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 `v-bind` 用于 `class` 和 `style` 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
## 绑定 HTML Class
+
+
### 对象语法
我们可以传给 `v-bind:class` 一个对象，以动态地切换 class：
@@ -15,9 +17,9 @@ order: 6
``` html
```
-上面的语法表示 `active` 这个 class 存在与否将取决于数据属性 `isActive` 的 [truthiness](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy)。
+上面的语法表示 `active` 这个 class 存在与否将取决于数据 property `isActive` 的 [truthiness](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy)。
-你可以在对象中传入更多属性来动态切换多个 class。此外，`v-bind:class` 指令也可以与普通的 class 属性共存。当有如下模板:
+你可以在对象中传入更多字段来动态切换多个 class。此外，`v-bind:class` 指令也可以与普通的 class attribute 共存。当有如下模板：
``` html
这个章节假设你已经对 [Vue 组件](components.html)有一定的了解。当然你也可以先跳过这里，稍后再回过头来看。
-当在一个自定义组件上使用 `class` 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。
+当在一个自定义组件上使用 `class` property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
例如，如果你声明了这个组件：
@@ -134,7 +136,7 @@ Vue.component('my-component', {
```
-HTML 将被渲染为:
+HTML 将被渲染为：
``` html
Hi
@@ -156,7 +158,7 @@ HTML 将被渲染为:
### 对象语法
-`v-bind:style` 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：
+`v-bind:style` 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
``` html
@@ -197,13 +199,13 @@ data: {
### 自动添加前缀
-当 `v-bind:style` 使用需要添加[浏览器引擎前缀](https://developer.mozilla.org/zh-CN/docs/Glossary/Vendor_Prefix)的 CSS 属性时，如 `transform`，Vue.js 会自动侦测并添加相应的前缀。
+当 `v-bind:style` 使用需要添加[浏览器引擎前缀](https://developer.mozilla.org/zh-CN/docs/Glossary/Vendor_Prefix)的 CSS property 时，如 `transform`，Vue.js 会自动侦测并添加相应的前缀。
### 多重值
> 2.3.0+
-从 2.3.0 起你可以为 `style` 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
+从 2.3.0 起你可以为 `style` 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
``` html
diff --git a/src/v2/guide/comparison.md b/src/v2/guide/comparison.md
index 9aa066b9b..add13b4a8 100644
--- a/src/v2/guide/comparison.md
+++ b/src/v2/guide/comparison.md
@@ -8,7 +8,7 @@ order: 801
客观来说，作为核心团队成员，显然我们会更偏爱 Vue，认为对于某些问题来讲用 Vue 解决会更好。如果没有这点信念，我们也就不会整天为此忙活了。但是在此，我们想尽可能地公平和准确地来描述一切。其他的框架也有显著的优点，例如 React 庞大的生态系统，或者像是 Knockout 对浏览器的支持覆盖到了 IE6。我们会尝试着把这些内容全部列出来。
-我们也希望得到**你**的帮助，来使文档保持最新状态，因为 JavaScript 的世界进步的太快。如果你注意到一个不准确或似乎不太正确的地方，请[提交问题](https://github.com/vuejs/vuejs.org/issues/new?title=Inaccuracy+in+comparisons+guide)让我们知道。
+我们也希望得到**你**的帮助，来使文档保持最新状态，因为 JavaScript 的世界进步得太快。如果你注意到一个不准确或似乎不太正确的地方，请[提交问题](https://github.com/vuejs/v2.vuejs.org/issues/new?title=Inaccuracy+in+comparisons+guide)让我们知道。
## React
@@ -70,7 +70,7 @@ Vue 的整体思想是拥抱经典的 Web 技术，并在其上进行扩展。
#### 组件作用域内的 CSS
-除非你把组件分布在多个文件上 (例如 [CSS Modules](https://github.com/gajus/react-css-modules))，CSS 作用域在 React 中是通过 CSS-in-JS 的方案实现的 (比如 [styled-components](https://github.com/styled-components/styled-components)、[glamorous](https://github.com/paypal/glamorous) 和 [emotion](https://github.com/emotion-js/emotion))。这引入了一个新的面向组件的样式范例，它和普通的 CSS 撰写过程是有区别的。另外，虽然在构建时将 CSS 提取到一个单独的样式表是支持的，但 bundle 里通常还是需要一个运行时程序来让这些样式生效。当你能够利用 JavaScript 灵活处理样式的同时，也需要权衡 bundle 的尺寸和运行时的开销。
+除非你把组件分布在多个文件上 (例如 [CSS Modules](https://github.com/gajus/react-css-modules))，CSS 作用域在 React 中是通过 CSS-in-JS 的方案实现的 (比如 [styled-components](https://github.com/styled-components/styled-components) 和 [emotion](https://github.com/emotion-js/emotion))。这引入了一个新的面向组件的样式范例，它和普通的 CSS 撰写过程是有区别的。另外，虽然在构建时将 CSS 提取到一个单独的样式表是支持的，但 bundle 里通常还是需要一个运行时程序来让这些样式生效。当你能够利用 JavaScript 灵活处理样式的同时，也需要权衡 bundle 的尺寸和运行时的开销。
如果你是一个 CSS-in-JS 的爱好者，许多主流的 CSS-in-JS 库也都支持 Vue (比如 [styled-components-vue](https://github.com/styled-components/vue-styled-components) 和 [vue-emotion](https://github.com/egoist/vue-emotion))。这里 React 和 Vue 主要的区别是，Vue 设置样式的默认方法是[单文件组件](single-file-components.html)里类似 `style` 的标签。
@@ -86,7 +86,7 @@ Vue 的整体思想是拥抱经典的 Web 技术，并在其上进行扩展。
```
-这个可选 `scoped` 属性会自动添加一个唯一的属性 (比如 `data-v-21e5b78`) 为组件内 CSS 指定作用域，编译的时候 `.list-container:hover` 会被编译成类似 `.list-container[data-v-21e5b78]:hover`。
+这个可选 `scoped` attribute 会自动添加一个唯一的 attribute (比如 `data-v-21e5b78`) 为组件内 CSS 指定作用域，编译的时候 `.list-container:hover` 会被编译成类似 `.list-container[data-v-21e5b78]:hover`。
最后，Vue 的单文件组件里的样式设置是非常灵活的。通过 [vue-loader](https://github.com/vuejs/vue-loader)，你可以使用任意预处理器、后处理器，甚至深度集成 [CSS Modules](https://vue-loader.vuejs.org/en/features/css-modules.html)——全部都在 `
{% endraw %}
-上述内容可以通过 Vue 的 `
` 元素加一个特殊的 `is` 特性来实现：
+上述内容可以通过 Vue 的 `` 元素加一个特殊的 `is` attribute 来实现：
```html
@@ -599,7 +601,9 @@ new Vue({
- 已注册组件的名字，或
- 一个组件的选项对象
-你可以在[这里](https://jsfiddle.net/chrisvfritz/o3nycadu/)查阅并体验完整的代码，或在[这个版本](https://jsfiddle.net/chrisvfritz/b2qj69o1/)了解绑定组件选项对象，而不是已注册组件名的示例。
+你可以在[这里](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-components)查阅并体验完整的代码，或在[这个版本](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-components-with-binding)了解绑定组件选项对象，而不是已注册组件名的示例。
+
+请留意，这个 attribute 可以用于常规 HTML 元素，但这些元素将被视为组件，这意味着所有的 attribute **都会作为 DOM attribute 被绑定**。对于像 `value` 这样的 property，若想让其如预期般工作，你需要使用 [`.prop` 修饰器](../api/#v-bind)。
到目前为止，关于动态组件你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把[动态和异步组件](components-dynamic-async.html)读完。
@@ -615,7 +619,7 @@ new Vue({
```
-这个自定义组件 `` 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 `is` 特性给了我们一个变通的办法：
+这个自定义组件 `` 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 `is` attribute 给了我们一个变通的办法：
``` html
diff --git a/src/v2/guide/computed.md b/src/v2/guide/computed.md
index ba388ecf7..ee8a622c8 100644
--- a/src/v2/guide/computed.md
+++ b/src/v2/guide/computed.md
@@ -14,7 +14,7 @@ order: 5
```
-在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 `message` 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
+在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 `message` 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用**计算属性**。
@@ -65,7 +65,7 @@ var vm = new Vue({
{% endraw %}
-这里我们声明了一个计算属性 `reversedMessage`。我们提供的函数将用作属性 `vm.reversedMessage` 的 getter 函数：
+这里我们声明了一个计算属性 `reversedMessage`。我们提供的函数将用作 property `vm.reversedMessage` 的 getter 函数：
``` js
console.log(vm.reversedMessage) // => 'olleH'
@@ -75,7 +75,7 @@ console.log(vm.reversedMessage) // => 'eybdooG'
你可以打开浏览器的控制台，自行修改例子中的 vm。`vm.reversedMessage` 的值始终取决于 `vm.message` 的值。
-你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 `vm.reversedMessage` 依赖于 `vm.message`，因此当 `vm.message` 发生改变时，所有依赖 `vm.reversedMessage` 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。
+你可以像绑定普通 property 一样在模板中绑定计算属性。Vue 知道 `vm.reversedMessage` 依赖于 `vm.message`，因此当 `vm.message` 发生改变时，所有依赖 `vm.reversedMessage` 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。
### 计算属性缓存 vs 方法
@@ -94,7 +94,7 @@ methods: {
}
```
-我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是**计算属性是基于它们的依赖进行缓存的**。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 `message` 还没有发生改变，多次访问 `reversedMessage` 计算属性会立即返回之前的计算结果，而不必再次执行函数。
+我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是**计算属性是基于它们的响应式依赖进行缓存的**。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 `message` 还没有发生改变，多次访问 `reversedMessage` 计算属性会立即返回之前的计算结果，而不必再次执行函数。
这也同样意味着下面的计算属性将不再更新，因为 `Date.now()` 不是响应式依赖：
@@ -108,7 +108,7 @@ computed: {
相比之下，每当触发重新渲染时，调用方法将**总会**再次执行函数。
-我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 **A**，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 **A** 。如果没有缓存，我们将不可避免的多次执行 **A** 的 getter！如果你不希望有缓存，请用方法来替代。
+我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 **A**，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 **A**。如果没有缓存，我们将不可避免的多次执行 **A** 的 getter！如果你不希望有缓存，请用方法来替代。
### 计算属性 vs 侦听属性
@@ -158,7 +158,7 @@ var vm = new Vue({
### 计算属性的 setter
-计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
+计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
``` js
// ...
diff --git a/src/v2/guide/conditional.md b/src/v2/guide/conditional.md
index c1beececb..10e58ca87 100644
--- a/src/v2/guide/conditional.md
+++ b/src/v2/guide/conditional.md
@@ -6,6 +6,8 @@ order: 7
## `v-if`
+
+
`v-if` 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
``` html
@@ -117,7 +119,7 @@ new Vue({
{% endraw %}
-这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 `key` 属性即可：
+这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 `key` attribute 即可：
``` html
@@ -161,7 +163,7 @@ new Vue({
{% endraw %}
-注意，`` 元素仍然会被高效地复用，因为它们没有添加 `key` 属性。
+注意，`` 元素仍然会被高效地复用，因为它们没有添加 `key` attribute。
## `v-show`
@@ -171,7 +173,7 @@ new Vue({
Hello!
```
-不同的是带有 `v-show` 的元素始终会被渲染并保留在 DOM 中。`v-show` 只是简单地切换元素的 CSS 属性 `display`。
+不同的是带有 `v-show` 的元素始终会被渲染并保留在 DOM 中。`v-show` 只是简单地切换元素的 CSS property `display`。
注意，`v-show` 不支持 `` 元素，也不支持 `v-else`。
@@ -189,4 +191,4 @@ new Vue({
**不推荐**同时使用 `v-if` 和 `v-for`。请查阅[风格指南](/v2/style-guide/#避免-v-if-和-v-for-用在一起-必要)以获取更多信息。
-当 `v-if` 与 `v-for` 一起使用时，`v-for` 具有比 `v-if` 更高的优先级。请查阅[列表渲染指南](list.html#v-for-with-v-if) 以获取详细信息。
+当 `v-if` 与 `v-for` 一起使用时，`v-for` 具有比 `v-if` 更高的优先级。请查阅[列表渲染指南](list.html#v-for-with-v-if)以获取详细信息。
diff --git a/src/v2/guide/custom-directive.md b/src/v2/guide/custom-directive.md
index bf657c1b4..e1879c5df 100644
--- a/src/v2/guide/custom-directive.md
+++ b/src/v2/guide/custom-directive.md
@@ -6,6 +6,8 @@ order: 302
## 简介
+
+
除了核心功能默认内置的指令 (`v-model` 和 `v-show`)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：
{% raw %}
@@ -50,7 +52,7 @@ directives: {
}
```
-然后你可以在模板中任何元素上使用新的 `v-focus` 属性，如下：
+然后你可以在模板中任何元素上使用新的 `v-focus` property，如下：
``` html
除了 `el` 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 [`dataset`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset) 来进行。
-这是一个使用了这些属性的自定义钩子样例：
+这是一个使用了这些 property 的自定义钩子样例：
``` html
@@ -143,9 +145,74 @@ new Vue({
{% endraw %}
+### 动态指令参数
+
+指令的参数可以是动态的。例如，在 `v-mydirective:[argument]="value"` 中，`argument` 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。
+
+例如你想要创建一个自定义指令，用来通过固定布局将元素固定在页面上。我们可以像这样创建一个通过指令值来更新竖直位置像素值的自定义指令：
+
+```html
+
+
Scroll down the page
+
Stick me 200px from the top of the page
+
+
Scroll down inside this section ↓
+
I am pinned onto the page at 200px to the left.
+
...
@@ -244,7 +248,7 @@ Vue 还对应 [`addEventListener` 中的 `passive` 选项](https://developer.moz
`keyCode` 的事件用法[已经被废弃了](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode)并可能不会被最新的浏览器支持。
-使用 `keyCode` 特性也是允许的：
+使用 `keyCode` attribute 也是允许的：
``` html
Do something
+Do something
```
请注意修饰键与常规按键不同，在和 `keyup` 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 `ctrl` 的情况下释放其它按键，才能触发 `keyup.ctrl`。而单单释放 `ctrl` 也不会触发事件。如果你想要这样的行为，请为 `ctrl` 换用 `keyCode`：`keyup.17`。
@@ -304,13 +308,13 @@ Vue.config.keyCodes.f1 = 112
``` html
-A
+A
-A
+A
-A
+A
```
### 鼠标按钮修饰符
@@ -323,7 +327,7 @@ Vue.config.keyCodes.f1 = 112
这些修饰符会限制处理函数仅响应特定的鼠标按钮。
-## 为什么在 HTML 中监听事件?
+## 为什么在 HTML 中监听事件？
你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 `v-on` 有几个好处：
diff --git a/src/v2/guide/filters.md b/src/v2/guide/filters.md
index 74fce9b44..7e020d02d 100644
--- a/src/v2/guide/filters.md
+++ b/src/v2/guide/filters.md
@@ -40,6 +40,8 @@ new Vue({
})
```
+当全局过滤器和局部过滤器重名时，会采用局部过滤器。
+
下面这个例子用到了 `capitalize` 过滤器：
{% raw %}
diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md
index 036b6d736..16de07d32 100644
--- a/src/v2/guide/forms.md
+++ b/src/v2/guide/forms.md
@@ -6,13 +6,15 @@ order: 10
## 基础用法
+
+
你可以用 `v-model` 指令在表单 `在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。
+{% endraw %}
### 复选框
@@ -93,21 +97,19 @@ new Vue({
多个复选框，绑定到同一个数组：
``` html
-
- Jack
- John
- Mike
- Checked names: {{ checkedNames }}
-
+Jack
+John
+Mike
+Checked names: {{ checkedNames }}
```
``` js
new Vue({
- el: '#example-3',
+ el: '...',
data: {
checkedNames: []
}
@@ -334,7 +336,7 @@ new Vue({
```
-但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 `v-bind` 实现，并且这个属性的值可以不是字符串。
+但是有时我们可能想把值绑定到 Vue 实例的一个动态 property 上，这时可以用 `v-bind` 实现，并且这个 property 的值可以不是字符串。
### 复选框
@@ -354,7 +356,7 @@ vm.toggle === 'yes'
vm.toggle === 'no'
```
-这里的 `true-value` 和 `false-value` 特性并不会影响输入控件的 `value` 特性，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(比如“yes”或“no”)，请换用单选按钮。
+这里的 `true-value` 和 `false-value` attribute 并不会影响输入控件的 `value` attribute，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(即“yes”或“no”)，请换用单选按钮。
### 单选按钮
@@ -386,11 +388,11 @@ vm.selected.number // => 123
### `.lazy`
-在默认情况下，`v-model` 在每次 `input` 事件触发后将输入框的值与数据进行同步 (除了[上述](#vmodel-ime-tip)输入法组合文字时)。你可以添加 `lazy` 修饰符，从而转变为使用 `change` 事件进行同步：
+在默认情况下，`v-model` 在每次 `input` 事件触发后将输入框的值与数据进行同步 (除了[上述](#vmodel-ime-tip)输入法组合文字时)。你可以添加 `lazy` 修饰符，从而转为在 `change` 事件*之后*进行同步：
``` html
-制作了一个视频 ，带您了解其核心概念和一个示例工程。
+
如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看[对比其它框架](comparison.html)。
## 起步
+
+
官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它框架的使用经验会有帮助，但这不是必需的。
-尝试 Vue.js 最简单的方法是使用 [JSFiddle 上的 Hello World 例子](https://jsfiddle.net/chrisvfritz/50wL7mdz/)。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件 安装
+
+尝试 Vue.js 最简单的方法是使用 [Hello World 例子](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-hello-world)。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件 ，然后通过如下方式引入 Vue：
``` html
-
+
```
或者：
``` html
-
+
```
[安装教程](/guide/installation.html)给出了更多安装 Vue 的方式。请注意我们**不推荐**新手直接使用 `vue-cli`，尤其是在你还不熟悉基于 Node.js 的构建工具时。
-如果你喜欢交互式的东西，你也可以查阅[这个 Scrimba 上的系列教程](https://scrimba.com/playlist/pXKqta)，它揉合了录屏和代码试验田，并允许你随时暂停和播放。
+如果你喜欢交互式的东西，你也可以查阅[这个 Scrimba 上的系列教程](https://scrimba.com/g/gvuedocs)，它揉合了录屏和代码试验田，并允许你随时暂停和播放。
## 声明式渲染
-
+
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
@@ -69,7 +76,9 @@ var app = new Vue({
我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是**响应式的**。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 `app.message` 的值，你将看到上例相应地更新。
-除了文本插值，我们还可以像这样来绑定元素特性：
+注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 `#app`) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。
+
+除了文本插值，我们还可以像这样来绑定元素 attribute：
``` html
@@ -102,13 +111,13 @@ var app2 = new Vue({
{% endraw %}
-这里我们遇到了一点新东西。你看到的 `v-bind` 特性被称为**指令**。指令带有前缀 `v-`，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 `title` 特性和 Vue 实例的 `message` 属性保持一致”。
+这里我们遇到了一点新东西。你看到的 `v-bind` attribute 被称为**指令**。指令带有前缀 `v-`，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 `title` attribute 和 Vue 实例的 `message` property 保持一致”。
-如果你再次打开浏览器的 JavaScript 控制台，输入 `app2.message = '新消息'`，就会再一次看到这个绑定了 `title` 特性的 HTML 已经进行了更新。
+如果你再次打开浏览器的 JavaScript 控制台，输入 `app2.message = '新消息'`，就会再一次看到这个绑定了 `title` attribute 的 HTML 已经进行了更新。
## 条件与循环
-
+
控制切换一个元素是否显示也相当简单：
@@ -141,7 +150,7 @@ var app3 = new Vue({
继续在控制台输入 `app3.seen = false`，你会发现之前显示的消息消失了。
-这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM **结构**。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用[过渡效果](transitions.html)。
+这个例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute，还可以绑定到 DOM **结构**。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用[过渡效果](transitions.html)。
还有其它很多指令，每个都有特殊的功能。例如，`v-for` 指令可以绑定数组的数据来渲染一个项目列表：
@@ -192,14 +201,14 @@ var app4 = new Vue({
## 处理用户输入
-
+
为了让用户和你的应用进行交互，我们可以用 `v-on` 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：
``` html
{{ message }}
-
逆转消息
+
反转消息
```
``` js
@@ -218,7 +227,7 @@ var app5 = new Vue({
{% raw %}
{{ message }}
-
逆转消息
+
反转消息
+
```
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
``` html
-
+
```
如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：
``` html
```
@@ -66,18 +72,20 @@ Vue 也可以在 [unpkg](https://unpkg.com/vue@{{vue_version}}/dist/vue.js) 和
``` bash
# 最新稳定版
-$ npm install vue
+$ npm install vue@^2
```
## 命令行工具 (CLI)
-Vue 提供了一个[官方的 CLI](https://github.com/vuejs/vue-cli)，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 [Vue CLI 的文档](https://cli.vuejs.org)。
+Vue 提供了一个[官方的 CLI](https://github.com/vuejs/vue-cli)，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 [Vue CLI 的文档](https://cli.vuejs.org)。
CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手，我们强烈建议先在不用构建工具的情况下通读指南 ，在熟悉 Vue 本身之后再使用 CLI。
+
+
## 对不同构建版本的解释
-在 [NPM 包的 `dist/` 目录](https://cdn.jsdelivr.net/npm/vue/dist/)你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别：
+在 [NPM 包的 `dist/` 目录](https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/)你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别：
| | UMD | CommonJS | ES Module (基于构建工具使用) | ES Module (直接用于浏览器) |
| --- | --- | --- | --- | --- |
@@ -94,7 +102,7 @@ Vue 提供了一个[官方的 CLI](https://github.com/vuejs/vue-cli)，为单页
- **运行时**：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
-- **[UMD](https://github.com/umdjs/umd)**：UMD 版本可以通过 `
{% endraw %}
-在 `v-for` 块中，我们拥有对父作用域属性的完全访问权限。`v-for` 还支持一个可选的第二个参数为当前项的索引。
+在 `v-for` 块中，我们可以访问所有父作用域的 property。`v-for` 还支持一个可选的第二个参数，即当前项的索引。
``` html
@@ -79,7 +81,7 @@ var example2 = new Vue({
结果：
-{% raw%}
+{% raw %}
{{ parentMessage }} - {{ index }} - {{ item.message }}
@@ -104,15 +106,15 @@ var example2 = new Vue({
{% endraw %}
-你也可以用 `of` 替代 `in` 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：
+你也可以用 `of` 替代 `in` 作为分隔符，因为它更接近 JavaScript 迭代器的语法：
``` html
```
-## 一个对象的 `v-for`
+## 在 `v-for` 里使用对象
-你也可以用 `v-for` 通过一个对象的属性来迭代。
+你也可以用 `v-for` 来遍历一个对象的 property。
``` html