Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Routing #64

Merged
merged 6 commits into from
Mar 8, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/v2/cookbook/serverless-blog.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 2 additions & 0 deletions src/v2/guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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!
Expand Down
2 changes: 1 addition & 1 deletion src/v2/guide/instance.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<p class="tip">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`.</p>
<p class="tip">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`.</p>

## Lifecycle Diagram

Expand Down
14 changes: 7 additions & 7 deletions src/v2/guide/routing.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 bisa melakukannya dengan me-render secara dinamis sebuah komponen yang berperan sebagai halaman seperti berikut :

``` js
const NotFound = { template: '<p>Page not found</p>' }
Expand All @@ -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 melihat bagaimana cara mengimplementasikannya, silakan cek [contoh aplikasi ini](https://github.com/chrisvfritz/vue-2.0-simple-routing-example)

## Integrating 3rd-Party Routers
## Integrasi dengan *Router* 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*.