【Day4.Vue中事件的基本使用】

1.事件的基本使用：

（1）使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

（2）事件的回调需要配置在methods对象中，最终会在vm上；

（3）methods中配置的函数，不要用箭头函数！否则this就不是vm了；

（4）methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；

（5）事件的回调传参需要用到事件对象时只能用:$event；例：@click='changeStyle($event,a)'。

代码：

	<div id="root">
			<button @click="showInfo1">点我提示信息1（不传参）</button>
			<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
		</div>
	</body>

	<script type="text/javascript">
		const vm = new Vue({
			el:'#root',
			data:{
				name:'林黛玉',
			},
			methods:{
				// showInfo1(event){
				// 	// console.log(event.target.innerText)
				// 	// console.log(this) //此处的this是vm
				// 	alert('同学你好！')
				// },
				showInfo1:(e)=> {//此处的this是window
						console.log(this)
					},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！！')
				}
			}
		})
	</script>

2.事件修饰符：

        （1）阻止默认事件（prevent）：

        （2）阻止事件冒泡（stop）：

        （3）事件只触发一次（once）：

        （4）使用事件的捕获模式（capture）：

        （5）只有event.target是当前操作的元素时才触发事件（self）；

        （6）事件的默认行为立即执行，无需等待事件回调执行完毕（passive）：

代码演示：

<div id="root">
			<!-- 阻止默认事件（常用） -->
			<a href="http://mp.csdn.net" @click.prevent="showInfo">点我提示信息</a>

			<!-- 阻止事件冒泡（常用） -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
				<!-- 修饰符可以连续写 -->
				<!-- <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
			</div>

			<!-- 事件只触发一次（常用） -->
			<button @click.once="showInfo">点我提示信息</button>

			<!-- 使用事件的捕获模式 -->
			<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>

			<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

		</div>
	</body>

	<script type="text/javascript">
		new Vue({
			el:'#root',
			data:{
				name:'庐州林黛玉'
			},
			methods:{
				showInfo(e){
					alert('同学你好！')
					// console.log(e.target)
				},
				showMsg(msg){
					console.log(msg)
				},
				
			}
		})
	</script>

3.键盘事件：

        （1）Vue中常用的按键别名：

                            回车 => enter

                            删除 => delete (捕获“删除”和“退格”键)

                            退出 => esc

                            空格 => space

                            换行 => tab (特殊，必须配合keydown去使用)

                            上 => up

                            下 => down

                            左 => left

                            右 => right

        （2）Vue中未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-                case（短横线命名）

        （3）系统修饰键（用法特殊）：ctrl、alt、shift、meta。

              配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

               配合keydown使用：正常触发事件。

       （4）Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名。

代码：

<div id="root">
			<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.keyCodes.huiche = 13； //自定义了一个别名按键

		new Vue({
			el:'#root',
			data:{
				
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</script>