From 1a0e6f436c35cab752dc24c7d1869dd968d37a5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81tila=20Camur=C3=A7a=20Alves?= Date: Sat, 2 Mar 2019 10:54:36 -0300 Subject: [PATCH 1/5] Link to custom-elements-everywhere.com (#2039) The site runs a suite of tests against a framework to identify interoperability issues, and highlight potential fixes already implemented in other frameworks. This is a great way to give more confidence while choosing Vue. --- src/v2/guide/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 9f81c29936..2445ace4c4 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -393,6 +393,8 @@ You may have noticed that Vue components are very similar to **Custom Elements** 2. Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and build tool integrations. +Although Vue doesn't use custom elements internally, it has [great interoperability](https://custom-elements-everywhere.com/#vue) when it comes to consuming or distributing as custom elements. Vue CLI also supports building Vue components that register themselves as native custom elements. + ## Ready for More? We've briefly introduced the most basic features of Vue.js core - the rest of this guide will cover them and other advanced features with much finer details, so make sure to read through it all! From 5b979bf7fafebea9550b0990857ee3c8ef95d157 Mon Sep 17 00:00:00 2001 From: "P.E. Butler III" Date: Sat, 2 Mar 2019 22:23:49 -0700 Subject: [PATCH 2/5] Updated Nuxtent link (#2041) --- src/v2/cookbook/serverless-blog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/serverless-blog.md b/src/v2/cookbook/serverless-blog.md index 7a62d3c72f..84f2a20861 100644 --- a/src/v2/cookbook/serverless-blog.md +++ b/src/v2/cookbook/serverless-blog.md @@ -298,7 +298,7 @@ created() { ## Alternative Patterns -An alternative pattern to consider, especially if you prefer writing only in Markdown, is using something like [Nuxtent](https://nuxtent.now.sh/guide/writing#async-components). Nuxtent allows you to use `Vue Component` inside of Markdown files. This approach would be akin to a static site approach (i.e. Jekyll) where you compose your blog posts in Markdown files. Nuxtent adds a nice integration between Vue.js and Markdown allowing you to live in a 100% Vue.js world. +An alternative pattern to consider, especially if you prefer writing only in Markdown, is using something like [Nuxtent](https://nuxtent-module.netlify.com/guide/writing/#async-components). Nuxtent allows you to use `Vue Component` inside of Markdown files. This approach would be akin to a static site approach (i.e. Jekyll) where you compose your blog posts in Markdown files. Nuxtent adds a nice integration between Vue.js and Markdown allowing you to live in a 100% Vue.js world. ## Wrap up From 93eefd31e970eafe5baa69780e04037ac831f43f Mon Sep 17 00:00:00 2001 From: Ricardo Ambrogi Date: Sun, 3 Mar 2019 20:07:30 +0100 Subject: [PATCH 3/5] Fix wrong statement about arrow function and bound this (#2040) * Fix wrong statement about arrow function and bound this Stating that arrow functions are bound to it's parent `this` is wrong, arrow functions does not have a `this` at all. More: https://twitter.com/getify/status/1101521219243966466 * Update src/v2/guide/instance.md Co-Authored-By: KadoBOT * Update instance.md Remove unnecessary `a` --- src/v2/guide/instance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/instance.md b/src/v2/guide/instance.md index 826aa97d9c..268bab16d2 100644 --- a/src/v2/guide/instance.md +++ b/src/v2/guide/instance.md @@ -142,7 +142,7 @@ new Vue({ There are also other hooks which will be called at different stages of the instance's lifecycle, such as [`mounted`](../api/#mounted), [`updated`](../api/#updated), and [`destroyed`](../api/#destroyed). All lifecycle hooks are called with their `this` context pointing to the Vue instance invoking it. -

Don't use [arrow functions](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) on an options property or callback, such as `created: () => console.log(this.a)` or `vm.$watch('a', newValue => this.myMethod())`. Since arrow functions are bound to the parent context, `this` will not be the Vue instance as you'd expect, often resulting in errors such as `Uncaught TypeError: Cannot read property of undefined` or `Uncaught TypeError: this.myMethod is not a function`.

+

Don't use [arrow functions](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) on an options property or callback, such as `created: () => console.log(this.a)` or `vm.$watch('a', newValue => this.myMethod())`. Since an arrow function doesn't have a `this`, `this` will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as `Uncaught TypeError: Cannot read property of undefined` or `Uncaught TypeError: this.myMethod is not a function`.

## Lifecycle Diagram From 09f864610f41500ec182382cac7a6b32f771992d Mon Sep 17 00:00:00 2001 From: Dzulfikar Adi Putra Date: Thu, 7 Mar 2019 17:02:41 +0700 Subject: [PATCH 4/5] fix: routing translation --- src/v2/guide/routing.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/v2/guide/routing.md b/src/v2/guide/routing.md index 2ac8e83030..e1fac507f5 100644 --- a/src/v2/guide/routing.md +++ b/src/v2/guide/routing.md @@ -4,13 +4,13 @@ type: guide order: 501 --- -## Official Router +## *Router* Resmi -For most Single Page Applications, it's recommended to use the officially-supported [vue-router library](https://github.com/vuejs/vue-router). For more details, see vue-router's [documentation](https://router.vuejs.org/). +Bagi sebagian besar *Single Page Applications*, direkomendasikan untuk menggunakan [pustaka vue-router](https://github.com/vuejs/vue-router) yang resmi didukung VueJS. Lebih detailnya, lihat pada laman [dokumentasi](https://router.vuejs.org/) vue-router. -## Simple Routing From Scratch +## *Routing* Simpel dari Awal -If you only need very simple routing and do not wish to involve a full-featured router library, you can do so by dynamically rendering a page-level component like this: +Jika Anda hanya membutuhkan *routing* yang sangat simpel dan tidak melibatkan fitur lengkap dari pustaka *router*, Anda dapat melakukannya dengan me-*render* *page-level* komponen sebagai berikut : ``` js const NotFound = { template: '

Page not found

' } @@ -36,8 +36,8 @@ new Vue({ }) ``` -Combined with the HTML5 History API, you can build a very basic but fully-functional client-side router. To see that in practice, check out [this example app](https://github.com/chrisvfritz/vue-2.0-simple-routing-example). +Dikombinasikan dengan *HTML5 History API*, Anda dapat membuat *client-side router* yang sangat mendasar namun berfungsi penuh. Untuk melihatnya dalam implementasi, cek [contoh aplikasi ini](https://github.com/chrisvfritz/vue-2.0-simple-routing-example) -## Integrating 3rd-Party Routers +## Integrasi dengan *Routers* pihak ketiga -If there's a 3rd-party router you prefer to use, such as [Page.js](https://github.com/visionmedia/page.js) or [Director](https://github.com/flatiron/director), integration is [similarly easy](https://github.com/chrisvfritz/vue-2.0-simple-routing-example/compare/master...pagejs). Here's a [complete example](https://github.com/chrisvfritz/vue-2.0-simple-routing-example/tree/pagejs) using Page.js. +Jika Anda lebih nyaman menggunakan pustaka *router* pihak ketiga, seperti [Page.js](https://github.com/visionmedia/page.js) or [Director](https://github.com/flatiron/director), integrasinya [mudah, tidak berbeda jauh](https://github.com/chrisvfritz/vue-2.0-simple-routing-example/compare/master...pagejs). Berikut ini [contoh lengkap](https://github.com/chrisvfritz/vue-2.0-simple-routing-example/tree/pagejs) menggunakan *Page.js*. From 1abe7e2d84fdf7efdef4071630f4b106442bf81d Mon Sep 17 00:00:00 2001 From: Dzulfikar Adi Putra Date: Fri, 8 Mar 2019 08:32:04 +0700 Subject: [PATCH 5/5] fix: fixed, as suggested by @nusendra and @mazipan --- src/v2/guide/routing.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/v2/guide/routing.md b/src/v2/guide/routing.md index e1fac507f5..a5f62f99b9 100644 --- a/src/v2/guide/routing.md +++ b/src/v2/guide/routing.md @@ -10,7 +10,7 @@ Bagi sebagian besar *Single Page Applications*, direkomendasikan untuk menggunak ## *Routing* Simpel dari Awal -Jika Anda hanya membutuhkan *routing* yang sangat simpel dan tidak melibatkan fitur lengkap dari pustaka *router*, Anda dapat melakukannya dengan me-*render* *page-level* komponen sebagai berikut : +Jika Anda hanya membutuhkan *routing* yang sangat simpel dan tidak melibatkan fitur lengkap dari pustaka *router*, Anda bisa melakukannya dengan me-render secara dinamis sebuah komponen yang berperan sebagai halaman seperti berikut : ``` js const NotFound = { template: '

Page not found

' } @@ -36,8 +36,8 @@ new Vue({ }) ``` -Dikombinasikan dengan *HTML5 History API*, Anda dapat membuat *client-side router* yang sangat mendasar namun berfungsi penuh. Untuk melihatnya dalam implementasi, cek [contoh aplikasi ini](https://github.com/chrisvfritz/vue-2.0-simple-routing-example) +Dikombinasikan dengan *HTML5 History API*, Anda dapat membuat *client-side router* yang sangat mendasar namun berfungsi penuh. Untuk melihat bagaimana cara mengimplementasikannya, silakan cek [contoh aplikasi ini](https://github.com/chrisvfritz/vue-2.0-simple-routing-example) -## Integrasi dengan *Routers* pihak ketiga +## Integrasi dengan *Router* pihak ketiga Jika Anda lebih nyaman menggunakan pustaka *router* pihak ketiga, seperti [Page.js](https://github.com/visionmedia/page.js) or [Director](https://github.com/flatiron/director), integrasinya [mudah, tidak berbeda jauh](https://github.com/chrisvfritz/vue-2.0-simple-routing-example/compare/master...pagejs). Berikut ini [contoh lengkap](https://github.com/chrisvfritz/vue-2.0-simple-routing-example/tree/pagejs) menggunakan *Page.js*.