From d5572db72912c2ed3a623baf3a44d7da85f50de0 Mon Sep 17 00:00:00 2001 From: Rachael Date: Sat, 16 Sep 2017 21:54:17 -0700 Subject: [PATCH] Minor edits to improve readability (#1136) * Minor edits to improve readability * Revert use of however in guide introduction --- src/v2/guide/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 8c7eeb1d6e..db33cbd9e5 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -20,7 +20,7 @@ The easiest way to try out Vue.js is using the [JSFiddle Hello World example](ht ``` -The [Installation](installation.html) page provides more options of installing Vue. Note that we **do not** recommend beginners to start with `vue-cli`, especially if you are not yet familiar with Node.js-based build tools. +The [Installation](installation.html) page provides more options of installing Vue. Note: We **do not** recommend that beginners start with `vue-cli`, especially if you are not yet familiar with Node.js-based build tools. ## Declarative Rendering @@ -89,7 +89,7 @@ var app2 = new Vue({ {% endraw %} -Here we are encountering something new. The `v-bind` attribute you are seeing is called a **directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here it is basically saying "keep this element's `title` attribute up-to-date with the `message` property on the Vue instance." +Here we are encountering something new. The `v-bind` attribute you are seeing is called a **directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here, it is basically saying "keep this element's `title` attribute up-to-date with the `message` property on the Vue instance." If you open up your JavaScript console again and enter `app2.message = 'some new message'`, you'll once again see that the bound HTML - in this case the `title` attribute - has been updated. @@ -220,7 +220,7 @@ var app5 = new Vue({ {% endraw %} -Note in the method we simply update the state of our app without touching the DOM - all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic. +Note that in this method we simply update the state of our app without touching the DOM - all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic. Vue also provides the `v-model` directive that makes two-way binding between form input and app state a breeze: @@ -349,7 +349,7 @@ var app7 = new Vue({ {% endraw %} -This is just a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our `` component with more complex template and logic without affecting the parent app. +This is just a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our `` component with a more complex template and logic without affecting the parent app. In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components [later in the guide](components.html), but here's an (imaginary) example of what an app's template might look like with components: