1. Hãy dành vài giây Đăng nhập hoặc Đăng ký tài khoản để truy cập và sử dụng TBit hiệu quả nhất.
    Ẩn thông báo
  2. Bạn hãy like trang Facebook của TBit để nhận được tin tức công nghệ nhanh nhất từ chúng tôi.
    Ẩn thông báo

VueJS Bài 1: Tổng quát về Vue.js

Thảo luận trong 'JavaScript' bắt đầu bởi Phạm Đạt, 4/7/18.

0/5, 0 phiếu

    1. Phạm Đạt TBit-Mod

      Sau bài viết giới thiệu về Vue.js hôm qua thì hôm nay chúng ta sẽ đi bài đầu tiên về nó nhé! Trước khi tìm hiểu chuyên sâu về VueJS thì mình muốn các bạn có một cái nhìn tổng quát về vue.js trước đã.

      [​IMG]

      Progressive Framework
      Khi nói về các Javascript framework, chúng ta thường cho rằng các framework cần cung cấp mọi thứ ta cần để xây dựng một SPA hoàn thiện (gọi là Full framework). Tuy nhiên, một framework được thiết kế theo cách đó sẽ dẫn đến các framework cũng cung cấp quá mức cần thiết trong các trường hợp sự dụng tương đối đơn giản của chúng ta. Mà Progressive Framework là cái gì nhỉ?

      Progressive framework là khái niệm khá mới, có thể hiểu thay vì như Full-featured framework hay Monolithic framework cung cấp tất cả mọi thứ cần có để xây dựng app trong một framework duy nhất, thì progresive framework lại chia thành các thành phần nhỏ khác nhau, và ta có thể dần dần lựa chọn các thành phần tham gia vào sao cho phù hợp. Vue.js là một trong số các progressive framework. Phần lõi của Vue.js tập chung chủ yếu vào phần View. Chúng ta có thể sử dụng mỗi lõi của Vue để tạo view hoặc CÓ THỂ cài THÊM các thành phần như vuex để quản lý state trong app hay vue-router cho SPA routing... hoặc là không dùng thêm.
      Phần lõi có thể hoạt động tốt một mình và có thể chạy mượt mà khi ghép thêm các thành khác lại với nhau. Đó cũng chính là một trong những đặc điểm của progressive framework.Việc tập trung vào các khái niệm như Progressive framework, Full-featured framework hay Monolithic framework thì có lẽ mình sẽ phải hẹn các bạn ở một bài khác để nói về chúng.

      Rendering
      Lõi của Vue.js là một hệ thống cho phép chúng ta render dữ liệu đến DOM bằng cú pháp template rõ ràng, đơn giản:
      Mã (Text):
      1. <div id="app">
      2. {{ message }}
      3. </div>
      Mã (Text):
      1. // Javascript:
      2. var app = new Vue({
      3. el: '#app',
      4. data: {
      5. message: 'Hello world!'
      6. }
      7. });
      Nhìn qua ta thấy đơn thuần chỉ là hiển thị một string "Hello world!" kinh điển nhưng đằng sau những câu lệnh đơn giản trên Vue còn làm nhiều hơn thế! Dữ liệu và DOM đã được liên kết với nhau. Không tin bạn hãy mở console lên và sửa app.message = "Hello https://www.tbit.vn". Bạn sẽ thấy chuỗi được render cũng sẽ bị thay đổi theo thành "Hello https://www.tbit.vn". Vue.js cũng sử dụng Virtual DOM, thông qua các event như click, hover... Virtual DOM sẽ tính toán các phần bị thay đổi rồi chỉ render lại các phần bị thay đổi đó. mà thôi. Ngoài việc chèn text bằng cú pháp như trên, chúng ta còn có thể bind qua attribute của element như ví dụ dưới đây:

      Mã (Text):
      1. <div id="app-2">
      2. <span v-bind:title="message">
      3. Loading >>>
      4. </span>
      5. </div>
      Mã (Text):
      1. var app2 = new Vue({
      2. el: '#app-2',
      3. data: {
      4. message: 'You loaded this page on ' + new Date()
      5. }
      6. });
      Đến đây chúng ta gặp một thứ rất mới mẻ, v-bind attribute (thuộc tính). Thuộc tính này được gọi là directive, các directive trong Vue đều có tiền tố là v-. Với v-bind, trong Vue còn có shortcut thay thế đó là :. Tức là thay vì dùng v-bind:title ta có thể dùng :title thì cũng sẽ cho ra kết quả tương tự.

      Rẽ nhánh và vòng lặp

      Rẽ nhánh: v-if, v-else, v-else-if
      Một cách đơn giản để ẩn hiện một element thông qua việc rẽ nhánh: if-else trong vue, ví dụ:

      Mã (Text):
      1. <div id="app-3">
      2. <p v-if="seen">Now you see me</p>
      3. <p v-else>Where are you?</p>
      4. </div>
      Mã (Text):
      1. var app3 = new Vue({
      2. el: '#app-3',
      3. data: {
      4. seen: true
      5. }
      6. });
      Ta thấy chuỗi "Where are you" sẽ hiện ra. Khi thay đổi giá trị của app.seen = false hoặc là app.seen = true qua console thì chúng ta sẽ thấy chuỗi "Now you see me" sẽ ẩn hoặc là hiện thông qua directive v-if và v-else. Directive v-if sẽ hiển thị element nếu thõa màn điều kiện seen hoặc nếu không sẽ hiển thị element có v-else. Và v-else-if tương đương mệnh đề "Nếu không thì". Directive này không có shorcut như v-bind được đề cập ở trên.

      Vòng lặp - v-for
      Ta có thể duyệt một mảng todos thông qua directive v-for, tại mỗi lần duyệt, ta lấy được một phần tử todo trong mảng:

      Mã (Text):
      1. <div id="app-4">
      2. <ol>
      3. <li v-for="todo in todos">
      4. {{ todo.text }}
      5. </li>
      6. </ol>
      7. </div>
      Mã (Text):
      1. var app4 = new Vue({
      2. el: '#app-4',
      3. data: {
      4. todos: [
      5. { text: 'Learn JavaScript' },
      6. { text: 'Learn Vue' },
      7. { text: 'Build something awesome' }
      8. ]
      9. }
      10. })
      Xử lý input của người dùng
      Để người dùng tương tác với app, chúng ta sử dụng directive v-on để bắt các event listener vào DOM, các listener này sẽ gọi các method trong đối tượng Vue của chúng ta.

      Mã (Text):
      1. <div id="app-5">
      2. <p>{{ message }}</p>
      3. <button v-on:click="reverseMessage">Reverse Message</button>
      4. </div>
      Mã (Text):
      1. var app5 = new Vue({
      2. el: '#app-5',
      3. data: {
      4. message: 'Hello Vue.js!'
      5. },
      6. methods: {
      7. reverseMessage: function () {
      8. this.message = this.message.split('').reverse().join('')
      9. }
      10. }
      11. })
      Kết quả của ví dụ trên là ta có được một button, khi click vào button chuỗi Hello Vue.js sẽ bị đảo ngược bởi thông qua v-on, ứng dụng đã gọi method reverseMessage trong methods. Hàm này thực hiện xử lý dữ liệu message và lưu lại. Khi biến message bị thay đổi, DOM tự thay đổi lại hiển thị message bằng giá trị mới. Tưởng tự, ta có thể đặt thêm nhiều method xử lý dữ liệu khác vào trong methods khi khởi tạo instance của Vue.

      Mở rộng và tái xử lý các component
      Một phần cuối cùng và khá quan trọng trong bài viết này, đó chính là hệ thống components trong Vue. Bởi vì nó là một phép trừu tượng cho phép chúng ta xây dựng các ứng dụng lớn bằng cách kế hợp các component nhỏ, khép kín và khả năng sử dụng lại cao. Chúng ta viết một component và sử dụng lại chúng trong template của một component khác. Để đăng ký mới một component:

      Mã (Text):
      1. // Define a new component called todo-item:
      2. Vue.component('todo-item', {
      3. template: '<li>This is a todo</li>'
      4. });
      5. // Or
      6. Vue.component('todo-item', require("./path/to/components/TodoItem.vue"));
      Tổng kết
      Vue.js là một công nghệ mới, một Progressive framework nhỏ nhẹ, 18kb min+gzip, kết hợp với việc sử dụng Virtual DOM chỉ render lại các thành phần mà có sự thay đổi giúp tăng hiệu suất của Vue. Thêm vào là cú pháp template rõ ràng, đơn giản, dễ tiếp cận. Một hệ thống component cho phép tái sử dụng ở các template khác nhau. Tất nhiên, framework nào cũng có nhược điểm của nó nhưng cá nhân mình thấy với các điểm trên thì Vue.js là một sự lựa chọn không tồi với một công nghệ mới nên được áp dụng.

      *Tài liệu tham khảo: https://vuejs.org
       
      Chỉnh sửa cuối: 7/7/18
      Admin thích bài này.
      Đang tải...

Chia sẻ trang này

Đang tải...