Vue.js (View) là 1 thư viện Javascript UI mới (again) đang khá là hot trong thời gian gần đây. Nếu mà bạn đang có 1 project nào đấy mà đang phân vân dùng công cụ nào, bạn có thể cho Vue 1 cơ hội.

Requirements

Để sử dụng Vue thì rất là đơn giản. Chỉ cần thêm đoạn script HMTL này vào là bạn đã có thể sử dụng Vue trong trang web của bạn rồi đấy .

<script src="https://unpkg.com/vue@next/dist/vue.js"></script>

The Vue Instance

// Vue instance
new Vue({
// DOM element giao tiếp tới
  el: '#app',
  // Dữ liệu truyền tới element giao tiếp
  data: {
    message: 'Welcome to Codementor!',
  }
})

Trên đây là 1 ví dụ tạo 1 instance Vue. Trong đó trường el là trường sẽ được mounted.

Dữ liệu để mount tới el đã được định danh ở phía trên sẽ được định nghĩa ở trong trường data, và dữ liệu này sẽ được truy cập qua các template.

Để rõ hơn thì mình có 1 đoạn code HTML như sau:

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

1 điều cần lưu ý ở đây là thẻ div với id mà chúng ta đã trỏ tới ở phía trên. Và 2 dấu ngoặc nhọn {{ message }} được sử dụng để hiển thị dữ liệu được truyền tới.

Data-binding

Ở trên là 1 ví dụ về việc binding data tới view. Giờ mình xin nói thêm 1 chút về việc này.

Điều kiện

Vue cung cấp cho chúng ta 1 tính năng khá là hữu dụng như là khả năng binding data tới view theo điều kiện. Example:

new Vue({
  el: '#app',
  data: {
    message: 'Welcome to Codementor!',
    // điều kiện
    newMember: true
  }
})

<div id="app">
  <!-- Display chỉ khi newMember = true -->
  <h2 v-if="newMember">{{ message }}</h2>
  <!-- Display chỉ khi newMember = false -->
  <h2 v-else="newMember">Pick a Mentor</h2>
</div>

v-if và v-else được dùng cho việc display data theo điều kiện. Và về cách sử dụng thì như là if-else trong các ngôn ngữ lập trình.

Vòng Lặp

Ngoài việc là thực hiện binding theo điều kiện thì Vue cũng đủ ngầu để chúng ta có duyệt data theo mảng.

<ol>
  <li v-for="mentor in mentors">{{mentor.fullname}}</li>
</ol>

Câu lệnh điều hướng v-for ở trên tạo 1 biến mentor và sử dụng biến này để duyệt hết các phần tử trong array mentor.

new Vue({
el: '#app',
data: {
  message: 'Welcome to Codementor!',
  newMember: false,
  // Array of mentors
  mentors: [
    {id: "ABC", fullname: "Arup Rakshit"},
    {id: "DEF", fullname: "Mo Moadeli"},
    {id: "GHI", fullname: "Khaja Minhajuddin"},
    {id: "JKL", fullname: "bendozy"},
    {id: "MNO", fullname: "Massimo Frascati"},
    {id: "PQR", fullname: "Christian Nwamba"}
  ]
}
})

Two-Way Binding

Two-way binding trong Vue được sử dụng qua câu lệnh v-model. Điều này sẽ thể hiện rõ hơn qua ví dụ phía dưới.

<p>
    Add mentor: <input type="text" v-model="mentor"> 
    {{mentor}}
</p>

Xử lí sự kiện

Trong các ứng dụng web thì việc xử lí các sự rất là quan trọng. Và vì lí do đấy, Vue.js cung cấp cho chúng ta cú pháp khai báo sự kiện rất là dễ hiểu. Gỉa sử như chúng ta cần collect mentor name và ID.

<p>
    ID: <input type="text" v-model="mentor.id"> 
     {{mentor.id}}
</p>
<p>
    Fullname: <input type="text" v-model="mentor.fullname"> 
    {{mentor.fullname}}
</p>
<p>
    <button v-on:click="addMentor">Add Mentor</button>

Ở đây mình đã ràng buộc function addMentor vào sự kiện click button. Và ở Vue thì 1 sự kiện được tạo ra theo cú pháp sau v-on: kiểu sự kiện. Ex: v-on:click, v-on:mouseover, ...

Và phương thức xử lí sự kiện ở trong Vue sẽ được định nghĩa ở trong 1 method object.

new Vue({
  el: '#app',
  data: {
    message: 'Welcome to Codementor!',
    // No longer a primitive
    mentor: {id:'',fullname:''},
    newMember: false,
    mentors: [
        // Truncated for brevity
    ]
  },
  // Methods
  methods: {
    // Add mentor handler
      addMentor: function(){
        // Add new value from the inputs
        // above the existing array
        this.mentors.unshift(this.mentor)
    }
  }
})

Ở đây trong trường addMentor chứa function để xử lí cho việc button được click vào. Cụ thể là việc update array mentors bằng cách sử dụng method unshift

Compenents

Components là 1 trong những tính năng mạnh mẽ của Vue. Tính năng giúp chúng ta đóng gói các HTML element để tiện cho tái sử dụng trong codebase.

Ví dụ về cách tạo 1 component:

// mentor-user component
Vue.component('mentor-user', {
    // acceptable props
    props: ['mentor'],
    // renderable templates
    template: '<li>{{mentor.fullname}}</li>'
});

Tổng kết

Như mọi người có thể thấy là rất dễ để bắt đầu với Vue. Thực tế thì sự đơn giản, thân thiện chính là tiêu chí mà Vue hướng tới, nên mình nghĩ sắp tới các bạn nào có side-project thì có thể cân nhắc để sử dụng Vue .

Link tham khảo: https://www.codementor.io/javascript/tutorial/getting-started-with-vuejs