Ra mắt hai series mới cực hot Trí tuệ nhân tạo A đến ZPython công cụ không thể thiếu khi nghiên cứu Data science, Machine learning.

Vue.js cấu trúc điều kiện, lặp và quản lý sự kiện

Trong bài viết trước Vue.js là gì các bạn đã được làm quen với Vue.js và các khái niệm cơ bản như view, model, view-model. Vue.js là framework giúp xây dựng các ứng dụng web sử dụng kiến trúc MVVM (Model-View-ViewModel)

Mô hình MVVM

Trong bài viết hôm nay chúng ta sẽ tìm hiểu thêm các kiến thức khác như chỉ thị (directive), các chỉ thị có điều kiện, chỉ thị lặp... Chúng ta cùng xem ví dụ sau:

Chỉ thị trong Vue.js

Chúng ta tạo một model như sau:

var myFrameworks = {
  frameworks: [
    { name: "CodeIgniter", vote: 40 },
    { name: "Laravel", vote: 100 },
    { name: "Symfony", vote: 35 },
    { name: "Zend", vote: 18 },
    { name: "Yii", vote: 7 }
  ]
};

Tạo môt view như sau:

<div id="best_framework">
  <h1>Top 5 PHP framework tốt nhất hiên nay:</h1>
  <ul>
    <li v-for="framework in frameworks | orderBy 'vote'"> {{ framework.name }}</li>
  </ul>
</div>

Ok, giờ chúng ta tạo View-Model cầu nối cho View và Model vừa tạo:

var myViewModel = new Vue({
  el: '#best_framework',
  data: myFrameworks
});

Như vậy đã xong, chúng ta tổng hợp các thành phần trên vào file third-example.html.

<html>
<head>
  <title>Ví dụ thứ ba về Vue.js - All Laravel</title>
</head>
<body>
  <div id="best_framework">
    <h1>Top 5 PHP framework tốt nhất hiên nay:</h1>
    <ul>
      <li v-for="framework in frameworks | orderBy 'vote' -1"> {{ framework.name }}</li>
    </ul>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.min.js"></script>
  <script type="text/javascript">
    var myFrameworks = {
      frameworks: [
        { name: "CodeIgniter", vote: 40 },
        { name: "Laravel", vote: 100 },
        { name: "Symfony", vote: 35 },
        { name: "Zend", vote: 18 },
        { name: "Yii", vote: 7 }
      ]
    };

    var myViewModel = new Vue({
      el: '#best_framework',
      data: myFrameworks
    });
  </script>
</body>
</html>

Chạy thử thấy trang trắng tinh, "Ông đùa tôi à?". Mục đích của ví dụ này là tạo một Model chứa danh sách các vote từ các framework, trên view chúng ta sẽ hiển thị danh sách này được sắp xếp theo vote. Tuy nhiên nó đã không hoạt động do trong phiên bản Vue.js 2.0 orderBy đã được bỏ đi, thay vào đấy chúng ta có thể sử dụng các cách để sắp xếp trong các phương thức (sẽ nói đến trong các bài kế tiếp). Để ứng dụng này hoạt động, tạm thời chúng ta chuyển về Vue.js 1.0. Comment Vue.js 2.0 và insert Vue.js 1.0 vào file HMTL.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.min.js"></script>
-->

Giờ chúng ta xem kết quả thế nào

Ví dụ thứ 3 về Vue.js

Ok, nó đã hoạt động tốt. Giờ chúng ta nói tiếp về các chỉ thị. Trong view, chúng ta thấy v-for, đây gọi là một chỉ thị. Các chỉ thị luôn bắt đầu bằng chữ v (Vue). v-for hỗ trợ tham số thứ hai là chỉ mục của phần tử hiện hành, ví dụ:

<div id="best_framework">
  <h1>Top 5 PHP framework tốt nhất hiên nay:</h1>
  <ul>
    <li v-for="(framework, index) in frameworks | orderBy 'vote'"> {{ index }} - {{ framework.name }}</li>
  </ul>
</div>

Sử dụng điều kiện khi render trong Vue.js

Câu lệnh v-if

Ví dụ trên chúng ta đã làm quen với chỉ thị vòng lặp v-for có sắp xếp, tiếp theo chúng ta xem v-if là gì bằng ví dụ sau đây:

<div id="example-4">
  <p v-if="seen">Bạn đã thấy rồi.</p>
</div>

Tạo ViewModel

var example4 = new Vue({
  el: '#example-4',
  data: {
    seen: true
  }
})

Tổng hợp nội dung cho file 4th-example.html

<html>
<head>
  <title>Ví dụ thứ 4 về Vue.js - All Laravel</title>
</head>
<body>
  <div id="example-4">
    <p v-if="seen">Bạn đã thấy rồi.</p>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.min.js"></script>
  <script type="text/javascript">
    var example4 = new Vue({
      el: '#example-4',
      data: {
        seen: true
      }
    })
  </script>
</body>
</html>

Khi chạy chúng ta thấy kết quả như sau:

Ví dụ thứ tư của Vue.js

v-if kiểm tra xem giá trị trong Model là true hay false để thực hiện các lệnh tiếp theo, giờ chúng ta sửa giá trị seen thành false xem thế nào. ### Câu lệnh v-else

Bạn có thể sử dụng v-else để hiển thị các thành phần cần thiết khi v-if không được hiển thị.

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

Câu lệnh v-else-if

Như tên gọi của nó, nó giống như elseif trong PHP, sử dụng khi một khối giao diện nào đó cần tùy chỉnh theo các trường hợp khác nhau:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

Câu lệnh v-show

Một tùy chọn trong điều kiện hiển thị nữa là v-show, nó có cú pháp giống với v-if nhưng hoạt động khác v-if.

<h1 v-show="ok">Hello!</h1>

v-show cũng hỗ trợ v-else. Sự khác biệt giữa v-show và v-if:

  • v-show thích hợp với các thành phần được thay đổi thường xuyên khi đang chạy.
  • v-if không có khả năng thay đổi khi đang chạy, trừ khi thay đổi điều kiện và bắt đầu lại từ đầu.

Quản lý sự kiện trong Vue.js

Trong Vue.js chúng ta có thể quản lý các sự kiện liên quan đến một view như click, hover... Nó rất đơn giản bằng cách thêm các phương thức quản lý sự kiện (event handlder) vào ViewModel, trong phương thức này sử dụng this để truy xuất đến các thành phần trong dữ liệu của Model. Xem xét ví dụ sau:

<html>
<head>
  <title>Ví dụ thứ 5 về Vue.js - All Laravel</title>
</head>
<body>
  <div id="example5">
    Name: <input type="text" v-model="name">
    <button v-on:click="myClickHandler">Xin chào</button>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.min.js"></script>
  <script type="text/javascript">
    var myModel = {
      name: "Kiên Đặng",
      age: 35,
      gender: "male"
    };

    var myViewModel = new Vue({
      el: '#example5',
      data: myModel,

      // Phương thức quản lý sự kiện trong Vue
      methods: {
        myClickHandler: function(e) {
          alert("Chào mừng " + this.name + " đến với All Laravel");
        }
      }
    });
  </script>
</body>
</html>

Ở ví dụ trên, trong ViewModel có thêm thuộc tính methods và trong đó có phương thức myClickHandler để quản lý việc click chuột ở view.

Ví dụ thứ 5 về Vue.js

Lời kết

Càng đi sâu vào chúng ta thấy vì sao Vue.js được nhiều các framework và website lớn lựa chọn như Laravel, GitLab... đơn giản là vì sự đơn giản của Vue.js. Mới qua 5 ví dụ nhỏ chúng ta đã thấy thực sự Vue.js làm được rất nhiều điều trong việc xây dựng ứng dụng web cho người dùng. Bạn có thể tải về cả 5 ví dụ trong file zip dưới đây để thực hành nhanh. vue.js-example-allaravel-com


CÁC BÀI VIẾT KHÁC

FirebirD

Đam mê Toán học, Lập trình. Sở thích chia sẻ kiến thức, Phim hài, Bóng đá, Cà phê sáng với bạn bè.

Vue.js là gì

Cơ bản về Vue instance

0 Bình luận trong "Vue.js cấu trúc điều kiện, lặp và quản lý sự kiện"

Thêm bình luận