diff --git a/src/v2/examples/index.md b/src/v2/examples/index.md index 7a6f257188..5fdff15702 100644 --- a/src/v2/examples/index.md +++ b/src/v2/examples/index.md @@ -6,4 +6,4 @@ order: 0 > Dead simple Markdown editor. - + diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md index a7d5d1935a..c15641c655 100644 --- a/src/v2/guide/components.md +++ b/src/v2/guide/components.md @@ -10,7 +10,7 @@ Components are one of the most powerful features of Vue. They help you extend ba ## Using Components -### Registration +### Global Registration We've learned in the previous sections that we can create a new Vue instance with: diff --git a/src/v2/guide/custom-directive.md b/src/v2/guide/custom-directive.md index 1efb31377e..dcfc5b8e67 100644 --- a/src/v2/guide/custom-directive.md +++ b/src/v2/guide/custom-directive.md @@ -43,6 +43,9 @@ If you want to register a directive locally instead, components also accept a `d directives: { focus: { // directive definition + inserted: function (el) { + el.focus() + } } } ``` diff --git a/src/v2/guide/instance.md b/src/v2/guide/instance.md index addb7ac577..e32040260f 100644 --- a/src/v2/guide/instance.md +++ b/src/v2/guide/instance.md @@ -120,7 +120,7 @@ new Vue({ Các hook khác như [`mounted`](../api/#mounted), [`updated`](../api/#updated), và [`destroyed`](../api/#destroyed) cũng được gọi vào các giai đoạn khác nhau trong vòng đời của đối tượng. Tất cả các hook này đều được thực thi với ngữ cảnh `this` trỏ đến đối tượng Vue hiện hành. -

Đừng dùng [hàm mũi tên (arrow functions)](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) cho các thuộc tính tùy chọn hoặc callback như là `created: () => console.log(this.a)` hoặc `vm.$watch('a', newValue => this.myMethod())`. Vì hàm mũi tên được bind vào ngữ cảnh cha (parent context), `this` sẽ không trỏ đến đối tượng Vue hiện hành và do đó `this.a` hoặc `this.myMethod` sẽ không trả về giá trị mà bạn mong đợi.

+

Đừng dùng [hàm mũi tên (arrow functions)](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) cho các thuộc tính tùy chọn hoặc callback như là `created: () => console.log(this.a)` hoặc `vm.$watch('a', newValue => this.myMethod())`. Vì hàm mũi tên được bind vào ngữ cảnh cha (parent context), `this` sẽ không trỏ đến đối tượng Vue hiện hành. Do vậy `this.a` hoặc `this.myMethod` sẽ không trả về giá trị mà bạn mong đợi, mà thay vào đó thường là các lỗi `Uncaught TypeError: Cannot read property of undefined` hoặc `Uncaught TypeError: this.myMethod is not a function`.

## Sơ đồ vòng đời diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index cdcf50bc3d..e075a5f142 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -50,6 +50,10 @@ Even if you don't like the idea of Single-File Components, you can still leverag ## Getting Started +### Example Sandbox + +If you want to dive right in and start playing with single-file components, check out [this simple todo app](https://codesandbox.io/s/o29j95wx9) on CodeSandbox. + ### For Users New to Module Build Systems in JavaScript With `.vue` components, we're entering the realm of advanced JavaScript applications. That means learning to use a few additional tools if you haven't already: @@ -58,11 +62,9 @@ With `.vue` components, we're entering the realm of advanced JavaScript applicat - **Modern JavaScript with ES2015/16**: Read through Babel's [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/). You don't have to memorize every feature right now, but keep this page as a reference you can come back to. -After you've taken a day to dive into these resources, we recommend checking out the [webpack-simple](https://github.com/vuejs-templates/webpack-simple) template. Follow the instructions and you should have a Vue project with `.vue` components, ES2015 and hot-reloading running in no time! - -The template uses [Webpack](https://webpack.js.org/), a module bundler that takes a number of "modules" and then bundles them into your final application. To learn more about Webpack itself, check out [their official docs](https://webpack.js.org/configuration/) and [Webpack Academy](https://webpack.academy/p/the-core-concepts). +After you've taken a day to dive into these resources, we recommend checking out the [webpack](https://vuejs-templates.github.io/webpack) template. Follow the instructions and you should have a Vue project with `.vue` components, ES2015, and hot-reloading in no time! -In Webpack, each module can be transformed by a "loader" before being included in the bundle, and Vue offers the [vue-loader](https://github.com/vuejs/vue-loader) plugin to take care of translating `.vue` single-file components. The [webpack-simple](https://github.com/vuejs-templates/webpack-simple) template has already set up everything for you, but if you'd like to learn more about how `.vue` components work with Webpack, you can read [the docs for vue-loader](https://vue-loader.vuejs.org). +To learn more about Webpack itself, check out [their official docs](https://webpack.js.org/configuration/) and [Webpack Academy](https://webpack.academy/p/the-core-concepts). In Webpack, each file can be transformed by a "loader" before being included in the bundle, and Vue offers the [vue-loader](https://vue-loader.vuejs.org) plugin to translate single-file (`.vue`) components. ### For Advanced Users diff --git a/src/v2/style-guide/index.md b/src/v2/style-guide/index.md index 2bf87b3430..c007725b84 100644 --- a/src/v2/style-guide/index.md +++ b/src/v2/style-guide/index.md @@ -30,7 +30,7 @@ Where multiple, equally good options exist, an arbitrary choice can be made to e 1. train your brain to more easily parse most of the community code you encounter 2. be able to copy and paste most community code examples without modification -2. often find new hires are already accustomed to your preferred coding style, at least in regards to Vue +3. often find new hires are already accustomed to your preferred coding style, at least in regards to Vue ### Priority D: Use with Caution @@ -352,7 +352,7 @@ Beyond the `scoped` attribute, using unique class names can help ensure that 3rd - +