一、 事件的处理
1、事件的基本使用：
1、使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
2、事件的回调需要配置在methods对象中，最终会在vm上
3、methods中的配置的函数，不要用箭头函数，否则this就不是vm了
4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
5、@click='demo' 和 @click="demo($event)" 效果一致，但后者可以传参
<div id="root">
<!-- View -->
<h1>名字：{{name}}</h1>
<button v-on:click="showInfo">点我提示信息(不传参)</button>
<button @click="showInfo1(66,$event)">点我提示信息1(传参)</button>
</div>
<script>
Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
//创建Vue实例
const vm = new Vue({ //ViewModel
el: '#root',
data: {
name: '张三', //Model
address: '西安'
},
methods: {
showInfo(event) {
console.log(event.target.innerText);
console.log(this); //此处的this是vm
// alert(111);
},
showInfo1(number,event) {
// alert(2222);
console.log(number,event);
},
}
});
console.log(vm);
</script>
2、事件的修饰符
Vue中的事件修饰符
1、prevent : 阻止默认事件（常用）
2、stop : 阻止事件冒泡（常用）
3、once : 事件只触发一次（常用）
4、capture : 使用事件的捕获模式
5、self : 只有event.target是当前操作的元素时才触发事件
6、passive : 事件的默认行为立即执行，无需等待事件回调执行完毕
<div id="root">
<!-- View -->
<h1>名字：{{name}}</h1>
<!-- 阻止默认事件 -->
<a href="http://atguigu.com" @click.prevent="showInfo">点我提示信息</a>
<!-- 阻止事件冒泡 -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
</div>
<!-- 事件只触发一次 -->
<div class="demo1">
<button @click.once="showInfo">点我提示信息</button>
</div>
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- 只有event.target是当前操作的元素时，才触发事件 -->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>
<!--
事件的默认行为立即执行，无需等待事件回调执行完毕
@scroll
@wheel.passive 移动端常用 做一些优化
-->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
//创建Vue实例
const vm = new Vue({ //ViewModel
el: '#root',
data: {
name: "张三", //Model
address: '西安'
},
methods: {
showInfo(e) {
alert(111)
// console.log(e.target)
},
showMsg(msg) {
console.log(msg);
},
demo() {
console.log('@');
},
}
});
console.log(vm);
</script>
3、键盘事件
可以通过e.key 来查看键盘健名
console.log(e.key,e.keyCode);
1、Vue中常用的按键别名
回车 => enter
删除 => delete (捕获删除和退格键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
2、Vue未提供别名的按键，可以使用按键原始的key值来绑定，但注意要转化为 caps-lock(短横线命名)
3、系统修饰符（用法特殊） ：ctrl、alt、shift、meta(win健)
!! 可以配合使用 .keyup.ctrl.y
(1)、配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
(2)、配合keydown使用，正常触发事件
4、也可以使用keyCode去指定具体的按键 (不推荐)
5、Vue.config.keyCodes.自定义键名 = 键码。 可以定制按键别名
<div id="root">
<h1>{{name}}你好啊</h1>
<!-- 这是自己定义的一个键名(hiuche) -->
<input @keyup.hiuche="showInfo" type="text" placeholder="按下回车提示输入">
</div>
<script>
Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
//自己定义一个别名按键
Vue.config.keyCodes.hiuche = 13;
//创建Vue实例
const vm = new Vue({ //ViewModel
el: '#root',
data: {
name: '张三', //Model
address: '西安'
},
methods: {
showInfo(e) {
// if(e.keyCode != 13) return
console.log(e.target.value)
// 通过e.key 来查看键盘健名
console.log(e.key,e.keyCode);
},
}
});
console.log(vm);
</script>
