Vue.js là gì? Viết chương trình đầu tiên bằng Vue.js?

01-02-2018 10:48

Khoảng 2 năm trước, thật khó để tưởng tượng rằng Vue.js sẽ có thể sánh ngang với React lúc đó đang là một thế lực cực lớn. Giống như khoảng thời ấy, Trung Quốc đâu dám nghĩ có thể ngang hàng với Mỹ như lúc này ^^
Vậy tại sao Vue.js lại có thể phát triển và là một trong các framework hàng đầu như bây giờ. Thậm chí khi so sánh với React, giống như kẻ tám lạng, người nửa cân =)))
Yếu tố đầu tiên là Vue.js được nhận xét là VERY EASY-TO-LEARN trong việc tạo ra các front-ends linh hoạt.
Thứ hai, Vue.js hỗ trợ cho việc render, xử lý bất đồng bộ trong DOM, liên kết dữ liệu 2 chiều, tuân thủ nghiêm ngặt các thành phần của web và tích hợp đơn giản với các thành phần HTML.
Ngoài ra, Vue.js được xây dựng bởi một đội ngũ công đồng gồm các thành viên đến từ nhiều nước trên thế giới.
Lan man thế thôi, giờ vào phần chính nhé mọi người :D

Lập trình ứng dụng di động Android

Khóa học Lập trình Website với ASP.Net

Mục lục

• Vue.js là gì?
• Điều kiện để học Vue.js?
• Viết chương trình Vue.js đầu tiên?

Vue.js là gì?

Theo trang chủ của Vue.js

Vue (phát âm là /vjuː/, giống view) là một framework linh động dùng để xây dựng giao diện người dùng. Vue được thiết kế từ đầu theo hướng cho phép và khuyến khích việc phát triển ứng dụng theo từng bước...Có thể đáp ứng được nhu cầu về SPA (Single-Page Applications)..vv..vv

Mình không muốn lấy tất cả những gì trên trang chủ của Vue.js ghi ra. Vì nó ghi như vậy cũng khá khó hiểu. Các bạn cứ tạm hiểu đây là một framework JS về Front-End nhé :D

Điều kiện để học Vue.js

Vì Vue.js phát triển dựa trên ES6 (ECMAScript2015) nên mình nghĩ mọi người nên biết và tìm hiểu về cái này trước khi học Vue.js. Để tìm hiểu thêm về ES6, bạn có thể tham thảo tại Tìm hiểu về ES6 Hoặc ít nhất, điều kiện cần là phải biết về html, css và quan trọng nhất là javascript.

Viết chương trình Vue.js đầu tiên

Đầu tiên các bạn tạo 1 file với tên index.html và 1 file tên app.js nhé. Lưu ý là 2 file này có cùng cấp trong thư mục.
Bạn vào file index.html, nhúng thư viện của Vue.js và file app.js như sau:

Getting Started with Vuejs

File app.js bạn tạo như sau:

var app = new Vue({
    el: '#app',
    data: {
      message : 'Hello, We are ITPLUS-ACADEMY!'
    }
})  

Kết quả:

Hello, We are ITPLUS-ACADEMY!

Cùng phân tích một chút nhé
Đầu tiên, các bạn hãy chú ý vào file app.js:

  var app = new Vue({
     //
  })

đoạn này có nghĩa là ta đã khởi tạo một đối tượng Vue, còn gọi là Vue instance.
Tiếp theo,

el : '#app',

có thể hiểu là ta sẽ khoanh vùng làm việc cho nó. Quay sang file index.html sẽ thấy có một thẻ 

data : {
    message : 'Hello World!'
}

var app = new Vue({
    el: '#app',
    data: {
      message : 'Hello World!'
    }
}) ;
vm.message = 'Xin chao!'

Xin chao!