Skip to content

Commit 5a16c31

Browse files
aldozulhaqaldozulhaq
authored
Add files via upload
1 parent 61fbe62 commit 5a16c31

File tree

2 files changed

+125
-125
lines changed

2 files changed

+125
-125
lines changed

‎src/_posts/011-component.md

Lines changed: 61 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,61 @@
1-
---
2-
title: 0.11 Component Tips
3-
date: 2014-12-08 15:02:14
4-
tags:
5-
---
6-
7-
<p class="tip">Note: this post contains information for the outdated 0.11 version. Please refer to the [0.12 release notes](https://github.com/yyx990803/vue/releases) for the changes in the API.</p>
8-
9-
The release of 0.11 introduced [many changes](https://github.com/yyx990803/vue/blob/master/changes.md), but the most important one is how the new component scope works. Previously in 0.10.x, components have inherited scope by default. That means in a child component template you can reference parent scope properties. This often leads to tightly-coupled components, where a child component assumes knowledge of what properties are present in the parent scope. It is also possible to accidentally refer to a parent scope property in a child component.
10-
11-
<!-- more -->
12-
13-
### Isolated Scope and Data Passing
14-
15-
Starting in 0.11, all child components have isolated scope by default, and the recommended way to control component data access is via [Explicit Data Passing](/guide/components.html#Explicit_Data_Passing) using [`v-with`](/api/directives.html#v-with) or [`paramAttributes`](/api/options.html#paramAttributes).
16-
17-
`paramAttributes` enables us to write Web Component style templates:
18-
19-
``` js
20-
Vue.component('my-component', {
21-
paramAttributes: ['params'],
22-
compiled: function () {
23-
console.log(this.params) // passed from parent
24-
}
25-
})
26-
```
27-
28-
``` html
29-
<my-component params="{{params}}"></my-component>
30-
```
31-
32-
### Where Does It Belong?
33-
34-
Previously in 0.10, all directives on a component's container element are compiled in the child component's scope. Because it inherited parent scope, this worked in most situations. Starting in 0.11.1, we want to provide a cleaner separation between component scopes. The rule of thumbs is: if something appears in the parent template, it will be compiled in parent scope; if it appears in child template, it will be compiled in child scope. For example:
35-
36-
``` html
37-
<!-- parent template -->
38-
<div v-component="child" v-on="click:onParentClick">
39-
<p>{{parentMessage}}</p>
40-
</div>
41-
```
42-
43-
``` html
44-
<!-- child template, with replace: true -->
45-
<div v-on="click:onChildClick">
46-
<h1>{{childMessage}}</h1>
47-
<content></content>
48-
</div>
49-
```
50-
51-
Everything in the parent template will be compiled in the parent's scope, including the content that's going to be inserted into the child component.
52-
53-
The only exception to the rule is `v-with` (and `paramAttributes` which compiles down to `v-with`), which works in both places - so you don't need to worry about it too much.
54-
55-
### Cleaner Event Communication
56-
57-
Previously the standard way for a child component to communicate to its parent is via dispatching events. However, with this approach, the event listeners on the parent component are not guaranteed to be listening on the desired child component only. It's also possible to trigger undesired listeners further up the chain if we do not cancel the event.
58-
59-
The most common use case is for a parent to react to the events from a specific, direct child component. So in 0.11.4, [a new directive `v-events`](/api/directives.html#v-events) has been introduced to enable exactly this behavior.
60-
61-
0.11.4 has already been released, go try it out!
1+
---
2+
title: 0.11 Component Tips
3+
date: 2014-12-08 15:02:14
4+
tags:
5+
---
6+
7+
<p class="tip">Note: post ini berisi informasi untuk versi lama 0.11. Silahkan lihat [0.12 release notes](https://github.com/yyx990803/vue/releases) untuk melihat perubahan pada API.</p>
8+
9+
Perilisan dari 0.11 memperkenalkan [banyak perubahan](https://github.com/yyx990803/vue/blob/master/changes.md), tapi yang paling penting adalah bagaimana cara ruang lingkup komponen baru bekerja. Sebelumnya di 0.10.x, komponen mempunyai ruang linkup yang diwariskan sebagai settingan awal. Itu berarti di sebuah template child komponen kalian bisa menghubungkan properti ruang lingkup parent. Ini biasanya berakhir pada komponen dengan hubungan erat, dimana child komponen mengira-ngira pengetahuan dari properti apa yang ada di ruang lingkup parent. Ada juga kemungkinan untuk properti ruang lingkup parent tidak sengaja merujuk di komponen child.
10+
11+
<!-- lebih banyak -->
12+
13+
### Isolasi Ruang Lingkup dan Pengiriman Data
14+
15+
Dimulai di 0.11, semua komponen child punya ruang lingkup terisolasi sebagai settingan awal, dan cara yang disarankan untuk mengendalikan kompenen akses data adalah lewat [Pengiriman Data Jelas](/guide/components.html#Explicit_Data_Passing) menggunakan [`v-with`](/api/directives.html#v-with) atau [`paramAttributes`](/api/options.html#paramAttributes).
16+
17+
`paramAttributes` memperbolehkan kita untuk menulis template komponen tampilan web:
18+
19+
``` js
20+
Vue.component('my-component', {
21+
paramAttributes: ['params'],
22+
compiled: function () {
23+
console.log(this.params) // diwariskan dari parent
24+
}
25+
})
26+
```
27+
28+
``` html
29+
<my-component params="{{params}}"></my-component>
30+
```
31+
32+
### Darimana Asalnya?
33+
34+
Sebelumnya di 0.10, semua arahan pada elemen wadah komponen dikompilasi di komponen ruang lingkup child. Karena mewariskan ruang lingkup parent, hal ini sering bekerja di beberapa situasi. Dimulai di 0.11.1, kita ingin menyediakan pemisahan yang lebih rapi antara komponen ruang lingkup. Peraturan thumbs adalah: jika sesuatu muncul di template parent, itu akan dikompilasi di ruang lingkup parent; jika itu muncul di template child, itu akan dikompilasi di ruang lingkup child. Sebagai contoh:
35+
36+
``` html
37+
<!-- template parent -->
38+
<div v-component="child" v-on="click:onParentClick">
39+
<p>{{Pesanparent}}</p>
40+
</div>
41+
```
42+
43+
``` html
44+
<!-- template child, dengan pergantian: true -->
45+
<div v-on="click:onChildClick">
46+
<h1>{{Pesanchild}}</h1>
47+
<content></content>
48+
</div>
49+
```
50+
51+
Segala hal yang ada di template parent akan dikompilasi di ruang lingkup parent, termasuk konten yang akan dimasukkan ke dalam komponen child.
52+
53+
Satu-satunya pengecualian pada peraturannya adalah `v-with` (dan `paramAttributes` yang dikompilasi menjadi `v-with`), dimana bekerja di kedua tempat - jadi kalian tidak perlu terlalu mencemaskannya.
54+
55+
### Komunikasi Event yang Lebih Rapi
56+
57+
Sebelumnya cara standar untuk sebuah komponen child untuk berkomunikasi dengan parent adalah lewat event pelepasan. Namun, dengan cara ini, pendengar event di komponen parent tidak terjamin untuk hanya mendengarkan komponen child yang diinginkan. Dan juga berkemungkinan untuk memicu pendengar yang tidak diinginkan masuk lebih dalam jika kita tidak membatalkan the event.
58+
59+
Kasus penggunaan yang paling umum adalah untuk parent bereaksi ke events dari sebuah spesifik, komponen child langsung. Jadi di 0.11.4, [arahan baru `v-events`](/api/directives.html#v-events) telah diperkenalkan untuk mengaktifkan perilaku ini.
60+
61+
0.11.4 sudah rilis, cobalah!

‎src/_posts/1.0.0-release.md

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,64 @@
1-
---
2-
title: Vue.js 1.0.0 Released
3-
date: 2015-10-26 10:00:00
4-
---
5-
6-
> Hi HN! If you are not familiar with Vue.js, you might want to read this [blog post](http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/) for a higher level overview.
7-
8-
After 300+ commits, 8 alphas, 4 betas and 2 release candidates, today I am very proud to announce the release of [Vue.js 1.0.0 Evangelion](https://github.com/vuejs/vue/releases/tag/1.0.0)! Many thanks to all those who participated in the API re-design process - it would not have been possible without all the input from the community.
9-
10-
<!-- more -->
11-
12-
### Improved Template Syntax
13-
14-
The 1.0 template syntax resolves a lot of subtle consistency issues and makes Vue templates more concise and more readable in general. The most notable new feature is the shorthand syntax for `v-on` and `v-bind`:
15-
16-
``` html
17-
<!-- short for v-bind:href -->
18-
<a :href="someURL"></a>
19-
20-
<!-- short for v-on:click -->
21-
<button @click="onClick"></button>
22-
```
23-
24-
When used on a child component, `v-on` listens for custom events and `v-bind` can be used to bind props. The shorthands using child components very succinct:
25-
26-
``` html
27-
<item-list
28-
:items="items"
29-
@ready="onItemsReady"
30-
@update="onItemsUpdate">
31-
</item-list>
32-
```
33-
34-
### API Cleanup
35-
36-
The overall goal for Vue.js 1.0 is to make it suitable for larger projects. This is why there are many API deprecations. Except for ones that are barely used, the most common reason for a deprecation is that the feature leads to patterns that damages maintainability. Specifically, we are deprecating features that make it hard to maintain and refactor a component in isolation without affecting the rest of the project.
37-
38-
For example, the default asset resolution in 0.12 has implicit fallbacks to parents in the component tree. This makes the assets available to a component non-deterministic and subject how it is used at runtime. In 1.0, all assets are now resolved in strict mode and there are no longer implicit fallbacks to parent. The `inherit` option is also removed, because it too often leads to tightly coupled components that are hard to refactor.
39-
40-
### Faster Initial Rendering
41-
42-
1.0 replaces the old `v-repeat` directive with `v-for`. In addition to providing the same functionality and more intuitive scoping, `v-for` provides up to **100%** initial render performance boost when rendering large lists and tables!
43-
44-
### More Powerful Tooling
45-
46-
There are also exciting things going on outside of Vue.js core - [vue-loader](https://github.com/vuejs/vue-loader) and [vueify](https://github.com/vuejs/vueify) have received major upgrades including:
47-
48-
- Hot component reloading. When a `*.vue` component is edited, all of its active instances are hot swapped without reloading the page. This means when making small changes, e.g. tweaking the styles or the template, your app doesn't need to fully reload; the state of the app the swapped component can be preserved, drastically improving the development experience.
49-
50-
- Scoped CSS. By simply adding a `scoped` attribute to your `*.vue` component style tags, the component's template and final generated CSS are magically re-written to ensure a component's styles are only applied to its own elements. Most importantly, the styles specified in a parent component **does not** leak down to child components nested within it.
51-
52-
- ES2015 by default. JavaScript is evolving. You can write much cleaner and expressive code using the latest syntax. `vue-loader` and `vueify` now transpiles the JavaScript in your `*.vue` components out of the box, without the need for extra setup. Write future JavaScript today!
53-
54-
Combined with [vue-router](https://github.com/vuejs/vue-router), Vue.js is now more than a library - it provides a solid foundation for building complex SPAs.
55-
56-
### What's Next?
57-
58-
As what 1.0.0 usually suggests, the core API will stay stable for the foreseeable future and the library is ready for production use. Future development will focus on:
59-
60-
1. Improving `vue-router` and make it production ready.
61-
62-
2. Streamlining the developer experience, e.g. a better devtool and a CLI for scaffolding Vue.js projects and components.
63-
64-
3. Providing more learning resources such as tutorials and examples.
1+
---
2+
title: Vue.js 1.0.0 Released
3+
date: 2015-10-26 10:00:00
4+
---
5+
6+
> Hi HN! Jika kau tidak terbiasa dengan Vue.js, kau mungkin ingin untuk membaca [post blog](http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/) untuk tingkatreview yang lebih tinggi.
7+
8+
Setelah 300+ commits, 8 alphas, 4 betas dan 2 kandidat perilisan, hari ini saya sangat bangga untuk mengumumkan perilisan dari [Vue.js 1.0.0 Evangelion](https://github.com/vuejs/vue/releases/tag/1.0.0)! Banyak terima kasih untuk semua yang berpatisipasi pada proses design ulang API - hal ini tidak akan mungkin terjadi tanpa semua input dari komunitas.
9+
10+
<!-- lebih banyak -->
11+
12+
### Template Syntax yang Lebih Baik
13+
14+
Template syntax 1.0 memperbaiki banyak isu konsistensi dan membuat template Vue lebih concise dan lebih dapat dibaca pada umumnya. Fitur baru yang paling terlihat adalah syntax singkatan untuk `v-on` dan `v-bind`:
15+
16+
``` html
17+
<!-- singkatan untuk v-bind:href -->
18+
<a :href="someURL"></a>
19+
20+
<!-- singkatan untuk v-on:click -->
21+
<button @click="onClick"></button>
22+
```
23+
24+
Saat digunakan pada komponen child, `v-on` mendengar untuk event buatan sendiri dan `v-bind` dapat digunakan untuk mengikat properti. Penggunaan singkatan pada komponen child sangatlah ketat:
25+
26+
``` html
27+
<item-list
28+
:items="items"
29+
@ready="onItemsReady"
30+
@update="onItemsUpdate">
31+
</item-list>
32+
```
33+
34+
### Pembersihan API
35+
36+
Tujuan keseluruhan dari Vue.js 1.0 adalah untuk membuatnya cocok dengan projek yang lebih besar. Karena itulah banyak pembatalan API. Kecuali untuk API yang jarang digunakan, Alasan paling umum untuk pembatalan API adalah fitur-fiturnya yang menuntun ke pola kerusakan pada proses pemeliharaan. Khususnya, kita membatalkan fitur yang membuat API susah untuk di pelihara dan refactor sebuah komponen isolasi tanpa mempengaruhi isi lain dari proyeknya.
37+
38+
Sebagai contohnya, Resolusi kegunaan awal pada 0.12 mempunyai reaksi negatif ke parent pada pohon komponen. Hal ini membuat aset-aset dapat digunakan pada komponen yang bersifat tidak deterministik dan bagaimana subjek digunakan saat runtime. Di 1.0, semua aset sekarang diselesaikan pada mode ketat dan sudah tidak ada lagi reaksi negatif ke parent. Opsi `inherit` juga dihapus, karena sering menuntun ke komponen yang berhubungan erat yang susah untuk di refactor.
39+
40+
### Render Awal Lebih Cepat
41+
42+
1.0 mengganti `v-repeat` lama searah dengan `v-for`. Sebagai bonus untuk menyediakan fungsi yang sama dan ruang lingkup yang lebih intuitif, `v-for` menyediakan sampai dengan **100%** peningkatan performa render awal saat merender daftar yang besar dan tabel!
43+
44+
### Alat yang Lebih Kuat
45+
46+
Ada juga hal-hal menarik yang terjadi di luar Vue.js core - [vue-loader](https://github.com/vuejs/vue-loader) dan [vueify](https://github.com/vuejs/vueify) telah menerima peningkatan utama yang termasuk:
47+
48+
- Memuat ulang komponen panas. Disaat komponen `*.vue` diedit, semua instansi aktif yang panas bertukar tanpa memuat ulang halaman. Hal ini berarti saat membuat perubahan kecil, atau mengutak-atik style atau template, aplikasimu tidak perlu sepenuhnya dimuat ulang; keadaan komponen aplikasi yang ditukar dapat dipertahankan, meningkatkan pengalaman pengembangan secara drastis.
49+
50+
- Ruang lingkup CSS. Cukup dengan menambahkan sifat `scoped` ke tag komponen style`*.vue`mu, komponen template dan hasil akhir CSS secara ajaib ditulis ulang untuk memastikan komponen style hanya di terapkan di elemennya sendiri. Yang paling penting, style khusus di komponen parent **tidak** turun ke komponen child yang nested di dalamnya.
51+
52+
- ES2015 secara settingan awal. JavaScript sedang berevolusi. Kau bisa menulis kode yang lebih rapi dan ekspresif menggunakan syntax terbaru. `vue-loader` dan `vueify` sekarang mentranspile JavaScript di `*.vue` mu, komponen di luar kotak, tanpa dibutuhkannya pengaturan ekstra. Tulislah masa depan JavaScript hari ini!
53+
54+
Digabung dengan [vue-router](https://github.com/vuejs/vue-router), Vue.js sekarang lebih dari sekadar library - ia menyediakan pondasi kuat untuk membangun SPAs rumit.
55+
56+
### Apa Selanjutnya?
57+
58+
Seperti 1.0.0 biasanya menyarankan, inti API akan tetap stabil untuk masa-masa mendatang dan librarynya telah siap untuk penggunaan produksi. Perkembangan kedepan akan fokus pada:
59+
60+
1. Mengembangkan `vue-router` dan membuatnya siap produksi.
61+
62+
2. Memperlancar pengalaman developer, misalnya alat pengembangan yang lebih baik dan CLI untuk Perancangan projek dan komponen Vue.js.
63+
64+
3. Menyediakan lebih banyak sumber pembelajaran seperti tutorial dan contoh-contoh.

0 commit comments

Comments
 (0)