Trong bài trước chúng ta đã biết đến Vue.js là gì và cách thức gắn kết dữ liệu giữa view và model trong Vue, bài viết này sẽ tiếp tục tìm hiểu cách thức debug khi viết ứng dụng bằng Vue.js. Vue.js Devtools là một extension trong trình duyệt Chrome, giúp cho việc debug trong Vue dễ dàng hơn. Trong 5 ví dụ trước, chúng ta sử dụng bản Vue.js production đã minify do đó nó sẽ không sử dụng được cùng với Devtools, giờ chúng ta chèn lại thư viện Vue.js bản non-product
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.min.js"></script> -->
<script src="https://unpkg.com/vue"></script>Sau khi thay đổi sang bản non-production, chúng ta thử vào một file ví dụ (bài viết sẽ sử dụng file 5th-example.html, xem bài thứ hai về Vue để tải file này về), khi đó mở tab Console trong Developer Tools sẽ thấy thông báo là đang ở chế độ development và nên cài Devtools từ đường dẫn https://github.com/vuejs/vue-devtools như hình dưới đây:
Cài đặt Vue.js Devtools trên Chrome
Để cài đặt extension Vue.js Devtools trên Chrome, vào extension trên Chrome Web Store, click vào Add to Chrome để cài đặt extension này. Sau khi cài đặt sẽ xuất hiện biểu tượng Vue ở góc trên bên phải trình duyệt. Tuy nhiên, lúc này khi click vào biểu tượng đó thì sẽ có thông báo Vue.js not detected do extension này chưa có quyền truy xuất file URL. Thêm quyền này bằng cách ấn vào biểu tượng 3 dấu chấm phía trên bên phải chọn More tools, sau đó chọn Extensions và tìm đến Vue.js devtools, chọn vào Allow access to file URLs.
Sau đó, bạn tắt trình duyệt đi và mở lại, chúng ta đã thấy biểu tượng Vue.js chuyển từ màu xám sang màu xanh. Như vậy chúng ta đã sẵn sàng sử dụng Vue.js devtools để debug. ## Sử dụng Vue.js Devtools
Vue.js Devtools đã được cài đặt và cấu hình xong, trong Developer tools của trình duyệt Chrome sẽ xuất hiện thêm một tab có tên là Vue.
Chúng ta sẽ thấy một phần tử
<html>
<head>
<title>Ví dụ thứ 5 về Vue.js - All Laravel</title>
</head>
<body>
<div id="example5">
Name: <input type="text" v-model="name">
<button v-on:click="myClickHandler">Xin chào</button>
</div>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.min.js"></script> -->
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var myModel = {
name: "Kiên Đặng",
age: 35,
gender: "male"
};
var myViewModel = new Vue({
el: '#example5',
data: myModel,
// Phương thức quản lý sự kiện trong Vue
methods: {
myClickHandler: function(e) {
alert("Chào mừng " + this.name + " đến với All Laravel");
}
}
});
</script>
</body>
</html>Tiếp theo chúng ta sửa thử dữ liệu trên view và xem kết quả dữ liệu trên model có thay đổi không.
Khi thay đổi trường Name, ngay lập tức giá trị name được cập nhật từ view sang model. Tiếp theo, chúng ta thực hiện thay đổi dữ liệu trên model và xem view hiển thị như thế nào?
Ngay khi thay đổi dữ liệu của model, chúng ta thấy view thay đổi ngay với dữ liệu này. ## Gán dữ liệu hai chiều trên Vue.js
Qua công cụ Vue.js Devtools chúng ta có thể thấy rõ hơn khái niệm gán dữ liệu hai chiều trên Vue thông qua View-Model, khi dữ liệu trên View thay đổi ViewModel sẽ làm cầu nối để truyền tải dữ liệu thay đổi sang Model và ngược lại. Trên đây cũng là một ví dụ đơn giản nên khi debug không có gì cả, trong những ứng dụng phức tạp sử dụng Vue.js, công cụ debug Vue.js devtools giúp chúng ta được rất nhiều. Trong quá trình giới thiệu về Vue.js, tôi sẽ luôn sử dụng công cụ debug này để tiếp cận trực quan hơn. Hẹn gặp bạn ở các bài viết tiếp theo.
CÁC BÀI VIẾT KHÁC
The Boss
5 years ago
Phản hồiFirebirD
5 years ago
Phản hồi