Skip to content

Commit

Permalink
Minor edits to improve readability (#1136)
Browse files Browse the repository at this point in the history
* Minor edits to improve readability

* Revert use of however in guide introduction
  • Loading branch information
Rachael authored and chrisvfritz committed Sep 27, 2017
1 parent 11be89b commit d5572db
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions src/v2/guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ The easiest way to try out Vue.js is using the [JSFiddle Hello World example](ht
<script src="https://unpkg.com/vue"></script>
```

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

Expand Down Expand Up @@ -89,7 +89,7 @@ var app2 = new Vue({
</script>
{% 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.

Expand Down Expand Up @@ -220,7 +220,7 @@ var app5 = new Vue({
</script>
{% 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:

Expand Down Expand Up @@ -349,7 +349,7 @@ var app7 = new Vue({
</script>
{% 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 `<todo-item>` 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 `<todo-item>` 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:

Expand Down

0 comments on commit d5572db

Please sign in to comment.