Nhật ký 100 giờ học Vue.js

Tram Ho

Bài viết được dịch từ

Nguồn tham khảo

Nội dung học bao gồm:

Trình độ yêu cầu trước khi bắt đầu, có hiểu biết về javascipt, jquery. Từng học qua về Reactjs

Cú pháp cơ bản của Vue.js

Các cú pháp cơ bản của Vuejs
##Vue.js instance
Vue.js instance được khởi tạo theo cú pháp dưới đây

app.js được import vào cùng với file vue.js vào file template html

{ { }}

Cú pháp trên dùng để gọi đến thuộc tính của Vue instance

v-bind

Khi muốn gán giá trị động cho thuộc tính của thẻ html

v-one

Được viết bên trong thẻ html, dùng để in ra giá trị cố định(không có khả năng thay đổi, in ra 1 lần lúc load component)

v-html

Dùng khi in giá trị là dạng html

v-on

Đăng ký hàm xử lý sự kiện

v-on:click=“counter++” Có thể viết code js kiểu inline, trong code không chứ if hoặc for
Cũng có thể viết dưới dạng v-on:keyup.enter.space (khi ấn nút enter ??)

v-model

Dùng để bind data vào thẻ html có tham chiếu đến thuộc tính của vue instance

@

Cách viết ngắn gọn của v-on:, @click="link"
Thay vì v-bind: cũng có thể viết :
##:class
Assign thuộc tính class động cho thẻ html

Có thể dùng array để assign nhiều class name

Ngoài ra còn có cách viết

Sử dụng phép toán điều kiện

:style

Assign động style cho phần tử html

Các tên thuộc tính css được viết ở kiểu cameCase

computed

computed là thuộc tính đối tượng của Vuejs instance gần giống với method, tuy nhiên khác với method nó sẽ được dùng khi cần xác định thời điểm thuộc tính trong data được lưu. Một điểm khác nữa là khi gọi đến computed thì không cần dùng ()

Kết quả

  • Khi ấn computed button thì cả 2 hàm printTextComputed và printTextMethod thực thi
  • Khi ấn method button thì chỉ có hàm printTextMethod được thực thi

Lý do

  • methods Không biết lúc nào giá trị sử dụng trong hàm thay đổi, nên nó chạy liên tục để check (Bất kỳ lúc nào có sự kiện gì)
  • computed properties Xác định được giá trị sử dụng trong hàm thay đổi, nên nó không cần thiết phải chạy liên tục (Chỉ những sự kiện liên quan đến xử lý giá trị thuộc tính của data mà nó đang tham chiếu)

Tham khảo thêｍ tại The difference between COMPUTED and METHODS in Vue.js

watch

Là 1 thuộc tính kiểu đối tượng của Vuejs instance, dùng cho việc xác định hành vi khi giá trị của 1 thuộc tính cụ thể thay đổi. Không chỉ thuộc tính của data , thuộc tính của computed cũng có thể được watch

v-if, v-else

Xác định tag html có được DOM render hay không

v-show

Xác định tag html có được hiện thị hay không (display: none;)

v-for

Render các phần tử của mảng

Khi cần index

Có thể dùng cho kiểu đối tượng. Đối số thứ 2 là key, thứ 3 sẽ là index

TODO: giải thích

Vòng đời (Lifecycle)

Vòng đời của 1 vue instance bao gồm các hook sau. Tùy vào mục đích có thể viết thêm xử lý vào thời điểm mong muốn.

  • beforeCreate
  • Created
  • beforeMount
  • mounted
  • (Render DOM)
  • (DOM Changed)
  • beforeUpdate
  • updated
  • ( this.$destroy(); )
  • beforeDestroy
  • Destroyed

Vue component

props

Sử dụng khi tiếp nhận data từ 1 component khác

Component cha -> Component con

Được truyền khá đơn giản từ cha sang con bằng cách sử dụng v-bin:

Component cha nhận thông qua props

Dữ liệu nhận đươc qua props ở component con có thể thao tác như đối tượng data

Component con -> Component cha

Để truyền dữ liệu từ con sang cha thì có 2 cách chính dưới đây
###1. $emit
Truyền sự thay đổi của props của con sang cha thông qua $emit function
$emit : Đối số thứ nhất là event name, đối số thứ 2 là event data

Tại cha lắng nghe sự kiện phát ra bằng @ , và xử lý tương ứng.

2. Callback

Truyền hàm xử lý từ cha sang con thông qua thuộc tính props

TODO continue

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo