事件处理
事件的基本使用：
1. 使用v-on:xxx 或 @xxx绑定事件，其中xxx是事件名
2. 事件的回调需要配置在methods对象中，最终会出现在vm上
3. methods中配置的函数，不要使用箭头函数，否则this就不是vm了
4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象
5. @click="demo" 和 @click = "demo($event)"效果一样，但后者可以传参
<body>
<div id="root">
<h1>你好，{{name}}</h1>
<button v-on:click="Tip">点我提示信息</button>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
name:"选",
},
methods:{
Tip(){
alert("你最好有事！")
}
}
})
</script>
</body>
事件的修饰符
Vue中的事件修饰符：
1. prevent:阻止默认事件（常用）
2. stop ： 阻止事件冒泡（常用）
3. once : 事件只触发一次（常用）
4. capture ： 使用事件的捕获模式
5. self : 只有event.target 是当前操作元素时，才会触发该事件
6. passive: 事件的默认行为立即执行，无需等待事件回调执行完成，（手机端常用）
事件的修饰符可以连着写（@click.prevent.stop="方法"）
<body>
<!--
Vue中的事件修饰符：
1. prevent:阻止默认事件（常用）
2. stop ： 阻止事件冒泡（常用）
3. once : 事件只触发一次（常用）
4. capture ： 使用事件的捕获模式
5. self : 只有event.target 是当前操作元素时，才会触发该事件
6. passive: 事件的默认行为立即执行，无需等待事件回调执行完成，（手机端常用）
事件的修饰符可以连着写（@click.prevent.stop="方法"）
-->
<div id="root">
<h1>你好，{{name}}</h1>
<!-- 1. prevent:阻止默认事件（常用） 在a标签中可以阻止页面跳转 -->
<a href="https://www.taobao.com" @click.prevent="showinfo">点击提示信息</a>
<!-- 2. stop ： 阻止事件冒泡（常用） -->
<div id="box" @click="showinfo">
<button id="btn" @click.stop="showinfo"> 点我提示信息</button>
</div>
<!-- 3. once : 事件只触发一次（常用） -->
<button @click.once="showinfo">点我提示信息</button>
<!-- 4. capture ： 使用事件的捕获模式 (先执行外面的事件)-->
<div id="box1" @click.capture="showinfo1">
<button id="btn1" @click="showinfo">点我提示信息</button>
</div>
<!-- 5. self : 只有event.target 是当前操作元素时，才会触发该事件 有阻止冒泡的效果-->
<div id="box1" @click.self="showinfo1">
<button id="btn1" @click="showinfo">self</button>
</div>
<!-- 6. passive: 事件的默认行为立即执行，无需等待事件回调执行完成，（手机端常用） -->
<ul id="list" @wheel.passive="show">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
name:"选",
},
methods:{
showinfo(){
alert("你最好有事！(里)");
},
showinfo1(){
alert("你被捕获了（外）")
},
show(){
for (let i = 0; i < 100000; i++) {
console.log("i");
}
}
}
})
</script>
</body>
键盘事件
1. Vue中常用的按键别名：
回车=> enter
删除=> delete (获取"删除"退格"键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 =>down
左 =>left
右 => right
2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但要注意转为keaba-case(短横线命名)
3. 系统修饰符（用法特殊）：ctrl .alt.shift.win (可以在后面添加按键，组合使用，只有系统按键才能组合)
1.配合keyup使用： 按下修饰键的同时，再按下其他键，随后释放其他键，事件才触发
2.配合keydown使用：正常触发事件
4. 也可以使用keyCode去指定具体按键（不推荐）
5.Vue.config.keyCodes.自定义键名 = 键码（keyCode) 可以去定制按键别名(不推荐)
<body>
<div id="root">
<h1>你好，{{name}}</h1>
<input type="text" placeholder="请输入" @keydown.ctrl.y="keyevent">
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
name:"彭可选",
},
methods:{
keyevent(event){
console.log(event.target.value)
}
}
})
</script>
</body>
