Bí quyết học Vue.js trong vòng 1 giờ

Vue.js là một javascript framework được sử dụng để xây dựng User Interface và được nhắc đến rất nhiều trong thời gian gần đây. Đại đa số những người tiếp cận nó đều đánh giá rằng Vue đơn giản và dễ học. Tuy nhiên theo ý kiến chủ quan của mình thì mình thấy cũng đúng là như vậy (yaoming). Ấy là thế nhưng với những người chưa từng sử dụng một javascript framework nào bao giờ thì làm sao để họ sử dụng nó một cách thành thục trong thời gian ngắn nhất? Trong bài viết này, mình sẽ chia sẻ tới các bạn cách mà mình có tiếp cận Vue một cách nhanh nhất chỉ trong vòng 1 giờ.

Cài đặt Vue

Đầu tiên, bạn cần biết cách khởi tao một instance cho Vue. Và để khởi tạo đươc bạn phải cài đặt nó, thông qua rất nhiều cách khác nhau nhưng phổ biến nhất là:

• CDN Giống như sử dụng jQuery, đây là cách đơn giản nhất, chúng ta chỉ cần chèn Vue vào trong ứng dụng thông qua một đường link CDN hoặc là download file vue.js về rồi chèn Vue tương tự như CDN. Theo mình chúng ta nên sử dụng CDN để luôn dùng bản mới nhất của Vue. Download Vue.js (Debug mode) và Vue.js (Production mode).

# Đây là CDN link tới phiên bản mới nhất được publish cho NPM:
<script src="https://unpkg.com/vue"></script>
# Hoặc
<script src="https://link_to_your_downloaded_javascript_file.js"></script>

• NPM/Bower Đây là cách phổ biến được dùng, chúng ta sử dụng NPM hoặc Bowser để quản lý các gói javascript đã được dùng. Biên dịch javascript sử dụng cú pháp ES6, ES8 và làm nhiều thứ thú vị hơn. Nếu chưa biết về NPM bạn có thể tìm hiểu thêm tại đây. Bower sẽ tương tự như NPM, sau khi cài đặt Bower hoặc NPM hãy thực hiện cài Vue:

# NPM
npm install vue
# Bower
bower install vue

• CLI Với cách này bạn cần biết NPM là cái gì rồi.

# Cài vue-cli
$ npm install --global vue-cli
# Tạo một project sử dụng "webpack" template.
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev

Nếu bạn chưa biết gì về NPM/Bower hãy dùng cách đầu tiên để cài đặt vue qua CDN và học Vue một cách nhanh hơn nhé!

Khởi tạo Vue

Sau khi bạn đã cài đặt vue, hãy khởi tạo một Vue instance và bắt tay vào thực hiện những điều kỳ diệu nào!

var vm = new Vue({
  // options
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch is an instance method
vm.$watch('a', function (newVal, oldVal) {
  // this callback will be called when `vm.a` changes
})

# Or
var data = { a: 1, b: 2 }
var vm = new Vue({
  // options
  el: '#example',
  data: data
})

Có 2 options cơ bản nhất cần nắm được là el và data. el để chỉ cung cấp cho Vue 1 DOM element đã có. Một Vue instance sẽ gắn kết (mount) với một DOM element đã có. Data là dữ liệu khởi tạo cho vue instance đó. Như ví du, mình khởi tạo một instance, được mount và DOM element (Hay thẻ html) có id là "example". Bản thân instance chứa dữ liệu của riêng nó và được lưu trong option data là một Javascript Object có giá trị là {a: 1, b: 2}. Mình có thể sử dụng data tính toán a + b, a - b... hay làm nhiều thứ khác. Mỗi instance sẽ có được định nghĩa các phương thức để xử lý logic cho ứng dụng dựa trên data mà nó có. Khi data thay đổi, tức là logic thay đổi, và view sẽ phải thay đổi theo tương ứng. Đây cũng chính là tính reactive của Vue.

Instance Lifecycle Hooks

Một instance sẽ có một vòng đời của nó, được thể hiện trong code thông qua các method mà Vue đã quy định. Giống như trong Android, React... Mỗi một method ấy sẽ được gọi vào một thời điểm tương ứng. Như sơ đồ dưới đây: Việc gọi các method này khi nào là việc của vue, việc của ta là chỉ ra cho vue rằng các method ấy sẽ làm gì. Và bạn sẽ phải thuộc dần dần các tên các method ấy.

• beforeCreate: Được gọi sau khi thực hiện lệnh new Vue(...)
• created: Sau khi gọi beforeCreated và thực hiện khởi tạo môt số thứ khác như Events, data.
• beforeMount: Sau khi compile template và tạo DOM ảo lưu tại vm.$el. Vue sẽ thay DOM elêment el bằng vm.el. Giao điện mà vue instance định nghĩa đã được render ra.
• mounted: Sau khi beforeMount được thực hiện. Điều quan trọng cần nhớ tại mounted là method này chỉ được gọi duy nhất 1 lần mà thôi.
• Một số method khác tại đây.

# Html
<!---... --->
<body>
  <div id="#app">
    We make the Root Vue instance will be mount in #app. 
  </div>
</body>
<!---... --->
...
# Javascript:
var vm = new Vue({
  el: '#app'
  data: {
    a: 1,
    b: 2
  },
  mounted: function () {
    // `this` points to the vm instance
    alert("a + b = " + this.a + this.b)
  }
})

Props và data

Sau khi nắm được các điều trên, bạn cần biết sử dụng props và thực hành sử dụng data và các method lifecycle ở trên để hiểu rõ về các sử dụng của các method này. Những điểm khác biệt nào giữa các method trên. Từ đó, bạn sẽ dễ dàng hơn rất nhiều trong việc sử dụng Vue một cách thành thạo. Props ở đây chính là Propperty, có thể là dữ liêu, có thể là function mỗi instance cha truyền xuống cho instance ở cấp con. Khác với data những dữ liệu của riêng nó mà nó trong khi Props là những gì mà bố mẹ của thằng instance này để lại cho. Do nó của bố mẹ nó truyền xuống, nó chỉ có thể đọc để sử dụng chứ ko sửa, thay đổi giá trị trực tiếp được. Còn với data, một instance có thể thay đổi giá trị tùy ý nó. Trong ứng dụng, props sẽ có hình thù như sau:

Vue.component('my-component',
  data: {
    numberA: 1
  },
  // Khai báo sử dụng props:
  props: [ 'numberB' ],
  // Hoặc chi tiết hơn chút với cách 2:
  // props: {
  //   numberB: {
  //    type: Number, // Props có tên là "numberB"
  //    default: 0 // Đặt giá trị mặc định của numberB là 0
  //   }
  // },
  mounted: function () {
    // `this` points to the vm instance
    alert("a + b = " + this.numberA + this.numberB)
  }
})

var vm = new Vue({ el: '#app' })

// Lúc này, sử dụng props trong view:
<div id="app">
    <my-component :number-b="2"></my-component>
</div>

Một điều chú ý là ta ko cần phải lo lắng về việc đặt tên props lúc khai báo là: "numberB" nhưng khi dùng trong view lại là "number-b". Vue tự biết cách để nhận biết và chuyển đổi cho chúng ta. Tức là chúng ta hay ghi nhớ nhanh cách dùng props, cách set giá trị mặc định.

Component và template syntax

Một cách nhanh nhất để học syntax từ view mà mình làm là học thông qua việc thực hành ngay. Thực hành giúp mình thêm một lần ghi nhớ nữa và nó giúp mình tăng tốc nhanh hơn khi học Vue. Bạn cần ghi nhớ các syntax cơ bản của template trong vue gồm:

• Cấu trúc của một component. Gồm 2 phần:
  • Template: Đây là thành phần view trong vue.
  • Code javascript: Chính là những đoạn code js ở phía trên
• Các cú pháp sử dụng trong template:
  • Rẽ nhánh với if...then..else.
  • Vòng lặp với for.
  • Cách sử dụng một component trong một component khác.

Nếu bạn thấy nội dung này bổ ích, hãy mời tôi một tách cà phê nha! https://kimyvgy.webee.asia