[Series-Vue-02] – Cú pháp và những đoạn code đầu tiên

0
192
vue-js-la-gi
vue-js-la-gi
[Series-Vue-02] – Cú pháp và những đoạn code đầu tiên
5 (100%) 6 votes

Mở đầu

bài trước mình đã trình bày qua một số lý thuyết cơ bản về Vue.js, mình cũng là người mới học và làm Vue được 1 thời gian, kiến thức chưa phải là giỏi, nhưng cũng biết một chút, và muốn chia sẻ lại cho bạn nào ham học hỏi. Bây giờ chúng ta sẽ đi vào phần cấu trúc code của Vue.

Tạo mẫu code Vue Demo

Cũng giống như jQuery, các bạn Download file vue.js và chèn vào thẻ <script></script> chạy như bình thường. Tạo một folder gồm 4 file : index.html, vue.min.js, app.js, style.css

hướng dẫn sử dụng vue js cơ bản
hướng dẫn sử dụng vue js cơ bản

Trong file index.html chúng ta sẽ chèn file vue.min.js và các file liên quan vào, tạo một thẻ <div></div>id="vue-app". Mở file app.js và code đoạn mã sau :

hướng dẫn sử dụng vue js cơ bản
hướng dẫn sử dụng vue js cơ bản

Cú pháp ở trên gọi là một Vue Instance. Quay lại file index.html, ta thêm cú pháp {{ message }} này vào ở trong thẻ <h1> (chỉ là cho nó to nhìn cho dễ).

hướng dẫn sử dụng vue js căn bản
hướng dẫn sử dụng vue js căn bản

Save lại và mở file index.html lên trình duyệt, bạn sẽ thấy xuất hiện dòng chữ Hello Vue!, nó chính là giá trị của biến message mà bên file app.js đã gửi sang. Khá là hay đúng không ?

Dữ liệu của Vue JS hoạt động theo cơ chế “Two-way Data Binding“, tức là khi bạn thay đổi giá trị ở bên ngoài thì giá trị trong data cũng thay đổi theo và ngược lại, như ở ví dụ trên, nếu giá trị của message thay đổi bên ngoài html, thì giá trị message ở trong file app.js cũng thay đổi theo. Ví dụ sau sẽ làm rõ hơn điều này.

Thêm một thẻ <input /> như hình đoạn code sau

hướng dẫn sử dụng vue js căn bản
hướng dẫn sử dụng vue js căn bản

Khi thay đổi giá trị trong ô input, thì giá trị ở thẻ <h1> cũng thay đổi theo, điều này làm các bạn liên tưởng tới jQuery, với event keyup, lấy ra value của input rồi interText vào thẻ <h1>. Nhưng Vue làm việc này mượt mà và nhanh gọn hơn nhiều.

hướng dẫn sử dụng vue js căn bản
hướng dẫn sử dụng vue js căn bản

v-model là một directive quản lý các dữ liệu data trong Vue JS

Tổng kết

"v-model" là directive quản lý các dữ liệu data, ở trong ví dụ này là quản lý data : message.

Mỗi một ứng dụng Vue đều bắt đầu bằng cách tạo một Vue Instance với hàm new Vue()

hướng dẫn sử dụng vue js căn bản
hướng dẫn sử dụng vue js căn bản

Là nơi chứa các mã code tác động tới một đối tượng cụ thể nào đó, như trong bài này là tất cả đối tượng nằm trong thẻ <div></div> có id="app", nếu cú pháp {{ message }} kia mà nằm ở ngoài id="app" thì code sẽ không thực thi như ta mong đợi.

Thông qua bài này, các bạn cũng ít nhiều hiểu một chút về Vue JS rồi, mọi thắc mắc xin vui lòng comment tại post này. Bài sau chúng ta sẽ hiểu rõ hơn về data và methods.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.