vue 基础入门笔记 08:键盘修饰符、自定义指令
0 / 0 / 创建于 5年前 /
September 的个人博客
vue 基础入门笔记 08
- 键盘修饰符
- 键盘回车
- 自定义指令
- focus 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<!-- 键盘修饰符 -->
<input @keyup.f2='show' v-model='name' type="text" name="" id="input" class="form-control" value=""
required="required" pattern="" title="">
<!-- 自定义指令 获取焦点-->
<input type="text" v-focus v-model='name' name="" id="input" class="form-control" value="" required="required"
pattern="" title="">
</div>
<script>
// 指令定义函数提供了几个钩子函数（可选）：
// bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
// inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
// update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
// componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
// unbind: 只调用一次， 指令与元素解绑时调用。
// 钩子函数的参数 (包括 el，binding，vnode，oldVnode) 。
//arg1 指令名
//arg2 是一个对象，有一些指令相关的函数，这些函数在一些特定的阶段，执行相关操作
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
var vm = new Vue({
el: '#app',
data: {
name: ''
},
methods: {
show() {
alert("hello world")
}
},
//局部指令
directives: {
focus: {
// 指令的定义---
}
}
});
Vue.config.devtools = true
// .enter => // enter键
// .tab => // tab键
// .delete (捕获“删除”和“退格”按键) => // 删除键
// .esc => // 取消键
// .space => // 空格键
// .up => // 上
// .down => // 下
// .left => // 左
// .right => // 右
// 自定义键盘修复符
Vue.config.keyCodes.f2 = 13
</script>
</body>
</html>本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号