diff --git a/src/v2/cookbook/debugging-in-vscode.md b/src/v2/cookbook/debugging-in-vscode.md
index 5e6dfd01b..c9e612fcf 100644
--- a/src/v2/cookbook/debugging-in-vscode.md
+++ b/src/v2/cookbook/debugging-in-vscode.md
@@ -48,7 +48,7 @@ module.exports = {
 <!-- todo: translation -->
 <p class="tip">We're assuming the port to be `8080` here. If it's not the case (for instance, if `8080` has been taken and Vue CLI automatically picks another port for you), just modify the configuration accordingly.</p>
 
-点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图，然后点击那个齿轮图标来配置一个 `launch.json` 的文件，选择 **Chrome/Firefox: Launch** 环境。然后将生成的 `launch.json` 的内容替换成为相应的配置：
+点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图，然后点击那个齿轮图标来配置一个 `launch.json` 的文件，选择 **Chrome/Firefox：Launch** 环境。然后将生成的 `launch.json` 的内容替换成为相应的配置：
 
 ![添加 Chrome 配置](/images/config_add.png)
 
@@ -91,7 +91,7 @@ module.exports = {
   npm run serve
   ```
 
-3. 来到 Debug 视图，选择 **'vuejs: chrome/firefox'** 配置，然后按 <kbd>F5</kbd> 或点击那个绿色的 play 按钮。
+3. 来到 Debug 视图，选择**‘vuejs：chrome/firefox’**配置，然后按 <kbd>F5</kbd> 或点击那个绿色的 play 按钮。
 
 4. 随着一个新的浏览器实例打开 `http://localhost:8080`，你的断点现在应该被命中了。
 
diff --git a/src/v2/cookbook/serverless-blog.md b/src/v2/cookbook/serverless-blog.md
index 93780fb89..ad74509c7 100644
--- a/src/v2/cookbook/serverless-blog.md
+++ b/src/v2/cookbook/serverless-blog.md
@@ -39,7 +39,7 @@ import Butter from 'buttercms';
 const butter = Butter('your_api_token');
 ```
 
-使用 CDN:
+使用 CDN：
 
 ```html
 <script src="https://cdnjs.buttercms.com/buttercms-1.1.0.min.js"></script>
@@ -302,4 +302,4 @@ created() {
 
 ## 总结
 
-差不多就是这些了！现在你已经在自己的应用中拥有了一个可以正常工作的 CMS 博客。我们希望这份教程可以帮助你，使你的 Vue.js 开发体验更有乐趣 :)
+差不多就是这些了！现在你已经在自己的应用中拥有了一个可以正常工作的 CMS 博客。我们希望这份教程可以帮助你，使你的 Vue.js 开发体验更有乐趣 🙂
diff --git a/src/v2/guide/installation.md b/src/v2/guide/installation.md
index 007010765..b113a6260 100644
--- a/src/v2/guide/installation.md
+++ b/src/v2/guide/installation.md
@@ -255,7 +255,7 @@ NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
 
 ## 开发版本
 
-**重要**: GitHub 仓库的 `/dist` 文件夹只有在新版本发布时才会提交。如果想要使用 GitHub 上 Vue 最新的源码，你需要自己构建！
+**重要**：GitHub 仓库的 `/dist` 文件夹只有在新版本发布时才会提交。如果想要使用 GitHub 上 Vue 最新的源码，你需要自己构建！
 
 ``` bash
 git clone https://github.com/vuejs/vue.git node_modules/vue
diff --git a/src/v2/guide/list.md b/src/v2/guide/list.md
index 1d0b09387..43d1e83ac 100644
--- a/src/v2/guide/list.md
+++ b/src/v2/guide/list.md
@@ -81,7 +81,7 @@ var example2 = new Vue({
 
 结果：
 
-{% raw%}
+{% raw %}
 <ul id="example-2" class="demo">
   <li v-for="(item, index) in items">
     {{ parentMessage }} - {{ index }} - {{ item.message }}
@@ -257,7 +257,7 @@ Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会
 
 ### 替换数组
 
-变异方法，顾名思义，会改变调用了这些方法的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如 `filter()`、`concat()` 和 `slice()` 。它们不会改变原始数组，而**总是返回一个新数组**。当使用非变异方法时，可以用新数组替换旧数组：
+变异方法，顾名思义，会改变调用了这些方法的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如 `filter()`、`concat()` 和 `slice()`。它们不会改变原始数组，而**总是返回一个新数组**。当使用非变异方法时，可以用新数组替换旧数组：
 
 ``` js
 example1.items = example1.items.filter(function (item) {
@@ -457,7 +457,7 @@ methods: {
 
 上面的代码将只渲染未完成的 todo。
 
-而如果你的目的是有条件地跳过循环的执行，那么可以将 `v-if` 置于外层元素 (或 [`<template>`](conditional.html#在-lt-template-gt-中配合-v-if-条件渲染一整组))上。如：
+而如果你的目的是有条件地跳过循环的执行，那么可以将 `v-if` 置于外层元素 (或 [`<template>`](conditional.html#在-lt-template-gt-中配合-v-if-条件渲染一整组)) 上。如：
 
 ``` html
 <ul v-if="todos.length">
@@ -472,7 +472,7 @@ methods: {
 
 > 这部分内容假定你已经了解[组件](components.html)相关知识。你也完全可以先跳过它，以后再回来查看。
 
-在自定义组件上，你可以像在任何普通元素上一样使用 `v-for` 。
+在自定义组件上，你可以像在任何普通元素上一样使用 `v-for`。
 
 ``` html
 <my-component v-for="item in items" :key="item.id"></my-component>
diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md
index e7eee9ead..bbe3b794c 100644
--- a/src/v2/guide/migration.md
+++ b/src/v2/guide/migration.md
@@ -30,15 +30,15 @@ order: 701
 
 - 取决于你使用了哪些旧有的特性。大部分可以通过查找和替换 (find-and-replace) 来实现升级，但有一些可能还是要花点时间。如果你没有遵循最佳实践，Vue 2.0 会尽力强迫你去遵循。这有利于项目的长期运行，但也可能意味着重大重构 (尽管有些需要重构的部分可能已经过时)。
 
-> 如果我升级到到 Vue 2 ，我还必须同时升级 Vuex 和 Vue Router？
+> 如果我升级到到 Vue 2，我还必须同时升级 Vuex 和 Vue Router？
 
 只有 Vue Router 2 与 Vue 2 保持兼容，所以 Vue Router 是需要升级的，你必须遵循 [Vue Router 迁移方式](migration-vue-router.html)来处理。幸运的是，大多数应用没有很多 router 相关代码，所以迁移可能不会超过一个小时。
 
-对于 Vuex ，版本 0.8+ 与 Vue 2 保持兼容，所以部分不必强制升级。可以促使你立即升级的唯一理由，是你想要使用那些 Vuex 2 中新的高级特性，比如模块 (modules) 和减少的样板文件 (reduced boilerplate)。
+对于 Vuex，版本 0.8+ 与 Vue 2 保持兼容，所以部分不必强制升级。可以促使你立即升级的唯一理由，是你想要使用那些 Vuex 2 中新的高级特性，比如模块 (modules) 和减少的样板文件 (reduced boilerplate)。
 
 ## 模板
 
-### 片段实例 <sup>移除</sup>
+### 片段实例<sup>移除</sup>
 
 每个组件必须只有一个根元素。不再允许片段实例，如果你有这样的模板：
 
@@ -173,9 +173,9 @@ mounted: function () {
 
 ## `v-for`
 
-### `v-for` 遍历数组时的参数顺序 <sup>变更</sup>
+### `v-for` 遍历数组时的参数顺序<sup>变更</sup>
 
-当包含 `index` 时，之前遍历数组时的参数顺序是 `(index, value)`。现在是 `(value, index)` ，来和 JavaScript 的原生数组方法 (例如 `forEach` 和 `map`) 保持一致。
+当包含 `index` 时，之前遍历数组时的参数顺序是 `(index, value)`。现在是 `(value, index)`，来和 JavaScript 的原生数组方法 (例如 `forEach` 和 `map`) 保持一致。
 
 {% raw %}
 <div class="upgrade-path">
@@ -184,7 +184,7 @@ mounted: function () {
 </div>
 {% endraw %}
 
-### `v-for` 遍历对象时的参数顺序 <sup>变更</sup>
+### `v-for` 遍历对象时的参数顺序<sup>变更</sup>
 
 当包含 property 名称/key 时，之前遍历对象的参数顺序是 `(name, value)`。现在是 `(value, name)`，来和常见的对象迭代器 (例如 lodash) 保持一致。
 
@@ -198,6 +198,7 @@ mounted: function () {
 ### `$index` and `$key` <sup>移除</sup>
 
 已经移除了 `$index` 和 `$key` 这两个隐式声明变量，以便在 `v-for` 中显式定义。这可以使没有太多 Vue 开发经验的开发者更好地阅读代码，并且在处理嵌套循环时也能产生更清晰的行为。
+
 {% raw %}
 <div class="upgrade-path">
   <h4>升级方式</h4>
@@ -226,7 +227,7 @@ mounted: function () {
 </div>
 {% endraw %}
 
-### `v-for` 范围值 <sup>变更</sup>
+### `v-for` 范围值<sup>变更</sup>
 
 之前，`v-for="number in 10"` 的 `number` 从 0 开始到 9 结束，现在从 1 开始，到 10 结束。
 
@@ -239,7 +240,7 @@ mounted: function () {
 
 ## Props
 
-### `coerce` Prop 的参数 <sup>移除</sup>
+### `coerce` Prop 的参数<sup>移除</sup>
 
 如果需要检查 prop 的值，创建一个内部的 computed 值，而不再在 props 内部去定义，例如：
 
@@ -283,7 +284,7 @@ computed: {
 </div>
 {% endraw %}
 
-### `twoWay` Prop 的参数 <sup>移除</sup>
+### `twoWay` Prop 的参数<sup>移除</sup>
 
 Props 现在只能单向传递。为了对父组件产生反向影响，子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定。详见：
 
@@ -298,7 +299,7 @@ Props 现在只能单向传递。为了对父组件产生反向影响，子组
 </div>
 {% endraw %}
 
-### `v-bind` 的 `.once`和`.sync` 修饰符 <sup>移除</sup>
+### `v-bind` 的 `.once` 和 `.sync` 修饰符<sup>移除</sup>
 
 Props 现在只能单向传递。为了对父组件产生反向影响，子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定。详见：
 
@@ -315,7 +316,7 @@ Props 现在只能单向传递。为了对父组件产生反向影响，子组
 
 ### 修改 Props <sup>弃用</sup>
 
-组件内修改 prop 是反模式 (不推荐的) 的。比如，先声明一个 prop ，然后在组件中通过 `this.myProp = 'someOtherValue'` 改变 prop 的值。根据渲染机制，当父组件重新渲染时，子组件的内部 prop 值也将被覆盖。
+组件内修改 prop 是反模式 (不推荐的) 的。比如，先声明一个 prop，然后在组件中通过 `this.myProp = 'someOtherValue'` 改变 prop 的值。根据渲染机制，当父组件重新渲染时，子组件的内部 prop 值也将被覆盖。
 
 大多数情况下，改变 prop 值可以用以下选项替代：
 
@@ -331,7 +332,7 @@ Props 现在只能单向传递。为了对父组件产生反向影响，子组
 
 ### 根实例的 Props <sup>替换</sup>
 
-对于一个根实例来说 (比如：用 `new Vue({ ... })` 创建的实例)，只能用 `propsData` 而不是 `props` 。
+对于一个根实例来说 (比如：用 `new Vue({ ... })` 创建的实例)，只能用 `propsData` 而不是 `props`。
 
 {% raw %}
 <div class="upgrade-path">
@@ -380,9 +381,9 @@ methods: {
 
 ## Built-In 指令
 
-### `v-bind` 真/假值 <sup>变更</sup>
+### `v-bind` 真/假值<sup>变更</sup>
 
-在2.0中使用 `v-bind` 时，只有 `null`, `undefined`，和 `false` 被看作是假。这意味着，`0` 和空字符串将被作为真值渲染。比如 `v-bind:draggable="''"` 将被渲染为 `draggable="true"`。
+在 2.0 中使用 `v-bind` 时，只有 `null`，`undefined`，和 `false` 被看作是假。这意味着，`0` 和空字符串将被作为真值渲染。比如 `v-bind:draggable="''"` 将被渲染为 `draggable="true"`。
 
 对于枚举属性，除了以上假值之外，字符串 `"false"` 也会被渲染为 `attr="false"`。
 
@@ -395,7 +396,7 @@ methods: {
 </div>
 {% endraw %}
 
-### 用 `v-on` 监听原生事件 <sup>变更</sup>
+### 用 `v-on` 监听原生事件<sup>变更</sup>
 
   现在在组件上使用 `v-on` 只会监听自定义事件 (组件用 `$emit` 触发的事件)。如果要监听根元素的原生事件，可以使用 `.native` 修饰符，比如：
 
@@ -410,9 +411,9 @@ methods: {
 </div>
 {% endraw %}
 
-### 带有 `debounce` 的 `v-model`<sup>移除</sup>
+### 带有 `debounce` 的 `v-model` <sup>移除</sup>
 
-Debouncing 曾经被用来控制 Ajax 请求及其它高耗任务的频率。Vue 中`v-model`的 `debounce` 属性参数使得在一些简单情况下非常容易实现这种控制。但实际上，这是控制了**状态更新**的频率，而不是控制高耗时任务本身。这是个微小的差别，但是会随着应用增长而显现出局限性。
+Debouncing 曾经被用来控制 Ajax 请求及其它高耗任务的频率。Vue 中 `v-model` 的 `debounce` 属性参数使得在一些简单情况下非常容易实现这种控制。但实际上，这是控制了**状态更新**的频率，而不是控制高耗时任务本身。这是个微小的差别，但是会随着应用增长而显现出局限性。
 
 例如在设计一个搜索提示时的局限性：
 
@@ -460,7 +461,7 @@ new Vue({
 </script>
 {% endraw %}
 
-使用 `debounce` 参数，便无法观察 "Typing" 的状态。因为无法对输入状态进行实时检测。然而，通过将 `debounce` 与 Vue 解耦，可以仅仅只延迟我们想要控制的操作，从而避开这些局限性：
+使用 `debounce` 参数，便无法观察“Typing”的状态。因为无法对输入状态进行实时检测。然而，通过将 `debounce` 与 Vue 解耦，可以仅仅只延迟我们想要控制的操作，从而避开这些局限性：
 
 ``` html
 <!--
@@ -522,7 +523,7 @@ new Vue({
 </div>
 {% endraw %}
 
-### 使用 `lazy` 或者 `number` 参数的 `v-model` 。<sup>替换</sup>
+### 使用 `lazy` 或者 `number` 参数的 `v-model`。<sup>替换</sup>
 
 `lazy` 和 `number` 参数现在以修饰符的形式使用，这样看起来更加清晰，而不是这样：
 
@@ -545,7 +546,7 @@ new Vue({
 </div>
 {% endraw %}
 
-### 使用内联 `value`的`v-model`  <sup>移除</sup>
+### 使用内联 `value` 的 `v-model` <sup>移除</sup>
 
 `v-model` 不再以内联 `value` 方式初始化的初值了，显然他将以实例的 data 相应的属性作为真正的初值。
 
@@ -563,7 +564,7 @@ data: {
 }
 ```
 
-将渲染 model 为 'bar' 而不是 'foo' 。同样，对 `<textarea>` 已有的值来说：
+将渲染 model 为‘bar’而不是‘foo’。同样，对 `<textarea>` 已有的值来说：
 
 ``` html
 <textarea v-model="text">
@@ -571,7 +572,7 @@ data: {
 </textarea>
 ```
 
-必须保证 `text` 初值为 "hello world"
+必须保证 `text` 初值为“hello world”
 
 {% raw %}
 <div class="upgrade-path">
@@ -598,7 +599,7 @@ strings.map(function (str) {
 
 这样，`v-model` 的双向绑定在这里就失效了。把 `str` 赋值给迭代器里的另一个值也没有用，因为它仅仅是函数内部的一个变量。
 
-替代方案是，你可以使用对象数组，这样`v-model` 就可以同步更新对象里面的字段了，例如：
+替代方案是，你可以使用对象数组，这样 `v-model` 就可以同步更新对象里面的字段了，例如：
 
 {% codeblock lang:html %}
 <input v-for="obj in objects" v-model="obj.str">
@@ -611,7 +612,7 @@ strings.map(function (str) {
 </div>
 {% endraw %}
 
-### 带有 `!important` 的`v-bind:style`  <sup>移除</sup>
+### 带有 `!important` 的 `v-bind:style` <sup>移除</sup>
 
 这样写将失效：
 
@@ -632,16 +633,15 @@ strings.map(function (str) {
 </div>
 {% endraw %}
 
-### `v-el` 和`v-ref` <sup>替换</sup>
+### `v-el` 和 `v-ref` <sup>替换</sup>
 
-简单起见，`v-el` 和 `v-ref` 合并为一个 `ref` 属性了，可以在组件实例中通过 `$refs` 来调用。这意味着 `v-el:my-element` 将写成这样：`ref="myElement"`，`v-ref:my-component` 变成了这样：`ref="myComponent"`。绑定在一般元素上时，`ref` 指 DOM 元素，绑定在组件上时，`ref` 为一组件实例。
-因为 `v-ref` 不再是一个指令了而是一个特殊的属性，它也可以被动态定义了。这样在和`v-for` 结合的时候是很有用的：
+简单起见，`v-el` 和 `v-ref` 合并为一个 `ref` 属性了，可以在组件实例中通过 `$refs` 来调用。这意味着 `v-el:my-element` 将写成这样：`ref="myElement"`，`v-ref:my-component` 变成了这样：`ref="myComponent"`。绑定在一般元素上时，`ref` 指 DOM 元素，绑定在组件上时，`ref` 为一组件实例。因为 `v-ref` 不再是一个指令了而是一个特殊的属性，它也可以被动态定义了。这样在和 `v-for` 结合的时候是很有用的：
 
 ``` html
 <p v-for="item in items" v-bind:ref="'item' + item.id"></p>
 ```
 
-以前 `v-el`/`v-ref` 和 `v-for` 一起使用将产生一个 DOM 数组或者组件数组，因为没法给每个元素一个特定名字。现在你还仍然可以这样做，给每个元素一个同样的`ref`：
+以前 `v-el`/`v-ref` 和 `v-for` 一起使用将产生一个 DOM 数组或者组件数组，因为没法给每个元素一个特定名字。现在你还仍然可以这样做，给每个元素一个同样的 `ref`：
 
 ``` html
 <p v-for="item in items" ref="items"></p>
@@ -649,7 +649,7 @@ strings.map(function (str) {
 
 和 1.x 中不同，`$refs` 不是响应的，因为它们在渲染过程中注册/更新。只有监听变化并重复渲染才能使它们响应。
 
-另一方面，设计`$refs`主要是提供给 js 程序访问的，并不建议在模板中过度依赖使用它。因为这意味着在实例之外去访问实例状态，违背了 Vue 数据驱动的思想。
+另一方面，设计 `$refs` 主要是提供给 js 程序访问的，并不建议在模板中过度依赖使用它。因为这意味着在实例之外去访问实例状态，违背了 Vue 数据驱动的思想。
 
 {% raw %}
 <div class="upgrade-path">
@@ -658,9 +658,9 @@ strings.map(function (str) {
 </div>
 {% endraw %}
 
-### `v-show`后面使用`v-else` <sup>移除</sup>
+### `v-show` 后面使用 `v-else` <sup>移除</sup>
 
-`v-else` 不能再跟在 `v-show`后面使用。请在`v-if`的否定分支中使用`v-show`来替代。例如：
+`v-else` 不能再跟在 `v-show` 后面使用。请在 `v-if` 的否定分支中使用 `v-show` 来替代。例如：
 
 ``` html
 <p v-if="foo">Foo</p>
@@ -681,17 +681,17 @@ strings.map(function (str) {
 </div>
 {% endraw %}
 
-## 自定义指令 <sup>简化</sup>
+## 自定义指令<sup>简化</sup>
 
 在新版中，指令的使用范围已经大大减小了：现在指令仅仅被用于低级的 DOM 操作。大多数情况下，最好是使用组件作为代码复用的抽象层。
 
 显要的改变有如下几点：
 
-- 指令不再拥有实例。意思是，在指令的钩子函数中不再拥有实例的 `this` 。替代的是，你可以在参数中接受你需要的任何数据。如果确实需要，可以通过 `el` 来访问实例。
-- 类似 `acceptStatement` ，`deep` ，`priority` 等都已被弃用。为了替换`双向`指令，见 [示例](#双向过滤器-替换)。
+- 指令不再拥有实例。意思是，在指令的钩子函数中不再拥有实例的 `this`。替代的是，你可以在参数中接受你需要的任何数据。如果确实需要，可以通过 `el` 来访问实例。
+- 类似 `acceptStatement`，`deep`，`priority` 等都已被弃用。为了替换 `双向` 指令，见[示例](#双向过滤器-替换)。
 - 现在有些钩子的意义和以前不一样了，并且多了两个钩子函数。
 
-幸运的是，新钩子更加简单，更加容易掌握。详见 [自定义指令指南](custom-directive.html)。
+幸运的是，新钩子更加简单，更加容易掌握。详见[自定义指令指南](custom-directive.html)。
 
 {% raw %}
 <div class="upgrade-path">
@@ -700,7 +700,7 @@ strings.map(function (str) {
 </div>
 {% endraw %}
 
-### 指令 `.literal` 修饰符 <sup>移除</sup>
+### 指令 `.literal` 修饰符<sup>移除</sup>
 
 `.literal` 修饰符已经被移除，为了获取一样的功能，可以简单地提供字符串修饰符作为值。
 
@@ -725,7 +725,7 @@ strings.map(function (str) {
 
 ## 过渡
 
-### `transition` 参数 <sup>替换</sup>
+### `transition` 参数<sup>替换</sup>
 
 Vue 的过渡系统有了彻底的改变，现在通过使用 `<transition>` 和 `<transition-group>` 来包裹元素实现过渡效果，而不再使用 `transition` 属性。详见 [Transitions guide](transitions.html)。
 
@@ -747,9 +747,9 @@ Vue 的过渡系统有了彻底的改变，现在通过使用 `<transition>` 和
 </div>
 {% endraw %}
 
-### 过渡的 `stagger` 参数 <sup>移除</sup>
+### 过渡的 `stagger` 参数<sup>移除</sup>
 
-如果希望在列表渲染中使用渐近过渡，可以通过设置元素的 `data-index`  (或类似属性) 来控制时间。请参考[这个例子](transitions.html#列表的渐进过渡)。
+如果希望在列表渲染中使用渐近过渡，可以通过设置元素的 `data-index` (或类似属性) 来控制时间。请参考[这个例子](transitions.html#列表的渐进过渡)。
 
 {% raw %}
 <div class="upgrade-path">
@@ -760,13 +760,13 @@ Vue 的过渡系统有了彻底的改变，现在通过使用 `<transition>` 和
 
 ## 事件
 
-### `events` 选项 <sup>移除</sup>
+### `events` 选项<sup>移除</sup>
 
 `events` 选项被弃用。事件处理器现在在 `created` 钩子中被注册。参考详细示例 [`$dispatch` and `$broadcast` 迁移指南](#dispatch-和-broadcast-替换)
 
 ### `Vue.directive('on').keyCodes` <sup>替换</sup>
 
-新的简明配置 `keyCodes` 的方式是通过 `Vue.config.keyCodes`例如：
+新的简明配置 `keyCodes` 的方式是通过 `Vue.config.keyCodes` 例如：
 
 ``` js
 // v-on:keyup.f1 不可用
@@ -783,11 +783,11 @@ Vue.config.keyCodes.f1 = 112
 
 `$dispatch` 和 `$broadcast` 已经被弃用。请使用更多简明清晰的组件间通信和更好的状态管理方案，如：[Vuex](https://github.com/vuejs/vuex)。
 
-因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好，我们也不希望在以后让开发者们太痛苦。并且`$dispatch` 和 `$broadcast` 也没有解决兄弟组件间的通信问题。
+因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好，我们也不希望在以后让开发者们太痛苦。并且 `$dispatch` 和 `$broadcast` 也没有解决兄弟组件间的通信问题。
 
-对于`$dispatch` 和 `$broadcast`最简单的升级方式就是：通过使用事件中心，允许组件自由交流，无论组件处于组件树的哪一层。由于 Vue 实例实现了一个事件分发接口，你可以通过实例化一个空的 Vue 实例来实现这个目的。
+对于 `$dispatch` 和 `$broadcast` 最简单的升级方式就是：通过使用事件中心，允许组件自由交流，无论组件处于组件树的哪一层。由于 Vue 实例实现了一个事件分发接口，你可以通过实例化一个空的 Vue 实例来实现这个目的。
 
-这些方法的最常见用途之一是父子组件的相互通信。在这些情况下，你可以使用 [`v-on`监听子组件上 $emit 的变化](components-custom-events.html#将原生事件绑定到组件)。这可以允许你很方便的添加事件显性。
+这些方法的最常见用途之一是父子组件的相互通信。在这些情况下，你可以使用 [`v-on` 监听子组件上 $emit 的变化](components-custom-events.html#将原生事件绑定到组件)。这可以允许你很方便的添加事件显性。
 
 然而，如果是跨多层父子组件通信的话，`$emit` 并没有什么用。相反，用集中式的事件中间件可以做到简单的升级。这会让组件之间的通信非常顺利，即使是兄弟组件。因为 Vue 通过事件发射器接口执行实例，实际上你可以使用一个空的 Vue 实例。
 
@@ -808,7 +808,7 @@ Todos
 var eventHub = new Vue()
 ```
 
-然后在组件中，可以使用 `$emit`, `$on`, `$off` 分别来分发、监听、取消监听事件：
+然后在组件中，可以使用 `$emit`，`$on`，`$off` 分别来分发、监听、取消监听事件：
 
 ``` js
 // NewTodoInput
@@ -867,9 +867,9 @@ methods: {
 
 ## 过滤器
 
-### 插入文本之外的过滤器 <sup>移除</sup>
+### 插入文本之外的过滤器<sup>移除</sup>
 
-现在过滤器只能用在插入文本中 (`{% raw %}{{ }}{% endraw %}` tags)。我们发现在指令 (如：`v-model`，`v-on`等) 中使用过滤器使事情变得更复杂。像`v-for` 这样的列表过滤器最好把处理逻辑作为一个计算属性放在 js 里面，这样就可以在整个模板中复用。
+现在过滤器只能用在插入文本中 (`{% raw %}{{ }}{% endraw %}` tags)。我们发现在指令 (如：`v-model`，`v-on` 等) 中使用过滤器使事情变得更复杂。像 `v-for` 这样的列表过滤器最好把处理逻辑作为一个计算属性放在 js 里面，这样就可以在整个模板中复用。
 
 总之，能在原生 js 中实现的东西，我们尽量避免引入一个新的符号去重复处理同样的问题。下面是如何替换 Vue 内置过滤器：
 
@@ -903,7 +903,7 @@ methods: {
 }
 ```
 
-这种写法的更多优点详见：[`v-model` 示例](#带有-debounce-的-v-model 移除)。
+这种写法的更多优点详见：[`v-model` 示例](#带有-debounce-的-v-model移除)。
 
 #### 替换 `limitBy` 过滤器
 
@@ -1000,7 +1000,7 @@ _.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc'])
 </div>
 {% endraw %}
 
-### 过滤器参数符号 <sup>变更</sup>
+### 过滤器参数符号<sup>变更</sup>
 
 现在过滤器参数形式可以更好地与 js 函数调用方式一致，因此不用再用空格分隔参数：
 
@@ -1021,7 +1021,7 @@ _.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc'])
 </div>
 {% endraw %}
 
-### 内置文本过滤器 <sup>移除</sup>
+### 内置文本过滤器<sup>移除</sup>
 
 尽管插入文本内部的过滤器依然有效，但是所有内置过滤器已经移除了。取代的是，推荐在每个区域使用更专业的库来解决。(比如用 [`date-fns`](https://date-fns.org/) 来格式化日期，用 [`accounting`](https://openexchangerates.github.io/accounting.js/) 来格式化货币)。
 
@@ -1051,7 +1051,7 @@ text.toLowerCase()
 
 #### 替换 `pluralize` 过滤器
 
-NPM 上的 [pluralize](https://www.npmjs.com/package/pluralize) 库可以很好的实现这个功能。如果仅仅想将特定的词格式化成复数形式或者想给特定的值 ('0') 指定特定的输出，也可以很容易地自定义复数格式化过滤器：
+NPM 上的 [pluralize](https://www.npmjs.com/package/pluralize) 库可以很好的实现这个功能。如果仅仅想将特定的词格式化成复数形式或者想给特定的值 (‘0’) 指定特定的输出，也可以很容易地自定义复数格式化过滤器：
 
 ``` js
 function pluralizeKnife (count) {
@@ -1082,7 +1082,7 @@ function pluralizeKnife (count) {
 </div>
 {% endraw %}
 
-### 双向过滤器 <sup>替换</sup>
+### 双向过滤器<sup>替换</sup>
 
 有些用户已经乐于通过 `v-model` 使用双向过滤器，以很少的代码创建有趣的输入。尽管表面上很*简单*，双向过滤器也会暗藏一些巨大的复杂性——甚至促使状态更新变得迟钝影响用户体验。推荐用包裹一个输入的组件取而代之，这样以更显性且功能更丰富的方式创建自定义的输入。
 
@@ -1126,7 +1126,7 @@ function pluralizeKnife (count) {
 
 ## 插槽
 
-### 重名的插槽 <sup>移除</sup>
+### 重名的插槽<sup>移除</sup>
 
 同一模板中的重名 `<slot>` 已经弃用。当一个插槽已经被渲染过了，那么就不能在同一模板其它地方被再次渲染了。如果要在不同位置渲染同一内容，可以用 prop 来传递。
 
@@ -1137,9 +1137,9 @@ function pluralizeKnife (count) {
 </div>
 {% endraw %}
 
-### `slot` 样式参数 <sup>移除</sup>
+### `slot` 样式参数<sup>移除</sup>
 
-通过具名 `<slot>` 插入的片段不再保持 `slot` 的参数。请用一个包裹元素来控制样式。或者用更高级方法：通过编程方式修改内容 ：[render functions](render-function.html)。
+通过具名 `<slot>` 插入的片段不再保持 `slot` 的参数。请用一个包裹元素来控制样式。或者用更高级方法：通过编程方式修改内容：[render functions](render-function.html)。
 
 {% raw %}
 <div class="upgrade-path">
@@ -1150,9 +1150,9 @@ function pluralizeKnife (count) {
 
 ## 特殊属性
 
-### `keep-alive` 属性 <sup>替换</sup>
+### `keep-alive` 属性<sup>替换</sup>
 
-`keep-alive` 不再是一个特殊属性而是一个包裹组件，类似于 `<transition>`比如：
+`keep-alive` 不再是一个特殊属性而是一个包裹组件，类似于 `<transition>` 比如：
 
 ``` html
 <keep-alive>
@@ -1160,7 +1160,7 @@ function pluralizeKnife (count) {
 </keep-alive>
 ```
 
-这样可以在含多种状态子组件中使用 `<keep-alive>` ：
+这样可以在含多种状态子组件中使用 `<keep-alive>`：
 
 ``` html
 <keep-alive>
@@ -1171,7 +1171,7 @@ function pluralizeKnife (count) {
 
 <p class="tip">当 `<keep-alive>` 含有不同子组件时，应该分别影响到每一个子组件。不仅是第一个而是所有的子组件都将被忽略。</p>
 
-和 `<transition>`一起使用时，确保把内容包裹在内：
+和 `<transition>` 一起使用时，确保把内容包裹在内：
 
 ``` html
 <transition>
@@ -1190,7 +1190,7 @@ function pluralizeKnife (count) {
 
 ## 计算插值
 
-### 属性内部的计算插值 <sup>移除</sup>
+### 属性内部的计算插值<sup>移除</sup>
 
 属性内部的计算插值已经不能再使用了：
 
@@ -1225,7 +1225,7 @@ computed: {
 </div>
 {% endraw %}
 
-### HTML 计算插值 <sup>移除</sup>
+### HTML 计算插值<sup>移除</sup>
 
 HTML 的计算插值 (`{% raw %}{{{ foo }}}{% endraw %}`) 已经移除，取代的是 [`v-html` 指令](../api/#v-html)。
 
@@ -1251,9 +1251,9 @@ HTML 的计算插值 (`{% raw %}{{{ foo }}}{% endraw %}`) 已经移除，取代
 
 ### `vm.$watch` <sup>changed</sup>
 
-通过 `vm.$watch`创建的观察器现在将在组件渲染时被激活。这样可以让你在组件渲染前更新状态，不用做不必要的更新。比如可以通过观察组件的 prop 变化来更新组件本身的值。
+通过 `vm.$watch` 创建的观察器现在将在组件渲染时被激活。这样可以让你在组件渲染前更新状态，不用做不必要的更新。比如可以通过观察组件的 prop 变化来更新组件本身的值。
 
-如果以前通过 `vm.$watch` 在组件更新后与 DOM 交互，现在就可以通过`updated`生命周期钩子来做这些。
+如果以前通过 `vm.$watch` 在组件更新后与 DOM 交互，现在就可以通过 `updated` 生命周期钩子来做这些。
 
 {% raw %}
 <div class="upgrade-path">
@@ -1284,7 +1284,7 @@ HTML 的计算插值 (`{% raw %}{{{ foo }}}{% endraw %}`) 已经移除，取代
 </div>
 {% endraw %}
 
-### `Array.prototype.$set`  <sup>弃用</sup>
+### `Array.prototype.$set` <sup>弃用</sup>
 
 用 `Vue.set` 替代
 
@@ -1325,9 +1325,9 @@ methods: {
 </div>
 {% endraw %}
 
-### Vue 实例上的`Vue.set` 和 `Vue.delete`<sup>移除</sup>
+### Vue 实例上的 `Vue.set` 和 `Vue.delete` <sup>移除</sup>
 
-`Vue.set` 和 `Vue.delete` 在实例上将不再起作用。现在都强制在实例的 data 选项中声明所有顶级响应值。如果删除实例属性或实例`$data`上的某个值，直接将它设置为 null 即可。
+`Vue.set` 和 `Vue.delete` 在实例上将不再起作用。现在都强制在实例的 data 选项中声明所有顶级响应值。如果删除实例属性或实例 `$data` 上的某个值，直接将它设置为 null 即可。
 
 {% raw %}
 <div class="upgrade-path">
@@ -1465,7 +1465,7 @@ vm.$el.remove()
 
 ### `replace: false` <sup>移除</sup>
 
-现在组件总是会替换掉他们被绑定的元素。为了模仿`replace: false`的行为，可以用一个和将要替换元素类似的元素将根组件包裹起来：
+现在组件总是会替换掉他们被绑定的元素。为了模仿 `replace: false` 的行为，可以用一个和将要替换元素类似的元素将根组件包裹起来：
 
 ``` js
 new Vue({
@@ -1546,7 +1546,7 @@ HTML 插值[替换为 `v-html`](#HTML-计算插值-移除)。
 
 ### 带 `el` 的 `Vue.extend` <sup>移除</sup>
 
-el 选项不再在 `Vue.extend`中使用。仅在实例创建参数中可用。
+el 选项不再在 `Vue.extend` 中使用。仅在实例创建参数中可用。
 
 {% raw %}
 <div class="upgrade-path">
diff --git a/src/v2/style-guide/index.md b/src/v2/style-guide/index.md
index 7d31b7da1..d759013b8 100644
--- a/src/v2/style-guide/index.md
+++ b/src/v2/style-guide/index.md
@@ -41,13 +41,14 @@ type: style-guide
 
 
 
-### 组件名为多个单词 <sup data-p="a">必要</sup>
+### 组件名为多个单词<sup data-p="a">必要</sup>
 
 **组件名应该始终是多个单词的，根组件 `App` 以及 `<transition>`、`<component>` 之类的 Vue 内置组件除外。**
 
 这样做可以避免跟现有的以及未来的 HTML 元素[相冲突](http://w3c.github.io/webcomponents/spec/custom/#valid-custom-element-name)，因为所有的 HTML 元素名称都是单个单词的。
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` js
@@ -65,6 +66,7 @@ export default {
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` js
@@ -83,7 +85,7 @@ export default {
 
 
 
-### 组件数据 <sup data-p="a">必要</sup>
+### 组件数据<sup data-p="a">必要</sup>
 
 **组件的 `data` 必须是一个函数。**
 
@@ -120,6 +122,7 @@ data: function () {
 {% raw %}</details>{% endraw %}
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` js
@@ -140,6 +143,7 @@ export default {
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 ``` js
 Vue.component('some-comp', {
@@ -175,7 +179,7 @@ new Vue({
 
 
 
-### Prop 定义 <sup data-p="a">必要</sup>
+### Prop 定义<sup data-p="a">必要</sup>
 
 **Prop 定义应该尽量详细。**
 
@@ -196,6 +200,7 @@ new Vue({
 {% raw %}</details>{% endraw %}
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` js
@@ -205,6 +210,7 @@ props: ['status']
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` js
@@ -234,7 +240,7 @@ props: {
 
 
 
-### 为 `v-for` 设置键值 <sup data-p="a">必要</sup>
+### 为 `v-for` 设置键值<sup data-p="a">必要</sup>
 
 **总是用 `key` 配合 `v-for`。**
 
@@ -275,6 +281,7 @@ data: function () {
 {% raw %}</details>{% endraw %}
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` html
@@ -287,6 +294,7 @@ data: function () {
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` html
@@ -303,7 +311,7 @@ data: function () {
 
 
 
-### 避免 `v-if` 和 `v-for` 用在一起 <sup data-p="a">必要</sup>
+### 避免 `v-if` 和 `v-for` 用在一起<sup data-p="a">必要</sup>
 
 **永远不要把 `v-if` 和 `v-for` 同时用在同一个元素上。**
 
@@ -311,7 +319,7 @@ data: function () {
 
 - 为了过滤一个列表中的项目 (比如 `v-for="user in users" v-if="user.isActive"`)。在这种情形下，请将 `users` 替换为一个计算属性 (比如 `activeUsers`)，让其返回过滤后的列表。
 
-- 为了避免渲染本应该被隐藏的列表 (比如 `v-for="user in users" v-if="shouldShowUsers"`)。这种情形下，请将 `v-if` 移动至容器元素上 (比如 `ul`, `ol`)。
+- 为了避免渲染本应该被隐藏的列表 (比如 `v-for="user in users" v-if="shouldShowUsers"`)。这种情形下，请将 `v-if` 移动至容器元素上 (比如 `ul`，`ol`)。
 
 {% raw %}
 <details>
@@ -407,6 +415,7 @@ computed: {
 {% raw %}</details>{% endraw %}
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` html
@@ -435,6 +444,7 @@ computed: {
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` html
@@ -462,7 +472,7 @@ computed: {
 
 
 
-### 为组件样式设置作用域 <sup data-p="a">必要</sup>
+### 为组件样式设置作用域<sup data-p="a">必要</sup>
 
 **对于应用来说，顶级 `App` 组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的。**
 
@@ -487,6 +497,7 @@ computed: {
 {% raw %}</details>{% endraw %}
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` html
@@ -503,6 +514,7 @@ computed: {
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` html
@@ -562,7 +574,7 @@ computed: {
 
 
 
-### 私有属性名 <sup data-p="a">必要</sup>
+### 私有属性名<sup data-p="a">必要</sup>
 
 **使用模块作用域保持不允许外部访问的函数的私有性。如果无法做到这一点，就始终为插件、混入等不考虑作为对外公共 API 的自定义私有属性使用 `$_` 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 `$_yourPluginName_`)。**
 
@@ -582,6 +594,7 @@ Vue 使用 `_` 前缀来定义其自身的私有属性，所以使用相同的
 {% raw %}</details>{% endraw %}
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` js
@@ -631,6 +644,7 @@ var myGreatMixin = {
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` js
@@ -670,13 +684,14 @@ export default myGreatMixin
 
 
 
-### 组件文件 <sup data-p="b">强烈推荐</sup>
+### 组件文件<sup data-p="b">强烈推荐</sup>
 
 **只要有能够拼接文件的构建系统，就把每个组件单独分成文件。**
 
 当你需要编辑一个组件或查阅一个组件的用法时，可以更快速的找到它。
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` js
@@ -691,6 +706,7 @@ Vue.component('TodoItem', {
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ```
@@ -708,13 +724,14 @@ components/
 
 
 
-### 单文件组件文件的大小写 <sup data-p="b">强烈推荐</sup>
+### 单文件组件文件的大小写<sup data-p="b">强烈推荐</sup>
 
 **[单文件组件](../guide/single-file-components.html)的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。**
 
 单词大写开头对于代码编辑器的自动补全最为友好，因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。然而，混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题，这也是横线连接命名同样完全可取的原因。
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ```
@@ -729,6 +746,7 @@ components/
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ```
@@ -744,7 +762,7 @@ components/
 
 
 
-### 基础组件名 <sup data-p="b">强烈推荐</sup>
+### 基础组件名<sup data-p="b">强烈推荐</sup>
 
 **应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 `Base`、`App` 或 `V`。**
 
@@ -790,6 +808,7 @@ components/
 {% raw %}</details>{% endraw %}
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ```
@@ -801,6 +820,7 @@ components/
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ```
@@ -827,13 +847,14 @@ components/
 
 
 
-### 单例组件名 <sup data-p="b">强烈推荐</sup>
+### 单例组件名<sup data-p="b">强烈推荐</sup>
 
 **只应该拥有单个活跃实例的组件应该以 `The` 前缀命名，以示其唯一性。**
 
 这不意味着组件只可用于一个单页面，而是*每个页面*只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的，而不是它们在你的应用中的上下文。如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，*只是目前*在每个页面里只使用一次。
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ```
@@ -844,6 +865,7 @@ components/
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ```
@@ -855,7 +877,7 @@ components/
 
 
 
-### 紧密耦合的组件名 <sup data-p="b">强烈推荐</sup>
+### 紧密耦合的组件名<sup data-p="b">强烈推荐</sup>
 
 **和父组件紧密耦合的子组件应该以父组件名作为前缀命名。**
 
@@ -898,6 +920,7 @@ components/
 {% raw %}</details>{% endraw %}
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ```
@@ -915,6 +938,7 @@ components/
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ```
@@ -933,7 +957,7 @@ components/
 
 
 
-### 组件名中的单词顺序 <sup data-p="b">强烈推荐</sup>
+### 组件名中的单词顺序<sup data-p="b">强烈推荐</sup>
 
 **组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。**
 
@@ -991,6 +1015,7 @@ components/
 {% raw %}</details>{% endraw %}
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ```
@@ -1005,6 +1030,7 @@ components/
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ```
@@ -1020,7 +1046,7 @@ components/
 
 
 
-### 自闭合组件 <sup data-p="b">强烈推荐</sup>
+### 自闭合组件<sup data-p="b">强烈推荐</sup>
 
 **在[单文件组件](../guide/single-file-components.html)、字符串模板和 [JSX](../guide/render-function.html#JSX) 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。**
 
@@ -1029,6 +1055,7 @@ components/
 不幸的是，HTML 并不支持自闭合的自定义元素——只有[官方的“空”元素](https://www.w3.org/TR/html/syntax.html#void-elements)。所以上述策略仅适用于进入 DOM 之前 Vue 的模板编译器能够触达的地方，然后再产出符合 DOM 规范的 HTML。
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` html
@@ -1043,6 +1070,7 @@ components/
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` html
@@ -1058,7 +1086,7 @@ components/
 
 
 
-### 模板中的组件名大小写 <sup data-p="b">强烈推荐</sup>
+### 模板中的组件名大小写<sup data-p="b">强烈推荐</sup>
 
 **对于绝大多数项目来说，在[单文件组件](../guide/single-file-components.html)和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。**
 
@@ -1073,6 +1101,7 @@ PascalCase 相比 kebab-case 有一些优势：
 还请注意，如果你已经是 kebab-case 的重度用户，那么与 HTML 保持一致的命名约定且在多个项目中保持相同的大小写规则就可能比上述优势更为重要了。在这些情况下，**在所有的地方都使用 kebab-case 同样是可以接受的。**
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` html
@@ -1092,6 +1121,7 @@ PascalCase 相比 kebab-case 有一些优势：
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` html
@@ -1114,7 +1144,7 @@ PascalCase 相比 kebab-case 有一些优势：
 
 
 
-### JS/JSX 中的组件名大小写 <sup data-p="b">强烈推荐</sup>
+### JS/JSX 中的组件名大小写<sup data-p="b">强烈推荐</sup>
 
 **JS/[JSX](../guide/render-function.html#JSX) 中的组件名应该始终是 PascalCase 的，尽管在较为简单的应用中只使用 `Vue.component` 进行全局组件注册时，可以使用 kebab-case 字符串。**
 
@@ -1131,9 +1161,11 @@ PascalCase 相比 kebab-case 有一些优势：
 
 - 全局组件很少被 JavaScript 引用，所以遵守 JavaScript 的命名约定意义不大。
 - 这些应用往往包含许多 DOM 内的模板，这种情况下是[**必须**使用 kebab-case](#模板中的组件名大小写-强烈推荐) 的。
+
 {% raw %}</details>{% endraw %}
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` js
@@ -1162,6 +1194,7 @@ export default {
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` js
@@ -1190,13 +1223,14 @@ export default {
 
 
 
-### 完整单词的组件名 <sup data-p="b">强烈推荐</sup>
+### 完整单词的组件名<sup data-p="b">强烈推荐</sup>
 
 **组件名应该倾向于完整单词而不是缩写。**
 
 编辑器中的自动补全已经让书写长命名的代价非常之低了，而其带来的明确性却是非常宝贵的。不常用的缩写尤其应该避免。
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ```
@@ -1207,6 +1241,7 @@ components/
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ```
@@ -1218,13 +1253,14 @@ components/
 
 
 
-### Prop 名大小写 <sup data-p="b">强烈推荐</sup>
+### Prop 名大小写<sup data-p="b">强烈推荐</sup>
 
 **在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 [JSX](../guide/render-function.html#JSX) 中应该始终使用 kebab-case。**
 
 我们单纯的遵循每个语言的约定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` js
@@ -1236,9 +1272,11 @@ props: {
 {% codeblock lang:html %}
 <WelcomeMessage greetingText="hi"/>
 {% endcodeblock %}
+
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` js
@@ -1250,17 +1288,19 @@ props: {
 {% codeblock lang:html %}
 <WelcomeMessage greeting-text="hi"/>
 {% endcodeblock %}
+
 {% raw %}</div>{% endraw %}
 
 
 
-### 多个 attribute 的元素 <sup data-p="b">强烈推荐</sup>
+### 多个 attribute 的元素<sup data-p="b">强烈推荐</sup>
 
 **多个 attribute 的元素应该分多行撰写，每个 attribute 一行。**
 
 在 JavaScript 中，用多行分隔对象的多个属性是很常见的最佳实践，因为这样更易读。模板和 [JSX](../guide/render-function.html#JSX) 值得我们做相同的考虑。
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` html
@@ -1273,6 +1313,7 @@ props: {
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` html
@@ -1293,13 +1334,14 @@ props: {
 
 
 
-### 模板中简单的表达式 <sup data-p="b">强烈推荐</sup>
+### 模板中简单的表达式<sup data-p="b">强烈推荐</sup>
 
 **组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。**
 
 复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的*是什么*，而非*如何*计算那个值。而且计算属性和方法使得代码可以重用。
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` html
@@ -1312,6 +1354,7 @@ props: {
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` html
@@ -1333,7 +1376,7 @@ computed: {
 
 
 
-### 简单的计算属性 <sup data-p="b">强烈推荐</sup>
+### 简单的计算属性<sup data-p="b">强烈推荐</sup>
 
 **应该把复杂计算属性分割为尽可能多的更简单的属性。**
 
@@ -1363,6 +1406,7 @@ computed: {
 {% raw %}</details>{% endraw %}
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` js
@@ -1379,6 +1423,7 @@ computed: {
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` js
@@ -1398,13 +1443,14 @@ computed: {
 
 
 
-### 带引号的 attribute 值 <sup data-p="b">强烈推荐</sup>
+### 带引号的 attribute 值<sup data-p="b">强烈推荐</sup>
 
 **非空 HTML attribute 值应该始终带引号 (单引号或双引号，选你 JS 里不用的那个)。**
 
 在 HTML 中不带空格的 attribute 值是可以没有引号的，但这鼓励了大家在特征值里*不写*空格，导致可读性变差。
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` html
@@ -1417,6 +1463,7 @@ computed: {
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` html
@@ -1430,11 +1477,12 @@ computed: {
 
 
 
-### 指令缩写 <sup data-p="b">强烈推荐</sup>
+### 指令缩写<sup data-p="b">强烈推荐</sup>
 
-**指令缩写 (用 `:` 表示 `v-bind:` 、用 `@` 表示 `v-on:` 和用 `#` 表示 `v-slot:`) 应该要么都用要么都不用。**
+**指令缩写 (用 `:` 表示 `v-bind:`、用 `@` 表示 `v-on:` 和用 `#` 表示 `v-slot:`) 应该要么都用要么都不用。**
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` html
@@ -1463,6 +1511,7 @@ computed: {
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` html
@@ -1520,7 +1569,7 @@ computed: {
 
 
 
-### 组件/实例的选项的顺序 <sup data-p="c">推荐</sup>
+### 组件/实例的选项的顺序<sup data-p="c">推荐</sup>
 
 **组件/实例的选项应该有统一的顺序。**
 
@@ -1581,7 +1630,7 @@ computed: {
 
 
 
-### 元素 attribute 的顺序 <sup data-p="c">推荐</sup>
+### 元素 attribute 的顺序<sup data-p="c">推荐</sup>
 
 **元素 (包括组件) 的 attribute 应该有统一的顺序。**
 
@@ -1625,13 +1674,14 @@ computed: {
 
 
 
-### 组件/实例选项中的空行 <sup data-p="c">推荐</sup>
+### 组件/实例选项中的空行<sup data-p="c">推荐</sup>
 
 **你可能想在多个属性之间增加一个空行，特别是在这些选项一屏放不下，需要滚动才能都看到的时候。**
 
 当你的组件开始觉得密集或难以阅读时，在多个属性之间添加空行可以让其变得容易。在一些诸如 Vim 的编辑器里，这样格式化后的选项还能通过键盘被快速导航。
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` js
@@ -1688,11 +1738,12 @@ computed: {
 
 
 
-### 单文件组件的顶级元素的顺序 <sup data-p="c">推荐</sup>
+### 单文件组件的顶级元素的顺序<sup data-p="c">推荐</sup>
 
 **[单文件组件](../guide/single-file-components.html)应该总是让 `<script>`、`<template>` 和 `<style>` 标签的顺序保持一致。且 `<style>` 要放在最后，因为另外两个标签至少要有一个。**
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` html
@@ -1715,6 +1766,7 @@ computed: {
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` html
@@ -1755,6 +1807,7 @@ computed: {
 默认情况下，Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时，会修补已存在的元素，而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同，则会出现[意料之外的结果](https://jsfiddle.net/chrisvfritz/bh8fLeds/)。
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` html
@@ -1768,6 +1821,7 @@ computed: {
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` html
@@ -1788,7 +1842,7 @@ computed: {
 
 
 
-### `scoped` 中的元素选择器 <sup data-p="d">谨慎使用</sup>
+### `scoped` 中的元素选择器<sup data-p="d">谨慎使用</sup>
 
 **元素选择器应该避免在 `scoped` 中出现。**
 
@@ -1808,6 +1862,7 @@ computed: {
 {% raw %}</details>{% endraw %}
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` html
@@ -1824,6 +1879,7 @@ button {
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` html
@@ -1841,7 +1897,7 @@ button {
 
 
 
-### 隐性的父子组件通信 <sup data-p="d">谨慎使用</sup>
+### 隐性的父子组件通信<sup data-p="d">谨慎使用</sup>
 
 **应该优先通过 prop 和事件进行父子组件之间的通信，而不是 `this.$parent` 或改变 prop。**
 
@@ -1850,6 +1906,7 @@ button {
 问题在于，这种做法在很多*简单*的场景下可能会更方便。但请当心，不要为了一时方便 (少写代码) 而牺牲数据流向的简洁性 (易于理解)。
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` js
@@ -1893,6 +1950,7 @@ Vue.component('TodoItem', {
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` js
@@ -1934,7 +1992,7 @@ Vue.component('TodoItem', {
 
 
 
-### 非 Flux 的全局状态管理 <sup data-p="d">谨慎使用</sup>
+### 非 Flux 的全局状态管理<sup data-p="d">谨慎使用</sup>
 
 **应该优先通过 [Vuex](https://github.com/vuejs/vuex) 管理全局状态，而不是通过 `this.$root` 或一个全局事件总线。**
 
@@ -1943,6 +2001,7 @@ Vue.component('TodoItem', {
 {% raw %}</details>{% endraw %}
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
+
 #### 反例
 
 ``` js
@@ -1967,6 +2026,7 @@ new Vue({
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
+
 #### 好例子
 
 ``` js