Chủ đề bài học hôm nay của chúng ta chính là Event handling - xử lý sự kiện trong Vue.js. Đây là một trong những chủ đề cực kỳ quan trọng trong loạt bài học Vuejs này vì vậy mong các bạn chú ý theo dõi.
1. Listen to Events (Lắng nghe sự kiện)
Trong Vue.js chúng ta sử dụng v-on directive để lắng nghe các sự kiện từ phía DOM.
Ví Dụ : Lắng nghe sự kiện click trên DOM.
<div id="app"> <button v-on:click="counter += 1">Click</button> <p>Bạn vừa click vào button lần thứ{{counter}}</p> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { counter: 0, } }); </script>
Chạy Code
v-on:click trong đoạn code phía trên tương đương với onClick attribute trên HTML tag.
2. Method Event Handlers.
Trong thực tế hiếm có bài toán nào mà code xử lý sự kiện lại ngắn gọn như trên mà sẽ là hằng hà sa số các công việc cần làm. Rất may mắn Vuejs cũng hỗ trợ chúng ta tách phần code xử lý vào hàm và gọi hàm đó ở trên sự kiện như javascript thuần.
VD: Chuyển đoạn code xử lý sự kiện ở ví dụ trên vào hàm.
<div id="app"> <button v-on:click="numberPlus">Click</button> <p>Bạn vừa click vào nút lần thứ{{counter}}</p> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { counter: 0, }, methods: { numberPlus: function () { this.counter += 1; } } }); </script>
Và chúng ta cũng có thể truyền thêm tham số vào hàm khi gọi chúng ở DOM (như javascript thuần).
Ví dụ:
<div id="app">
<button v-on:click="say('hello')">Hello</button>
<button v-on:click="say('goodbye')">Goodbye</button>
</div>
<script type="text/javascript"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
counter: 0,
},
methods: {
say: function (message) {
alert(message + '!');
}
}
});
</script>Đôi lúc nếu bạn muốn sử dụng các thông số mặc định của sự kiện thì Vue.js cũng hỗ trợ bằng cách các bạn truyền thêm vào hàm biến $event.
Ví Dụ :
<div id="app">
<button v-on:click="warn('Không thể submit form',$event)">Click</button>
</div>
<script type="text/javascript"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
counter: 0,
},
methods: {
warn: function (message, event) {
if (event) event.preventDefault();
alert(message + '!');
}
}
});
</script>Chúng ta có thể mở console.log ra để xem tham số event này chứa gì
3. Event Modifiers.
Trong javascript thuần chúng ta thường sử dụng các event modifiles để tác động đến cách xử lý của sự kiện như:preventDefault(), stopPropagation(),...
Đương nhiên trong Vue những cách này vẫn sử dụng được thế nhưng ngoài cách đó ra thì Vue.js còn hỗ trợ chúng ta khai báo nó ngay ở trên directive bằng cách thêm chúng vào đằng sau directive và ngăn cách giữa chúng bằng dấu chấm "."
Ví dụ:
<div id="app"> <form action="https://hoc.tv" v-on:submit.prevent="warn"> <input type="text" placeholder="nhập vào tên..."> <button type="submit">Click</button> </form> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { counter: 0, }, methods: { warn: function () { alert('Bạn vừa thực hiện submit form, nhưng đã bị prevent'); } } }); </script>
Chạy Code trên với trình test code online
Danh sách các modifier được hỗ trợ:
- .stop
- .prevent
- .capture
- .self
- .once
4. Key modifiers.
Thông thường trong javascript khi muốn bắt sự nhấn phím của mọt phím nào đó thì chúng ta cần phải biết được mã code của phím đó rồi đem đi so sánh. Cách này cũng hoàn toàn có thể sử dụng được trong Vue.js
Ngoài cách trên Vue còn hỗ trợ chúng ta khai báo luôn sự kiện nhấn phím luôn khi khai báo directive. Bằng cách thêm mã code của phím đó vào sau directive v-on:keyup và ngăn cách giữa chúng bời dấu chấm
Ví dụ bắt sự kiện nhấn phím enter.
<div id="app"> <input type="text" v-on:keyup.13="warn"> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { counter: 0, }, methods: { warn: function () { alert('Bạn vừa ấn phím enter'); } } }); </script>
Thế nhưng để nhớ được hết mã code của từng phím thì không phải là cực kỳ không đơn giản, nên Vue.js đã thêm sẵn cho chúng ta các phím hay dùng thay thế cho key của các phím đó.
Dưới đây là danh sách các phím mà Vue.js đã thêm sẵn cho chúng ta:
- .enter
- .tab
- .delete (Phím này dùng được cho cả phím delete và backspace)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta (Trên bàn phím window thì nó là phím window, còn trên bàn phím mac thì nó là phím command).
Ví dụ chúng ta thay thế keycode của phím enter ở ví dụ trên bằng key mà Vue.js đã hỗ trợ sẵn.
<div id="app"> <input type="text" v-on:keyup.enter="warn"> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { counter: 0, }, methods: { warn: function () { alert('Bạn vừa ấn phím enter'); } } }); </script>
Bên cạnh đó Vue.js cũng cho phép người dung tự định nghĩa thêm các key Code mới thông qua config.keyCodes.
Ví dụ định nghĩa thêm key code cho phím f5.
Vue.config.keyCodes.f5 = 116;
Và để sử dụng key code này các bạn cũng làm như mặc định nhé!.
5. Why listener in HTML
Tại sao lại lắng nghe sự kiện trong HTML? Nếu bạn lo ngại rằng việc lắng nghe sự kiện bằng cách đặt event listener trong HTML như thế này là vi phạm quy tắc “separation of concerns" thì lo lắng của bạn chỉ là lo thừa, vì tất cả các hàm và biểu thức xử lí sự kiện của Vue được ràng buộc chặt chẽ với ViewModel, sẽ không có khó khăn gì trong việc bảo trì.
Sử dụng v-on còn có những lợi ích sau:
- Định vị hàm xử lí trong code JavaScript được dễ dàng hơn bằng cách đọc lướt template HTML.
- Code trong ViewModel trở nên thuần logic và không phụ thuộc vào DOM. Điều này giúp chúng ta dễ viết test.
- Khi một ViewModel bị hủy, tất cả hàm xử lí sự kiện đính kèm cũng được tự động gỡ bỏ mà không cần bạn phải dọn dẹp.
6. Kết lại
Phải nói Vuejs là một Framework hỗ trợ mạnh mẽ về xử lý sự kiện, việc tiếp cận và sử dụng Event Handling (Xử lý sự kiện) trong Vue.js cũng tương đối dễ dàng phải không nào. Bài học này kết thúc tại đây, hẹn các bạn ở trong bài hoc tiếp theo nhé!
