事件处理

事件处理

1. 绑定监听:
   v-on:xxx=“fun”
   @xxx=“fun”
   @xxx=“fun(参数)”

• 默认事件形参: event
• 隐含属性对象: $event

<h2>1. 绑定监听</h2>
  <button @click="test1">test1</button>
  <button @click="test2('abc')">test2</button>
  <button @click="test3('atguigu', $event)">test3</button>

test1 (e) {
  alert(e.target.innerText) //text1
},
test2 (msg) {
  alert(msg)  //abc
},
//前两者结合 这时用隐含属性对象$event 没有参数就使用默认事件形参
test3 (msg, event) {
  alert(msg + '---' + event.target.innerHTML) //atguigu ---test3
     },

2. 事件修饰符:

• .prevent : 阻止事件的默认行为 event.preventDefault() eg:比如a标签默认点击后就会跳转 这时不想跳转页面就可以使用
• .stop : 停止事件冒泡 event.stopPropagation() eg:father and son(div)
• .once：只触发一次 参考官网

<h2>2. 事件修饰符</h2>
 <a href="http://www.atguigu.com" @click.prevent="test4">去学习</a>

  <div style="width: 200px;height: 200px;background: red;" @click="test5">
      <div style="width: 100px;height: 100px;background: blue;" @click.stop="test6"></div>
  </div>
  <p @click.once="test6">xxx</p>

3. 按键修饰符

• .keycode : 操作的是某个keycode值的健
• .enter : 操作的是enter键
  实现一个在输入框内输入内容点击enter弹出内容

  <h2>3. 按键修饰符</h2>
  <input type="text" v-model="msg" @keyup.13="test7">
  <input type="text" v-model="msg" @keyup.enter="test7">

//省略vue。。
data: {
      msg: ''
},
test7 (event) {
  // if (event.keyCode===13) {
    alert(this.msg)
  // }
}