Catatan belajar Framework frontend JS Vue


Free $20 Linode Cloud hosting Coupon, register at  Free Linode Cloud Hosting

(Coupon $20 available at Linode $.20 Coupon ) 👍🏿

Post ini dimaksudkan sebagai catatan pribadi saya dalam belajar Vue.js, saya catat disini karena saya pelupa dan kadang baru ingat setelah Google justru mengarahkan saya ke Blog saya sendiri saat saya mencari sesuatu, kadang baru ngeuh “oh iya saya pernah belajar ini dulu”.

Untuk catatan lain yang tidak menggunakan build tool buka disini: link

Instalasi (link)

1.Install-cli
npm install –global vue-cli
2.test-vue-cli
vue
3.webpack-init1
vue init webpack my-project
3.webpack-init2
Lanjutan vue init webpack my-project
4.get-in
Hasil dari: vue init webpack my-project
5.NPM-Install
npm install
6.NPM-run
npm run dev
7.The-Website
localhost

 

Setup VIM

8.vim-vue-support1
vim .vimrc
8.vim-vue-support2
au BufReadPost *.vue set syntax=html

Create Simple Hello World

11-Hello-files12.HelloWorlds12.HelloWorldsMainJS13.REsult

Create Simple Component

 

16.Instance-with-component-index2
Browser Output

Event Method pada Component

17.methods-pada-components
Event pada vue component

Data Variables dalam Component

18.compoinent-data
Most of the options that can be passed into the Vue constructor can be used in a component, with one special case: data must be a function.

Computed Variable

17.var-computed

Instead of a computed property, we can define the same function as a method instead. For the end result, the two approaches are indeed exactly the same. However, the difference is that computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed.

Variable Watcher dalam Component

19.compoinent-watcher
Setiap ada perubahan terdeteksi counter akan bertambah

Style Binding / Kondisi pada Pemberian Class

20.style-binding1
active dan text-danger muncul dari kondisi variable setelahnya
 Cara lain yang lebih pendek (output sama dengan diatas)
Opsi lain

21.style-binding3

Pada componen

<hellow v-bind:pesan=”pesan” v-bind:class=”classObject”></hellow>

Hasilnya komponen pembungkus template akan seperti ini

<span class=”active text-danger”> . . .

Condition

  1. v-if
  2. v-else

Loop

  1. v-for array objects
  2. v-for pada fields
  3. v-for dengan index, key dan value

Miscellenous

  1. Filter data
  2. Add new data record
  3. Delete record from data
  4. Sample ToDo
  5. Property “is” dan “href” pada component
  6. Property “is” dan “src” pada component image
  7. Methods and computed

Form Input

  1. Text input
  2. Checkbox input
  3. Radio Picker
  4. Select input
  5. Multiple Select
  6. Select rendered options
  7. Selected rendered options set value

Components

  1. Component for, Bind dan Is
  2. Pass text sebagai html property
  3. Component props camelCase
  4. Bind input text value ke component
  5. Trigger event dengan $emit
  6. Template component membaca data dalam component
  7. Template dengan text/x-template
  8. v-once untuk cache static content

Transition effects

  1. Transition dan Callback
  2. Postponed

Mixin

  1. Simple sample
  2. Mixins Methods
  3. Global Mixins

Custom Directive

Vue.directive

  1. Simple sample, set-focus directive
  2. Directive callbacks/Hook Function
  3. Hook Arguments
  4. Passing Object 

Render Function

  1. Basic Component
  2. x-template
  3. render template and v-for
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s