Bài 2 : VueJS các khái niệm cơ bản

cropped-v.png

Xin chào các bạn, hôm nay chúng ta sẽ cùng tìm hiểu các khái niệm cơ bản trong vuejs.

trở lại ví dụ hello world ở bài 1 , trong đoạn javascript mà ta khai báo

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

Để tạo một ứng dụng vue chúng ta cần khai báo và khởi tạo root vue instace với Vue là một hàm constructor bao gồm 5 object.

  • el : dùng để chọn vị trí bắt đầu truy DOM
  • data : dùng để lưu trữ các giá trị .
  • methods : dùng để khởi tạo và thực thi hàm
  • computed : giống như method nhưng các hàm sẽ chỉ gọi 1 lần và giá trị sẽ không lưu lại (sẽ có bài hướng dẫn khi nào sử dụng và tại sao dùng computed.)
  • watch : xem sự thay đổi của các giá trị

Continue reading “Bài 2 : VueJS các khái niệm cơ bản”

Advertisements

Bài 1 : VueJs cơ bản

cropped-v.png

Chào mừng các bạn đến loạt bài về VueJs, hôm nay chúng ta sẽ bắt đầu tìm hiểu và thực hành nhé.

Đê bắt đầu bạn cần chuẩn bị  một trình soạn thảo (editor ) mình khuyên các bạn nên sử dụng sublime tetx 3 (ST3) bởi vì ST3 rất nhẹ và có nhiều tiện ích (st3 chiếm rất ít ram so với Visual Code, Bracket, hay Atom ngoài ra còn hỗ trợ rất nhiều pack )

Tải Sublime text 3 tại : https://www.sublimetext.com/3

Mình sẽ viết một bài hướng dẫn cài đặt và chỉnh sửa ST3 để lập trình vuejs dễ dàng hơn trong thời gian gần nhất.

Xong, chúng ta cùng bắt đầu đến với phần cơ bản nhất quả đất trong lập trình đó chính là tạo “Hello World”

hello_meme

Bấm “Result” để xem kết quả !

//jsfiddle.net/chrisvfritz/50wL7mdz/embedded/

Giải thích các  thành phần trong phần trên :

id=”app” khai báo trong thẻ div đánh dấu vị trí bắt đầu của app

{{ messenge }} : sẽ hiển thị giá trị của được gán trong data ta sẽ xem trong phần javascript

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

Phần tiếp theo trong javascript

el : ‘#app’ chính là phần khai báo tên vị trí bắt đầu của vue là từ phần tử có id=”app”

phần “data” sẽ chứa các biến dùng để truyền giá trị (blind)

vd ở đây ta tạo biế “message” là một dãy kí tự (string)

var app = new Vue({
el: ‘#app,
data: {
message: ‘Hello Vue!’
}
})
Kết quá là ứng dụng đã chạy và xuất ra giá trị của “message” trong “data” mà ta đã khai báo
Hello Vue!
Rất đơn giản đúng không nào!
aaaand-its-done-pnbg9f
Ok, chúng ta đã thực hiện xong  “Hello world” với vuejs bài sau chúng ta sẽ tìm hiểu thêm về các khái niệm trong vuejs nhé ! Hẹn gặp lại .

VueJS là gì ?

Chào mừng bạn đến với loạt bài hướng dẫn và hiểu rõ về vuejs , hôm nay chúng ta sẽ tìm hiểu về thông về VueJS.

Bắt đầu từ cái cơ bản nhất , trang chủ của framwork  :

Link  : https://vuejs.org/ 

Thông tin qua một chút

VueJs là một “The Progressive JavaScript Framework” dùng để xây dựng giao diện web.

Vue phát âm là /vjuː/ gần giống từ “view

Tập trung vào 3 yếu tố :

  • Approachable (Dễ tiếp cận )

  • Versatile  (Linh hoạt)

  • Performant (Hiệu năng cao )

So sánh VueJs với các framwork khác các bác có thể tham khảo link này

https://vuejs.org/v2/guide/comparison.html

Nhìn chung VueJS rất dễ để bắt đầu dành cho người mới học, tuy nhiên bạn cần có kiến thức cơ bản về html5, css , javascript (es6) để có thể hiểu và sử dụng hiểu quả vuejs được.

Nếu như bạn chưa trang bị đủ, hãy tạm dừng và bổ sung các kỹ năng cơ bản lập trình web trước, điều đó rất nhanh và không phức tạp.

Nếu như bạn đã trang bị các hiểu biết cơ bản thì chúng  ta cùng bắt đầu tìm hiểu sâu hơn về framwork đứng thứ 3 trong Github (tháng 2/2017)

https://github.com/showcases/front-end-javascript-frameworks

Vậy là chúng ta đã biết cách phát âm, hiểu VueJS là gì rồi đúng không?

> Bài tiếp theo sẽ đi vào phần cơ bản của VueJs !

Cảm ơn bạn đã dành thời gian đọc bài viết, chúc bạn một ngày tốt lành ^^