-
-
-
\ No newline at end of file
diff --git a/src/guide/class-and-style.md b/src/guide/class-and-style.md
index 7499364887..98bd3ce32b 100644
--- a/src/guide/class-and-style.md
+++ b/src/guide/class-and-style.md
@@ -123,7 +123,9 @@ However, this can be a bit verbose if you have multiple conditional classes. Tha
### With Components
-> This section assumes knowledge of [Vue Components](TODO:components.html). Feel free to skip it and come back later.
+> This section assumes knowledge of [Vue Components](component-basics.md). Feel free to skip it and come back later.
+
+> TODO: revise this with multi-root components
When you use the `class` attribute on a custom component, those classes will be added to the component's root element. Existing classes on this element will not be overwritten.
diff --git a/src/guide/computed.md b/src/guide/computed.md
index 4832972e13..8ea7070a7d 100644
--- a/src/guide/computed.md
+++ b/src/guide/computed.md
@@ -19,7 +19,7 @@ That's why for complex logic that includes reactive data, you should use a **com
### Basic Example
```html
-
+
Here we have declared a computed property `reversedMessage`. The function we provided will be used as the getter function for the property `vm.reversedMessage`:
@@ -57,7 +62,7 @@ vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'
```
-You can open the sandbox(TODO) and play with the example vm yourself. The value of `vm.reversedMessage` is always dependent on the value of `vm.message`.
+Try to change the value of `message` in the application `data` and you will see how `reversedMessage` is changing accordingly.
You can data-bind to computed properties in templates just like a normal property. Vue is aware that `vm.reversedMessage` depends on `vm.message`, so it will update any bindings that depend on `vm.reversedMessage` when `vm.message` changes. And the best part is that we've created this dependency relationship declaratively: the computed getter function has no side effects, which makes it easier to test and understand.
@@ -211,7 +216,7 @@ For example:
axios
.get('https://yesno.wtf/api')
.then(response => {
- this.answer = _.capitalize(response.data.answer)
+ this.answer = response.data.answer
})
.catch(error => {
this.answer = 'Error! Could not reach the API. ' + error
@@ -224,7 +229,12 @@ For example:
Result:
-
+
+
In this case, using the `watch` option allows us to perform an asynchronous operation (accessing an API) and sets a condition for performing this operation. None of that would be possible with a computed property.
diff --git a/src/guide/conditional.md b/src/guide/conditional.md
index bc8eaa040d..78c0962a42 100644
--- a/src/guide/conditional.md
+++ b/src/guide/conditional.md
@@ -65,46 +65,6 @@ The `v-else-if`, as the name suggests, serves as an "else if block" for `v-if`.
Similar to `v-else`, a `v-else-if` element must immediately follow a `v-if` or a `v-else-if` element.
-### Controlling Reusable Elements with `key`
-
-Vue tries to render elements as efficiently as possible, often re-using them instead of rendering from scratch. Beyond helping make Vue very fast, this can have some useful advantages. For example, if you allow users to toggle between multiple login types:
-
-```html
-
-
-
-
-
-
-
-
-```
-
-Then switching the `loginType` in the code above will not erase what the user has already entered. Since both templates use the same elements, the `` is not replaced - just its `placeholder`.
-
-Check it out for yourself by entering some text in the input, then pressing the toggle button:
-
-
-
-This isn't always desirable though, so Vue offers a way for you to say, "These two elements are completely separate - don't re-use them." Add a `key` attribute with unique values:
-
-```html
-
-
-
-
-
-
-
-
-```
-
-Now those inputs will be rendered from scratch each time you toggle. See for yourself:
-
-
-
-Note that the `