Hi các bạn, chào mừng các bạn đến với series Vue của WolfActive tụi mình. Thì ở phần trước của section 2, mình đã cùng nhau tìm hiểu về data, method, render data ra ngoài html. Thì ở phần 2 của section 2 này, mình sẽ đi tiếp về kiến thức Event & Methods.
Trước khi bắt đầu thì. Cũng như bài trước, mọi người down souce tại đây để làm cùng nhau nhé. Và đây là giao diện source của chúng ta lần này.
1/ Khởi động
Đầu tiên như bài trước ta cùng nhau nhìn qua cấu trúc source của mình ở bài này nhé:
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics With Wolfactie</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>Vue Events</h1>
</header>
<section id="events">
<h2>Events in Action</h2>
<button>Add</button>
<button>Remove</button>
<p>Result: {{ counter }}</p>
</section>
</body>
</html>js:
const app = Vue.createApp({
data() {
return {
counter: 0,
};
},
});
app.mount('#events');Trong file html, các bạn có thể thấy mình đã render ra sẵn biến counter trong thẻ p, kèm theo 2 button để xử lí sự kiện. Nhìn vào thôi thì chắc các bạn cũng sẽ biết 2 nút này để làm gì rồi nhỉ? 😀
Còn file js, thì mình có tạo biến counter trong data với giá trị là 0.
Nào, giờ thì mình cùng nhau bắt đầu thôi
2/ Event Binding
Về định nghĩa thì event thì, chắc các bạn cũng không còn xa lạ gì nữa. Đó là mình tạo một sự kiên nhằm thực hiện một chức năng nào đó như function vậy. Thì giờ mình bắt đầu nút đầu tiên, đó là button add.
Nếu ở đây các bạn sử dụng vanila javascript để xử lí sự kiện thì, các bạn phải DOM tới element, tạo event click cho nó. Thì đến với vue, ở bài trước chúng ta có tìm hiểu v-bind, cho phép chúng ta set value vào attribue. Thì giờ chúng ta sẽ cũng sẽ tìm hiểu thêm một loại nữa. Đó là v-on, v-on cũng giống như v-bind nhưng nó sẽ bắt đến các sự kiện và có thể được truyền vào đó là một methods.
VD:
<button v-on:click="">Add</button>Có thể các bạn hỏi là, làm thế nào để biết v-on có thể sử dụng sự kiện nào mà ghi vào? Thì trong vanila javascript có bao gồm tất cả các event như: click, mouseenteer,… thì sau, v-on chính là các event đó hoặc các bạn có thể đọc thêm tại đây.
Giờ mình sẽ viết lệnh tính toán counter trong click nhé
<button v-on:click="counter++">Add</button>
<button v-on:click="counter=counter-1">Remove</button>Giờ thì chúng ta cùng nhau bấm thử xem như thế nào nhé! *Bấm . Sau khi vừa bấm ta có thể vừa thấy biến counter tăng giảm khi ta bấm.
Vậy nếu truyên method vào thì ta sẽ truyền như thế nào?
Đầu tiên ta sẽ cùng nhau tạo một method nhé
methods: {
addCount(num){
this.counter = this.counter + num;
},
}Ở đây, mình tạo một method tên addCount cùng với agrument truyền vào trong đó. Giờ ta sẽ gọi trong v-on nhé:
<button v-on:click="addCount(5)">Add</button>Ta gọi thẳng method vào trong click như cách mà ta gọi v-bind vậy. Giờ thì ta cùng nhau thử bấm thử.
Kết quả sau khi bấm:
3/ Event object
Event object, cái này cũng khá quen thuộc với các bạn luôn này. Khi các bạn tạo sự kiện hay tạo function trong vanila javacript, thi thoảng các bạn chuyền event(e) vào function để lấy giá trị của đối tượng truyền vào trong function, sự kiện đó
Thì trong vue cũng vậy, đầu tiên mình sẽ tạo biến một biến name trong data và tạo method trước nhé
data() {
return {
counter: 0,
name:'',
};
}
methods:{
addCount(num){
this.counter = this.counter + num;
},
setName(e){
this.name = e.target.value;
},
}Bên cạnh đó mình cũng sẽ tạo thêm trong file html 1 input, 1 thẻ p nhé:
<input type="text" id="" v-on:input="setName">
<p>Your Name: {{ name }}</p>Ở đoạn code trên, có thể các bạn sẽ thắc mắc, tại sao mình không truyền gì vào method được gọi trong v-on:input. v-on:input tức nó sẽ chạy khi các bạn bắt đầu nhập kí tự vào input, và method setName nó sự hiểu là: event(e) chính là ngay tại input đó.
Giờ thì các bạn nhập thử và xem vi diệu nhé… 🙂
Vậy còn trường hợp nếu như, ta muốn truyền vào có cả agrument khác và event thì sao?
Tới đây mình sẽ hướng dẫn tiếp cho các bạn, giờ mình sẽ sửa lại method setName nhé
setName(e,lastName){
this.name = e.target.value.' '.lastName;
}Và giờ, để chúng ta có thể phân biệt được đâu là event đâu là agrument truyền vào, thì các bạn phải sử dụng $event. $event nó sẽ xác định vị trí biến bạn truyền vào tại đó, là event object chứ không phải agrument khác. Như sau:
<input type="text" id="" v-on:input="setName($event,'Sintis')">4/ Event Modifiers
Event Modifiers, mình tạm dịch là bổ ngữ cho event nha. Ví dụ cho các bạn dể hiểu hơn nè. Thông thường khi các bạn gọi event click, thì thường nó sẽ mặc định chuột trái. Nhưng nếu các bạn bổ ngữ cho sự kiện click đó như click phải thì phải click chuột phải thì mới xảy ra tác vụ.
Ví dụ:
<button v-on:click.right="addCount(5)">Add</button>4/ V-once
V-once, tức chỉ chạy một lần duy nhất và chỉ đúng một lần khi được gọi ra. Và giá trị của nó sẽ không thay đổi khi các bạn gọi sự kiện đến nó:
<p v-once>Start from: {{ counter }}</p>
<p>Result: {{ counter }}</p>Giờ thì các bạn thử bấm add hoặc remove và xem kết quả nhé.
4/ Tổng kết
Như vậy hôm nay mình đã giới thiệu cho các bạn về Event & Method trong Vue ở phần 2 này. Chúng ta hiểu được cách sử dụng sự kiện, bổ nghĩa cho sự kiện, sử dụng v-once và event trong sự kiện, methods. Mọi thắc mắc các bạn liên hệ tụi mình qua fanpage để được giải đáp thắc mắc nhé.