Giới thiệu sơ lược về Vue.js

September 23, 2019
code

Hiện nay với sự phát triển của các công nghệ trợ giúp Front-end-developer, việc tìm hiểu về 1 vài framework là điều cần thiết. Vì vậy hôm nay mình xin được giới thiệu sơ lược về VueJS 1 framework nổi tiếng hiện nay. Let's start!

Vue.js là gì ?

Như đã đề cập Vue.js là một framework linh động (nguyên bản tiếng Anh: progressive – tiệm tiến) dùng để xây dựng giao diện người dùng (user interfaces).

Cài đặt

Việc cài đặt Vue.js cũng không hề khó khăn

  • Sử dụng CDN: Nhúng link cdn vào trang .html Nhà phát hành khuyến khích trỏ đến một phiên bản cụ thể.

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js"></script>

  • Sử dụng npm: Nhà phát hành khuyên dùng npm khi muốn xây dụng một ứng dụng lớn với Vue

    # latest stable
npm instal vue

  • Sử dụng Vue-cli: Vue.js cung cấp một CLI giúp nhanh chóng khởi tạo nền tảng (scaffolding) cho các ứng dụng một trang. Vue-CLI chuẩn bị sẵn các cài đặt phong phú cho một quy trình front-end hiện đại.

    # cài đặt vue-cli
$ npm install --global vue-cli
# tạo một dự án mới với template "webpack"
$ vue init webpack my-project
# cài đặt các thư viện phụ thuộc và bắt tay vào việc!
$ cd my-project
$ npm run dev

Bắt đầu

Để bắt đầu không có gì dễ hơn với 1 ví dụ Hello world:

  • Tạo một file html

    <script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
</div>

  • Tạo một file js hoặc viết nó trong thẻ <script></script>

    var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello world!'
  }
})

Sau đó bạn có thể run file .html của bạn thân trên trình duyệt để có thể xem kết quả. Sau đó bạn hãy thử thay đổi đoạn chuỗi từ "Hello Vue.js" ang bất kì điều gì bạn có thể nghĩ tới ví như "How are you?". Bạn có thể đổi được bằng việc mở console trong Google development tools và gõ:

app.message = 'ha lo!'

Như trên đó là cách mà Vue.js render (kết xuất) dữ liệu lên DOM theo hướng khai báo (declarative, thay vì hướng mệnh lệnh – imperative) .

Thuộc tính v-bind mà bạn thấy trên đây được gọi là một directive. Một directive trong Vue được bắt đầu với v-để chỉ định rõ rằng đây là một thuộc tính riêng do Vue cung cấp, đồng thời thuộc tính này sẽ áp dụng một hành vi đặc biệt lên kết quả DOM được render ra.

Điều kiện và vòng lặp

Ẩn hoặc hiện một phần tử web với Vue cũng rất dễ dàng: 

<!--html-->
<div id="app-example">
  <span v-if="seen">Thoắt ẩn thoắt hiện</span>
</div>
// js
var appExample = new Vue({
  el: '#app-example',
  data: {
    seen: true
  }
})
Thoắt ẩn thoắt hiện

Bây giờ nếu nhập app3.seen = false vào console, bạn sẽ thấy thông điệp trên đây biến mất.

Ngoài v-bind và v-if chúng ta còn có thêm nhiều directive nữa, với các tính năng đặc biệt khác nhau. Ví dụ, directive v-for có thể được dùng để trình bày một danh sách các item sử dụng dữ liệu từ một mảng:

<div id="app-example">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app-example = new Vue({
  el: '#app-example',
  data: {
    todos: [
      { text: 'Học JavaScript' },
      { text: 'Học Vue' },
      { text: 'Xây dựng cái gì đó hay ho' }
    ]
  }
})
1.Học JavaScript
2.Học Vue
3.Xây dựng cái gì đó hay ho

Bây giờ nếu nhập app4.todos.push({ text: 'Nghỉ ngơi' }), bạn sẽ thấy danh sách có thêm một mục mới.

Xử lí thông tin người dùng

Để người dùng tương tác với ứng dụng, chúng ta có thể dùng directive v-on để đính kèm các event listener (phần tử lắng nghe sự kiện) và gọi các method (phương thức) trên đối tượng Vue.

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hãy sửa thông điệp này'
  }
})

Với ví dụ trên , khi bạn thay đổi text trong ô input , message sẽ bị thay đổi. Vue cũng cung cấp directive v-model giúp cho việc ràng buộc hai chiều (two-way binding) giữa form input và trạng thái ứng dụng trở nên vô cùng dễ dàng.

Component trong Vue

Hệ thống component (phần tử cấu thành) là một khái niệm quan trọng trong Vue, vì nó cho phép chúng ta xây dựng những ứng dụng quy mô lớn được tạo thành từ những phần tử nhỏ, độc lập, và thường là tái sử dụng được.

Vue component

Một component trong Vue về bản chất là một đối tượng Vue với các tùy chọn cho trước. Đăng kí một component trong Vue rất đơn giản:

// Định nghĩa một component todo-item
Vue.component('todo-item', {
  template: '<li>Đây là một đề mục todo</li>'
})

Giờ thì bạn có thể sử dụng component todo-item trong template của các component khác:

<ol>
  <!-- Tạo một đối tượng của component todo-item -->
  <todo-item></todo-item>
</ol>

Chúng ta có thể truyền dữ liệu từ scope (phạm vi) cha vào các component con bằng cách sử dụng một prop:

Vue.component('todo-item', {
  // Ở đây chúng ta khai báo cho component todo-item 
  // nhận một "prop" (có thể hiểu là một thuộc tính tùy biến) 
  // có tên là "todo".
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

Bây giờ chúng ta có thể truyền todo vào mỗi component bằng cách sử dụng v-bind:

<div id="app-7">
  <p>Những thứ họ mua:</p>
  <ol>
    <!--
      Ở đây chúng ta cung cấp một object "todo" cho mỗi component
      "todo-item". Bằng cách này nội dung của từng component trở nên động.
      Mỗi component cũng sẽ nhận một thuộc tính "key". Chúng ta sẽ
      nói thêm về thuộc tính này sau.
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Cà pháo' },
      { id: 1, text: 'Mắm tôm' },
      { id: 2, text: 'Miễn ăn được là được' }
    ]
  }
})
Những thứ họ cần mua
1.Cà pháo
2.Mắm tôm
3.Miễn ăn được là được

Kết Luận

Trên đây chúng ta đã lược qua những tính năng cơ bản nhất của Vue.js. Phần còn lại của bản hướng dẫn sẽ đi sâu vào những tính năng này, đồng thời đề cập một cách chi tiết đến những tính năng cao cấp hơn trong các bài viết sau. Cám ơn các bạn đã theo dõi !

Tài liệu tham khảo

Back to Blog