From 17f2a9d106cb1f3fdd4c273889699923b9ff7246 Mon Sep 17 00:00:00 2001
From: defcc <chengchao1@gmail.com>
Date: Tue, 1 Nov 2016 21:52:37 +0800
Subject: [PATCH 1/2] add Components and class section to specify class merge
 hebavior

---
 src/guide/class-and-style.md | 56 ++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/src/guide/class-and-style.md b/src/guide/class-and-style.md
index a24f42afbe..6131352e40 100644
--- a/src/guide/class-and-style.md
+++ b/src/guide/class-and-style.md
@@ -111,6 +111,62 @@ However, this can be a bit verbose if you have multiple conditional classes. Tha
 <div v-bind:class="[{ active: isActive }, errorClass]">
 ```
 
+### Components and class
+
+> This section assumes knowledge of [Components](/guide/components.html). Feel free to skip it and come back later.
+
+You can directly use `v-bind:class` or `class` on a custom component, like any normal element. All the class passed down will be merged to the root element together.
+
+
+``` html
+<my-component v-bind:class="{ active: isActive }"></my-component>
+```
+
+``` js
+Vue.component('my-component', {
+  data: function () {
+    return { isFocus: true }  
+  },
+  template: '<div v-bind:class="{ focus: isFocus }"></div>'
+});
+
+new Vue({
+  data: { isActive: true },
+  template: '<my-component v-bind:class="{ active: isActive }"></my-component>'
+});
+
+```
+
+The class value will automatically merged to the `my-component` component's root element.
+
+It will render:
+
+
+``` html
+<div class="focus active"></div>
+```
+
+Here is an example using dynamic component with class.
+
+```js
+const vm = new Vue({
+  el: '#app',
+  data: {
+    view: 'test'
+  },
+  template: `<component :is="view" class="animal"></component>`,
+  components: {
+    'bird': {
+      template: '<div class="bird"></div>'
+    },
+    'cat': {
+      template: '<div class="cat"></div>'
+    }
+  }
+});
+```
+
+
 ## Binding Inline Styles
 
 ### Object Syntax

From e67460f30b7989de20d479811e2e908e2708aa5b Mon Sep 17 00:00:00 2001
From: Chris Fritz <chrisvfritz@gmail.com>
Date: Wed, 2 Nov 2016 15:06:25 -0400
Subject: [PATCH 2/2] Update component class binding examples

---
 src/guide/class-and-style.md | 56 ++++++++++++------------------------
 1 file changed, 19 insertions(+), 37 deletions(-)

diff --git a/src/guide/class-and-style.md b/src/guide/class-and-style.md
index 6131352e40..81f2683a58 100644
--- a/src/guide/class-and-style.md
+++ b/src/guide/class-and-style.md
@@ -111,62 +111,44 @@ However, this can be a bit verbose if you have multiple conditional classes. Tha
 <div v-bind:class="[{ active: isActive }, errorClass]">
 ```
 
-### Components and class
+### With Components
 
-> This section assumes knowledge of [Components](/guide/components.html). Feel free to skip it and come back later.
+> This section assumes knowledge of [Vue Components](components.html). Feel free to skip it and come back later.
 
-You can directly use `v-bind:class` or `class` on a custom component, like any normal element. All the class passed down will be merged to the root element together.
+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.
 
-
-``` html
-<my-component v-bind:class="{ active: isActive }"></my-component>
-```
+For example, if you declare this component:
 
 ``` js
 Vue.component('my-component', {
-  data: function () {
-    return { isFocus: true }  
-  },
-  template: '<div v-bind:class="{ focus: isFocus }"></div>'
-});
+  template: '<p class="foo bar">Hi</p>'
+})
+```
 
-new Vue({
-  data: { isActive: true },
-  template: '<my-component v-bind:class="{ active: isActive }"></my-component>'
-});
+Then add some classes when using it:
 
+``` html
+<my-component class="baz boo"></my-component>
 ```
 
-The class value will automatically merged to the `my-component` component's root element.
+The rendered HTML will be:
 
-It will render:
+``` html
+<p class="foo bar baz boo">Hi</p>
+```
 
+The same is true for class bindings:
 
 ``` html
-<div class="focus active"></div>
+<my-component v-bind:class="{ active: isActive }"></my-component>
 ```
 
-Here is an example using dynamic component with class.
+When `isActive` is truthy, the rendered HTML will be:
 
-```js
-const vm = new Vue({
-  el: '#app',
-  data: {
-    view: 'test'
-  },
-  template: `<component :is="view" class="animal"></component>`,
-  components: {
-    'bird': {
-      template: '<div class="bird"></div>'
-    },
-    'cat': {
-      template: '<div class="cat"></div>'
-    }
-  }
-});
+``` html
+<div class="foo bar active"></div>
 ```
 
-
 ## Binding Inline Styles
 
 ### Object Syntax