synced updates in cookbook

Author: Jinjiang

src/v2/cookbook/adding-instance-properties.md

@@ -4,7 +4,7 @@ type: cookbook
 order: 2
 ---
 
-## 简单的示例
+## 基本的示例
 
 你可能会在很多组件里用到数据/实用工具，但是不想[污染全局作用域](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md)。这种情况下，你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。
 
@@ -57,7 +57,7 @@ new Vue({
 })
 ```
 
-日志中会先出现 `"The name of some other app"`，然后出现 `"My App"`，因为 `this.appName` 在实例被创建之后被 `data` [覆写了](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch5.md)。我们通过 `$` 为实例属性设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定，诸如 `$_appName` 或 `ΩappName`，来避免和插件或未来的插件相冲突。
+日志中会先出现 `"My App"`，然后出现 `"The name of some other app"`，因为 `this.appName` 在实例被创建之后被 `data` [覆写了](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch5.md)。我们通过 `$` 为实例属性设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定，诸如 `$_appName` 或 `ΩappName`，来避免和插件或未来的插件相冲突。
 
 ## 真实的示例：通过 axios 替换 Vue Resource
 
@@ -91,7 +91,8 @@ new Vue({
   },
   created () {
     var vm = this
-    this.$http.get('https://jsonplaceholder.typicode.com/users')
+    this.$http
+      .get('https://jsonplaceholder.typicode.com/users')
       .then(function (response) {
         vm.users = response.data
       })
@@ -107,26 +108,32 @@ new Vue({
 
 ``` js
 Vue.prototype.$reverseText = function (propertyName) {
-  this[propertyName] = this[propertyName].split('').reverse().join('')
+  this[propertyName] = this[propertyName]
+    .split('')
+    .reverse()
+    .join('')
 }
 
 new Vue({
   data: {
     message: 'Hello'
   },
   created: function () {
-    console.log(this.message)    // => "Hello"
+    console.log(this.message) // => "Hello"
     this.$reverseText('message')
-    console.log(this.message)    // => "olleH"
+    console.log(this.message) // => "olleH"
   }
 })
 ```
 
-注意如果你使用了 ES6/2015 的箭头函数，则其绑定的上下文__不会__正常工作，因为它们会隐式地绑定其父级作用域。也就是说使用箭头函数的版本：
+注意如果你使用了 ES6/2015 的箭头函数，则其绑定的上下文**不会**正常工作，因为它们会隐式地绑定其父级作用域。也就是说使用箭头函数的版本：
 
 ``` js
 Vue.prototype.$reverseText = propertyName => {
-  this[propertyName] = this[propertyName].split('').reverse().join('')
+  this[propertyName] = this[propertyName]
+    .split('')
+    .reverse()
+    .join('')
 }
 ```
 
@@ -142,27 +149,30 @@ Uncaught TypeError: Cannot read property 'split' of undefined
 
 然而，有的时候它会让其他开发者感到混乱。例如他们可能看到了 `this.$http`，然后会想“哦，我从来没见过这个 Vue 的功能”，然后他们来到另外一个项目又发现 `this.$http` 是未被定义的。或者你打算去搜索如何使用它，但是搜不到结果，因为他们并没有发现这是一个 axios 的别名。
 
-__这种便利是以显性表达为代价的。__当我们查阅一个组件的时候，要注意交代清楚 `$http` 是从哪来的：Vue 自身、一个插件、还是一个辅助库？
+**这种便利是以显性表达为代价的。**当我们查阅一个组件的时候，要注意交代清楚 `$http` 是从哪来的：Vue 自身、一个插件、还是一个辅助库？
 
 那么有别的替代方案吗？
 
 ## 替代方案
 
 ### 当没有使用模块系统时
 
-在__没有__模块系统 (比如 webpack 或 Browserify) 的应用中，存在一种_任何_重 JS 前端应用都常用的模式：一个全局的 `App` 对象。
+在**没有**模块系统 (比如 webpack 或 Browserify) 的应用中，存在一种_任何_重 JS 前端应用都常用的模式：一个全局的 `App` 对象。
 
 如果你想要添加的东西跟 Vue 本身没有太多关系，那么这是一个不错的替代方案。举个例子：
 
 ``` js
 var App = Object.freeze({
   name: 'My App',
-  description: '2.1.4',
+  version: '2.1.4',
   helpers: {
     // 这我们之前见到过的 `$reverseText` 方法
     // 的一个纯函数版本
     reverseText: function (text) {
-      return text.split('').reverse().join('')
+      return text
+        .split('')
+        .reverse()
+        .join('')
     }
   }
 })

src/v2/cookbook/cookbook-contributions.md

@@ -4,7 +4,7 @@ type: cookbook
 order: 7
 ---
 
-## 简单的示例
+## 基本的示例
 
 我们可能很多次想为网站的滚动事件添加一些行为，尤其是动画。已有的做法很多，但是代码和依赖最少的方式可能就是使用一个[自定义指令](../guide/custom-directive.html)创建一个钩子，在特定的滚动事件之后作处理。
 

src/v2/cookbook/creating-custom-scroll-directives.md

@@ -0,0 +1,113 @@
+---
+title: Debugging in VS Code and Chrome
+type: cookbook
+order: 8
+---
+
+Every application reaches a point where it's necessary to understand failures, small to large. In this recipe, we explore a few workflows for VS Code users, who are using Chrome to test.
+
+This recipe shows how to use the [Debugger for Chrome](https://github.com/Microsoft/VSCode-chrome-debug) extension with VS Code to debug Vue.js applications generated by the [Vue CLI](https://github.com/vuejs/vue-cli).
+
+## Prerequisites
+
+You must have Chrome and VS Code installed. Make sure to get the latest version of [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) extension installed in VS Code.
+
+Install and create a project with the [vue-cli](https://github.com/vuejs/vue-cli), with the instructions for installation documented in the readme of the project. Change into the newly created application directory and open VS Code.
+
+### Showing Source Code in the Chrome Devtools
+
+Before you can debug your Vue components from VS Code you need to update the generated Webpack config to build sourcemaps. We do this so that our debugger has a way to map the code within a compressed file back to its position in the original file. This ensures that you can debug an application even after your assets have been optimized by Webpack.
+
+Go to `config/index.js` and find the `devtool` property. Update it to:
+
+```json
+devtool: 'source-map',
+```
+
+### Launching the Application from VS Code
+
+Click on the Debugging icon in the Activity Bar to bring up the Debug view, then click on the gear icon to configure a launch.json file, selecting **Chrome** for the environment. Replace content of the generated launch.json with the following two configurations:
+
+![Add Chrome Configuration](/images/config_add.png)
+
+```json
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "vuejs: chrome",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}/src",
+      "breakOnLoad": true,
+      "sourceMapPathOverrides": {
+        "webpack:///src/*": "${webRoot}/*"
+      }
+    }
+  ]
+}
+```
+
+## Setting a Breakpoint
+
+1.  Set a breakpoint in **src/components/HelloWorld.vue** on `line 90` where the `data` function returns a string.
+
+![Breakpoint Renderer](/images/breakpoint_set.png)
+
+2.  Open your favorite terminal at the root folder and serve the app using Vue CLI:
+
+```
+npm start
+```
+
+3.  Go to the Debug view, select the **'vuejs: chrome'** configuration, then press F5 or click the green play button.
+
+4.  Your breakpoint should now be hit as the new instance of Chrome opens `http://localhost:8080`.
+
+![Breakpoint Hit](/images/breakpoint_hit.png)
+
+## Alternative Patterns
+
+### Vue Devtools
+
+There are other methods of debugging, varying in complexity. The most popular and simple of which is to use the excellent [vue-devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd). Some of the benefits of working with the devtools are that they enable you to live-edit data properties and see the changes reflected immediately. The other major benefit is the ability to do time travel debugging for Vuex.
+
+![Devtools Timetravel Debugger](/images/devtools-timetravel.gif)
+
+<p class="tip">Please note that if the page uses a production/minified build of Vue.js (such as the standard link from a CDN), devtools inspection is disabled by default so the Vue pane won't show up. If you switch to an unminified version, you may have to give the page a hard refresh to see them.</p>
+
+### Vuetron
+
+[Vuetron](http://vuetron.io/) is a really nice project that extends some of the work that vue-devtools has done. In addition to the normal devtools workflow, you are able to:
+
+* Quickly view API Request/Response: if you're using the fetch API for requests, this event is displayed for any request sent. The expanded card displays the request data as well as the response data.
+* Subscribe to specific parts of your application’s state for faster debugging
+* Visualize component hierarchy, and an animation allows you to collapse or expand the tree for specific hierarchy views.
+
+![Vuetron Heirarchy](/images/vuetron-heirarchy.gif)
+
+### Simple Debugger Statement
+
+The example above has a great workflow. However, there is an alternative option where you can use the [native debugger statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) directly in your code. If you choose to work this way, it's important that you remember to remove the statements when you're done.
+
+```js
+<script>
+export default {
+  data() {
+    return {
+      message: ''
+    }
+  },
+  mounted() {
+    const hello = 'Hello World!'
+    debugger
+    this.message = hello
+  }
+};
+</script>
+```
+
+## Acknowledgements
+
+This recipe was based on a contribution from [Kenneth Auchenberg](https://twitter.com/auchenberg), [available here](https://github.com/Microsoft/VSCode-recipes/tree/master/vuejs-cli).

src/v2/cookbook/debugging-in-vscode.md

@@ -4,7 +4,7 @@ type: cookbook
 order: 4
 ---
 
-## 简单的示例
+## 基本的示例
 
 创建一套 SVG 图标系统的方式有很多，但是有一种方法能够充分发挥 Vue 的能力，那就是把可编辑的内联图标创建为组件。这样做有好多好处：
 
@@ -24,7 +24,7 @@ order: 4
 
 ![网站文档](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/screendocs.jpg '文档 demo')
 
-我们将会创建一个基础图标 (`IconBase.vue`) 组件，并使用了一个无作用域的插槽。
+我们将会创建一个基础图标 (`IconBase.vue`) 组件，并使用了一个插槽。
 
 ```html
 <template>
@@ -43,7 +43,7 @@ order: 4
 </template>
 ```
 
-你可以像这样使用这个基础图标，唯一可能要做的就是根据你图标的 `viewBox` 来更新其 `viewBox`。在基础图标里会有 `width`、`height`、`color` 以及图标的名字等 prop，这样我们就可以通过 prop 对其动态更新。这个名字将会同时用在 `<title>` 的内容及其用于提供可访问性的 `id` 上。
+你可以像这样使用这个基础图标，唯一可能要做的就是根据你图标的 `viewBox` 来更新其 `viewBox`。在基础图标里会有 `width`、`height`、`iconColor` 以及图标的名字等 prop，这样我们就可以通过 prop 对其动态更新。这个名字将会同时用在 `<title>` 的内容及其用于提供可访问性的 `id` 上。
 
 我们的脚本是下面这样的，我们设了一些默认值，这样在没有特别设置的情况下图标渲染出来就是一致的：
 

src/v2/cookbook/editable-svg-icons.md

@@ -4,7 +4,7 @@ type: cookbook
 order: 3
 ---
 
-## 简单的示例
+## 基本的示例
 
 表单校验是浏览器原生支持的，但是有的时候用不同的浏览器处理起来需要一些小技巧。即使当表单校验已经被完美支持，你也还是有很多时候需要进行自定义的校验。这时一个更加手动的基于 Vue 的解决方案可能会更适合。我们来看一个简单的示例。