v-on精炼

v-on的介绍

• 在Vue中，常使用v-on指令用于监听事件的发生，v-on指令就类似于JavaScript中的addEvelistener()方法

v-on的基本使用

<div id="app">
    <h2>{{counter}}</h2>
    <!-- 监听一个click鼠标点击事件 -->
    <button v-on:click="increment">+</button>
    <!-- v-on:的语法糖写法@ -->
    <button @click="decrement">-</button>
</div>

<script type="text/javascript">
    const app = new Vue({
    	el: '#app',
    	data: {
    		counter: 0
    	},
    	methods: {
    		increment() { 
    			this.counter++;
    		},
    		decrement() {
    			this.counter--;
    		}
        }
    })
</script>

v-on参数传递问题

• 当通过methods中定义方法，以供@click调用时，需要注意参数问题：
  • 如果该方法不需要额外参数，可以省略方法后的()
  • 默认会将原生事件event作为额外参数传递进去

<button @click="btn2Click">按钮2</button>
<button @click="btn3Click(123)">按钮3</button>

<script type="text/javascript">
    const app = new Vue({
        methods: {
			btn2Click(event) {
    			console.log('..........', event); //MouseEvent {...}
			},
    		btn3Click(a,event) {
        		console.log('..........', a, event); //123,MouseEvent {...}
    		},
            btn3Click(a) {
        		console.log('..........', a); //123
    		}
        }
    })
</script>

v-on修饰符

• Vue为我们提供了修饰符，这些修饰符可以帮助我们更方便的处理一些事件

①.stop

• 阻止冒泡
  • 事件默认会由内向外依次触发。绑定.stop修饰符前，点击按钮后控制台会依次输出btnClick、keyUp、divClick，绑定.stop修饰符后，会阻止冒泡，因此控制台只会输出btnClick

<div id="app" @click="divClick" :style="{height:'400px', '400px', border:'1px solid green'}">
    <!-- 当点击按钮时，不会触发div的事件 -->
    <div @click="keyup" :style="{height:'200px', '200px', border:'1px solid red'}">
        <button @click.stop="btnClick">按钮</button>
    </div>
</div>

<script type="text/javascript">
    const app = new Vue({
		methods: {
            divClick(){
                console.log('divClick');
            },
            btnClick(){
                console.log('btnClick');
            },
            submitClick(){
                console.log('submitClick');
            },
            keyup(){
                console.log('keyUp');
            }
        }
    })
</script> 

②.prevent

• 阻止浏览器默认行为
  • 当点击提交按钮时，浏览器会默认将数据提交到服务器，绑定修饰符prevent后可以阻止这个默认行为，数据便能正常输出到控制台

<div>
    <form action="baidu">
        <input type="submit" value="提交" @click.prevent="submitClick"/>
    </form>
</div>

③.{keyCode | keyAlias}

• 监听键盘的键帽，当特定按键按下时触发

<!-- 当按下回车键才会触发keyUp事件 -->
<input type="text" @keyup.enter="keyUp"/>
<input type="text" @keyup.13="keyUp"/>

④ .once

• 只会触发一次回调

<!-- btn2Click事件只会触发一次 -->
<button @click.once="btn2Click">按钮2</button>

⑤.native

• 监听组件根元素的原生事件，可以使组件同样可以监听事件

<!-- 点击组件back-top时也会触发backClick事件 -->
<back-top @click.native="backClick"></back-top>