Tùy Biến Sự Kiện Bàn Phím
Bạn có thể định nghĩa các biến sửa đổi sự kiện bàn phím tùy chỉnh thông qua thuộc tính Vue.config.keyCodes. Điều này cho phép bạn ánh xạ một tổ hợp phím cụ thể thành một tên gọi ý nghĩa hơn khi sử dụng trong template.
<!-- Sử dụng sự kiện bàn phím -->
<input type="text" v-model="searchText" @keyup.meta="xửLýSựKiện">
// Thiết lập giá trị mã phím toàn cục
// Ví dụ: Ánh xạ phím Ctrl+Z
Vue.config.keyCodes.meta = 91
Khi chạy, nếu người dùng nhấn phím được cấu hình ở trên, hàm chỉ định sẽ được kích hoạt thay vì sử dụng chuỗi mặc định của trình duyệt.
Xây Dựng Chỉ Lệnh Tùy Chỉnh
Các chỉ lệnh (directive) bắt buộc phải tuân thủ cú pháp v- khi gọi trong DOM. Để tạo một chỉ lệnh mới, phương thức static Vue.directive được sử dụng để đăng ký với tên chỉ lệnh mà không có dấu gạch ngang phía trước.
<!-- Áp dụng chỉ lệnh -->
<input type="text" id="myInput" v-autofocus>
<script>
// Định nghĩa chỉ lệnh 'autofocus'
Vue.directive('autofocus', {
bind: function (el) {
// Gọi lúc gán chỉ lệnh, thực thi duy nhất một lần
console.log('Chỉ lệnh đã được gắn vào phần tử');
},
inserted: function (el) {
// Gọi ngay sau khi phần tử được chèn vào DOM cha
// Tại đây chúng ta có thể thao tác thực tế lên DOM
el.focus();
},
updated: function () {
// Gọi mỗi lần component được cập nhật V-node
}
});
</script>
Lưu ý rằng khi sử dụng trong HTML, bạn phải viết hoa chữ cái đầu tiên (camelCase) hoặc sử dụng gạch nối kebab-case tùy theo quy ước của dự án, nhưng Vue tự động chuẩn hóa cách gọi.
Vòng Đời Của Instace
Một instance của Vue trải qua các giai đoạn khởi tạo và cập nhật dữ liệu. Các móc nối (hooks) lifecycle cho phép thực thi logic tại từng thời điểm cụ thể trong vòng đời đó.
Quá trình diễn ra như sau:
- beforeCreate: Instance chưa được khởi tạo hoàn toàn. Data và Methods chưa khả dụng.
- created: Instance đã khởi tạo xong. Có thể truy cập data và methods, nhưng chưa render DOM.
- beforeMount: Template đã được biên dịch sang Render Function nhưng chưa hiển thị ra màn hình.
- mounted: Phần tử đã được gắn vào DOM thật sự. Có thể thực hiện các thao tác query Selector.
- beforeUpdate: State dữ liệu đã thay đổi nhưng giao diện vẫn là phiên bản cũ.
- updated: Giao diện đã phản ánh đúng những thay đổi của dữ liệu mới.
<!DOCTYPE html>
<html>
<head>
<title>Vue Lifecycle Demo</title>
</head>
<body>
<div id="demo">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
message: 'Xin chào thế giới'
},
methods: {
logAction() {
alert('Đã thực hiện hành động');
}
},
beforeCreate() {
console.log('Trước khi khởi tạo');
},
created() {
console.log('Instance đã tạo xong');
// this.logAction() // Có thể gọi method ở đây
},
beforeMount() {
console.log('Trước khi mount template');
},
mounted() {
console.log('DOM đã được render');
},
beforeUpdate() {
console.log('Dữ liệu thay đổi, trước khi render lại');
},
updated() {
console.log('Giao diện đã đồng bộ với dữ liệu');
}
})
</script>
</body>
</html>