vue 02-下钩子函数、自定义事件、事件冒泡、修饰符、过滤器
1、钩子函数
a)全局: Vue.directive('指令名不带v-',函数(el,binding))
el == 使用指令的DOM元素
binding 是个对象 含有传入的 参数(binding.value)
b)局部: 定义在选项里面
directives:{
指令名不带v- : 函数(el,binding){}
}
###右面的函数（函数(el,binding)）可以是对象，这是对象的key（inserted）代表右边指令的发生时期
指令是个函数(简写)，可以是个对象
{
钩子函数（代表一个函数的执行时期）
inserted:fn(el,binding) 绑定指令的元素插入到父节点时调用
bind:fn 指令第一次绑定到元素时调用
update:fn 指令所在的元素的model层的数据，view有更新请求时
componentUpdated:fn 更新完成时
}
简写方式: bind + update
例子
<script src="./js/vue.js"></script>
<!-- <script>
window.onload=function(){
document.getElementById('ipt').focus();
}
</script> -->
</head>
<body >
<div id="app">
<input type="text">
<input type="text" v-focus v-model="ipt">
//指令触发时期
<input type="text">
</div>
<script>
// 钩子函数可以
Vue.directive('focus',function(el,binding){ // bind
// el.focus();由于在虚拟dom中所以不会聚焦
console.log('bind+update')
})
Vue.directive('focus',{
inserted:function(el,binding){
console.log('inserted')
el.focus();
},
bind:function(el,binding){
console.log('bind')
},
update:function(el,binding){
console.log('update')
},
componentUpdated:function(el,binding){
console.log('componentUpdated')
}
})
let vm = new Vue({
el: '#app',
data: {
ipt:''
}
})
</script>
</body>
控制台vm.ipt='123'会显示update和componentUpdated
2、事件
绑定行间事件: <xx v-on:事件名="方法名($event,参数)"
<xx @事件名="方法名($event,参数)"
绑定自定义事件:
定义：vm.$on( '自定义事件名'|['自定义事件名1','自定义事件名2'], 回调(参数) )
销毁：vm.$off( '自定义事件名'|['自定义事件名1','自定义事件名2'], 回调(参数) )
触发: vm.$emit(自定义事件名1,参数)
自定义事件名： 使用 kebab-case 的事件名
场景： 在一个组件实例上手动侦听事件时
------------------------就是在vm里面触发，提前在外面定义好，定义的同时直接销毁-------------------------------------------
<body >
<div id="app">
<input type="button" value="按钮" @click="show">
</div>
<script>
let vm = new Vue({
el: '#app',
methods:{
show(){
//业务逻辑
this.$emit('bulala',32)
}
}
})
vm.$on('bulala',(arg)=>{
console.log('自定义事件调用',arg)
vm.$off('bulala')
});
// vm.$emit('bulala',12)
</script>
</body>
3、事件冒泡
冒泡：默认冒泡
$event ev|event.cacelBubble=true ev.stopPropagation()
@click.stop 修饰符
默认行为:
event|ev.preventDefault(); @事件.prevent
修饰符: keyCode/键名(enter/left/right/up/down/...)
连缀: @事件.修饰符.修饰符 @事件.prevent.stop 排名分先后
例子
<body >
<div id="app">
<div @click="show2" @contextmenu="show2">
<!-- <input type="button" value="按钮" @click="show"> -->
<!-- 事件修饰符, 阻止冒泡 -->
<input type="button" value="按钮" @click.stop="show">
<!-- <input type="button" value="按钮" @contextmenu="show3"> -->
<!-- 事件修饰符, 阻止默认行为 -->
<input type="button" value="按钮" @contextmenu.prevent.stop="show3">
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
methods:{
show(ev){
console.log('btn');
// ev.cancelBubble=true;//阻止冒泡
// ev.stopPropagation()
},
show2(){
console.log('div')
},
show3(ev){
console.log('input')
// ev.preventDefault()
}
}
})
</script>
</body>
4、修饰符
事件|自定义事件修饰符: @click.stop.prevent
capture: 使用事件捕获模式
self: 点到时才触发，不是从内部元素触发的
once： 只会触发一次
passive： onScroll事件 结束时触发一次，不会频繁触发，移动端使用
按键修饰符: @keyup.left鼠标左键
系统键 .ctrl
.ctrl
.alt
.shift
.meta
exact 严格默认 @键盘事件.修饰符1.修饰符2.exact 只有1+2才可触发
鼠标按钮修饰符：
.left
.right
.middle
表单修饰符:
v-model.lazy : 确认时才修改model数据
v-model.number : 提取数子
v-model.trim : 删除前后空格
例子
<body >
<div id="app">
<!-- <input type="text" @keyup.13="send"> -->
<textarea type="text" @keyup.ctrl.enter.exact="send"></textarea>
<!-- <input type="text" @keyup.37="send">↑键 -->
<!-- <input type="text" @keyup.37="send"> -->
<ul>
<li v-for="val of arr">{{val}}</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#app',
data:{
arr:['aa','bb','cc'],
},
methods:{
send(ev){
// if(ev.keyCode==13) this.arr.push(ev.target.value);
this.arr.push(ev.target.value);
ev.target.value='';
}
}
})
</script>
</body>
