Vue系列(五)之常用指令v-on

缩写

v-on指令的缩写为：@，通常缩写用的较多。

用法

v-on api

参数是event事件，v-on:click="xx"或@click=“xx”；v-on:change="xx"或@change="xx"等

<button @click="click">click</button>
<select @change="change">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
</select>

方法写在Vue实例选项的methods对象中。

var vm = new Vue({
    el: '#app',
    methods: {
        click() {
            console.log('===click')
        },
        change(e){
            console.log(e.target.value)
        }
    }
});

传参

click事件可以传参，change和input事件有默认的参数。

<button @click.stop="clickSon('666')">click</button>

clickSon(param){
	console.log('====clickSon',param)
},

修饰符

stop

添加stop修饰符可以阻止冒泡。来看一个例子：

<div style="width: 100px;height: 100px;background-color: red"
         @click="clickParent">
    <button @click="clickSon">click</button>
</div>

methods:{
	clickParent(){
      console.log('===clickParent')
    },
    clickSon(){
        console.log('====clickSon')
    }
}

父和子都有点击事件,由于事件的冒泡机制，点击子元素会同时触发子元素和父元素的点击事件：

这显然不是我们想要的，添加.stop修饰符即可解决问题：

prevent

阻止默认行为，例如阻止a标签的跳转行为：

<a href="https://www.baidu.com" @click.prevent="aClick">baidu</a>

aClick(){
   console.log('aClick')
}

可以看到log打印了出来，但是a标签没有跳转到百度。

其它

常用的修饰符也就这两个了，到目前为止，我也只用过这两个，至于其它的修饰符，读者可以参考官方文档