V-on指令

V-on

v-on:click/@click

<div id="app">
    <h2>当前计数:{{counter}}</h2>
    <!-- 方法一 -->
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button>
    <!-- 方法二 -->
    <button v-on:click="add">+</button>
    <button @click="sub">-</button>
</div>

<script>
    //声明式编程
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            counter:0
        },
        methods:{
            add:function(){
                this.counter++;
                console.log("add执行");
            },
            sub:function(){
                this.counter--;
                console.log("sub执行");
            }
        }
    })
</script>

v-on参数相关

<div id="app">
    <!-- 在事件定义时,写方法时省略了小括号,但是方法本身是有参数的。这时候,Vue
会默认将浏览器生产的event事件对象作为参数传入到后台 -->
    <button @click="method1()">-</button>
    <button @click="method1">-</button>
    <!-- 方法定义时，我们需要event对象，同时又需要其他参数
在调用方式，如果手动的获取浏览器参数的event对象：$event-->
    <button @click="method1(myq,$event)">-</button>
</div>

<script>
    //声明式编程
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            counter:0
        },
        methods:{
            method1(param){
                console.log("method1："+param);
            },
            method2(param1,param2){
                console.log("method2：" + param+" "+param2);
            }
        }
    })
</script>

v-on 修饰符

.stop修饰符：阻止事件冒泡

<div @click="cl1">
    <button @click="cl2">按钮</button>
</div>
如果想要点击按钮只触发cl2的话就需要阻止事件冒泡，否则点击按钮会触发两个方法。
<div @click="cl1">
    <button @click.stop="cl2">按钮</button>
</div>

.prevent：阻止默认事件

<form action="myUrl">
    <input type="submit" value="提交" @click="method1">
</form>
如果想要在提交表单的时候触发自己的事件就使用@click，但是光这样写还是会触发表单的提交事件。
解决办法就是使用.prevent修饰符
<form action="myUrl">
    <input type="submit" value="提交" @click.prevent="method1">
</form>

.监听某个键帽

<input type="text" @keyup.enter="keyup">
监听回车键

.once：只触发一次回调

<button @click.once="method1">按钮</button>
无论点几次只会触发一次回调