vue基础之v-on修饰符

v-on修饰符。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

示例：
1.stop 调用event.stopPropagation阻止冒泡

<div id="app">
    <div @click="parentClick">
      aaaa
      <button @click.stop="childClick">点击我</button>
    </div>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: '欢迎使用Vue.js'
      },
      methods: {
	      parentClick() {
          	console.log('我是父级div点击事件');
       	 }
      }
    })
  </script>

2.prevent 调用event.preventDefault阻止默认行为

<div id="app">
    <form action="baidu">
      <input type="submit" @click.prevent="submit" value="提交">
    </form>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: '欢迎使用Vue.js'
      },
      methods: {
	      submit() {
	        console.log('表单提交事件');
        },
      }
    })
  </script>

3.监听输入框的键帽

<div id="app">
    <form action="">
    	//监听键盘抬起的事件
      <input type="text" @keyup="keyUp">
		
		//监听键盘按下的事件
      <input type="text" @keydown="keyDown">
      
		//监听键盘回车
      <input type="text" @keyup.enter="enter">
      <input type="text" @keyup.13="enterThirteen">
    </form>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: '欢迎使用Vue.js'
      },
      methods: {
		     keyUp() {
			      console.log('keyup');
	        },
	        keyDown() {
		      console.log('keydown');
	        },
	        enter() {
		      console.log('监听回车键');
	        },
	        enterThirteen() {
		      console.log('监听13回车键');
          },
      }
    })
  </script>

4.once，让事件只触发一次

<div id="app">
    <button @click.once="onceClick">点击只触发一次</button>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: '欢迎使用Vue.js'
      },
      methods: {
	      onceClick() {
		    console.log('只触发一次回调');
       	 }
      }
    })
  </script>

5.-{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

6。其他的还有：

.native - 监听组件根元素的原生事件。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器