Contents
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
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> có id="vue-app". Mở file app.js và code đoạn mã sau :
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ễ).
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
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.
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()
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.
