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/6] 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/6] 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/6] 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 def3edaf3a940be370c24baa8a7c16e444500e5c Mon Sep 17 00:00:00 2001 From: logustra Date: Thu, 7 Mar 2019 12:43:07 +0700 Subject: [PATCH 4/6] translate filters --- src/v2/guide/filters.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/v2/guide/filters.md b/src/v2/guide/filters.md index 4a6eecdbf2..d74ba2b494 100644 --- a/src/v2/guide/filters.md +++ b/src/v2/guide/filters.md @@ -1,20 +1,20 @@ --- -title: Filters +title: Filter type: guide order: 305 --- -Vue.js allows you to define filters that can be used to apply common text formatting. Filters are usable in two places: **mustache interpolations and `v-bind` expressions** (the latter supported in 2.1.0+). Filters should be appended to the end of the JavaScript expression, denoted by the "pipe" symbol: +Vue.js memungkinkan Anda untuk menentukan filter yang dapat digunakan untuk menerapkan pemformatan text. Filter dapat digunakan di dua tempat: **mustache interpolations dan `v-bind` expressions** (terakhir didukung di 2.1.0+). Filter harus ditambahkan di akhir JavaScript expression dengan simbol "pipa": ``` html - + {{ message | capitalize }} - +
``` -You can define local filters in a component's options: +Anda dapat menentukan filter lokal dalam opsi komponen: ``` js filters: { @@ -26,7 +26,7 @@ filters: { } ``` -or define a filter globally before creating the Vue instance: +atau menentukan filter secara global sebelum membuat Vue instance: ``` js Vue.filter('capitalize', function (value) { @@ -40,7 +40,7 @@ new Vue({ }) ``` -Below is an example of our `capitalize` filter being used: +Di bawah ini adalah contoh dari filter `capitalize` yang kami gunakan: {% raw %}
@@ -66,20 +66,20 @@ Below is an example of our `capitalize` filter being used: {% endraw %} -The filter's function always receives the expression's value (the result of the former chain) as its first argument. In the above example, the `capitalize` filter function will receive the value of `message` as its argument. +Filter selalu menerima nilai expressions (hasil dari rantai sebelumnya) sebagai argumen pertama. Dalam contoh di atas, filter `capitalize` akan menerima nilai `message` sebagai argumen. -Filters can be chained: +Filter bisa berantai: ``` html {{ message | filterA | filterB }} ``` -In this case, `filterA`, defined with a single argument, will receive the value of `message`, and then the `filterB` function will be called with the result of `filterA` passed into `filterB`'s single argument. +Pasa kasus ini, `filterA`, didefinisikan dengan satu argumen, yang akan menerima nilai `message`, kemudian `filterB` akan dipanggil dengan hasil dari `filterA` yang akan dilanjutkan ke `filterB` sebagai satu argumen. -Filters are JavaScript functions, therefore they can take arguments: +Filter adalah fungsi JavaScript, oleh karena itu mereka dapat mengambil argumen: ``` html {{ message | filterA('arg1', arg2) }} ``` -Here `filterA` is defined as a function taking three arguments. The value of `message` will be passed into the first argument. The plain string `'arg1'` will be passed into the `filterA` as its second argument, and the value of expression `arg2` will be evaluated and passed in as the third argument. +Di sini `filterA` didefinisikan sebagai fungsi yang mengambil tiga argumen. Nilai `message` yang akan dilanjutkan ke argumen pertama. String `'arg1'` yang akan di lanjutkan ke `filterA` sebagian argumen kedua, dan nilai dari expression `arg2` yang akan dievaluasi dan diteruskan sebagai argumen ketiga. From edd8336a53e3d93c956debe31b188b8710eea300 Mon Sep 17 00:00:00 2001 From: logustra Date: Thu, 7 Mar 2019 14:42:39 +0700 Subject: [PATCH 5/6] fix translate filters --- src/v2/guide/filters.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/filters.md b/src/v2/guide/filters.md index d74ba2b494..9de1d66a84 100644 --- a/src/v2/guide/filters.md +++ b/src/v2/guide/filters.md @@ -4,7 +4,7 @@ type: guide order: 305 --- -Vue.js memungkinkan Anda untuk menentukan filter yang dapat digunakan untuk menerapkan pemformatan text. Filter dapat digunakan di dua tempat: **mustache interpolations dan `v-bind` expressions** (terakhir didukung di 2.1.0+). Filter harus ditambahkan di akhir JavaScript expression dengan simbol "pipa": +Vue.js memungkinkan Anda untuk menentukan filter yang dapat digunakan untuk memformat tulisan. Filter dapat digunakan di dua tempat: **interpolasi mustache dan ekspresi `v-bind`** (terakhir didukung di 2.1.0+). Filter harus ditambahkan di akhir JavaScript expression dengan simbol "pipe" ( | ): ``` html From 7ab24ebb2815703914190e86e4e3663bd0a17b79 Mon Sep 17 00:00:00 2001 From: logustra Date: Thu, 7 Mar 2019 15:04:37 +0700 Subject: [PATCH 6/6] update translate filters --- src/v2/guide/filters.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/v2/guide/filters.md b/src/v2/guide/filters.md index 9de1d66a84..65c4993054 100644 --- a/src/v2/guide/filters.md +++ b/src/v2/guide/filters.md @@ -4,7 +4,7 @@ type: guide order: 305 --- -Vue.js memungkinkan Anda untuk menentukan filter yang dapat digunakan untuk memformat tulisan. Filter dapat digunakan di dua tempat: **interpolasi mustache dan ekspresi `v-bind`** (terakhir didukung di 2.1.0+). Filter harus ditambahkan di akhir JavaScript expression dengan simbol "pipe" ( | ): +Vue.js memungkinkan Anda untuk menentukan filter yang dapat digunakan untuk memformat tulisan. Filter dapat digunakan di dua tempat: **interpolasi mustache dan ekspresi `v-bind`** (terakhir didukung di 2.1.0+). Filter harus ditambahkan di akhir ekspresi JavaScript dengan simbol "pipe" ( | ): ``` html @@ -66,7 +66,7 @@ Di bawah ini adalah contoh dari filter `capitalize` yang kami gunakan: {% endraw %} -Filter selalu menerima nilai expressions (hasil dari rantai sebelumnya) sebagai argumen pertama. Dalam contoh di atas, filter `capitalize` akan menerima nilai `message` sebagai argumen. +Filter selalu menerima nilai ekspresi (hasil dari rantai sebelumnya) sebagai argumen pertama. Dalam contoh di atas, filter `capitalize` akan menerima nilai `message` sebagai argumen. Filter bisa berantai: @@ -82,4 +82,4 @@ Filter adalah fungsi JavaScript, oleh karena itu mereka dapat mengambil argumen: {{ message | filterA('arg1', arg2) }} ``` -Di sini `filterA` didefinisikan sebagai fungsi yang mengambil tiga argumen. Nilai `message` yang akan dilanjutkan ke argumen pertama. String `'arg1'` yang akan di lanjutkan ke `filterA` sebagian argumen kedua, dan nilai dari expression `arg2` yang akan dievaluasi dan diteruskan sebagai argumen ketiga. +Di sini `filterA` didefinisikan sebagai fungsi yang mengambil tiga argumen. Nilai `message` yang akan dilanjutkan ke argumen pertama. String `'arg1'` yang akan di lanjutkan ke `filterA` sebagian argumen kedua, dan nilai dari ekspresi `arg2` akan dievaluasi dan diteruskan sebagai argumen ketiga.