vue事件绑定

标签：vue fn1 绑定 事件 按钮 简写

为元素添加属性命令：v-on:事件名=“方法名”， 而方法则需要再Vue配置里面的methods属性里定义。 主要的事件名有click、dbclick，mouseover，mouseout，keydown，keypress，blur，focus

<button v-on:click="fn1">我是按钮2--vue事件绑定</button>

这个fn1事件函数，需要再methods中进行定义。

        let vm = new Vue({
            el : "#app",
            data : {
                msg : 'hello vue',
            },
            methods: {
                fn1() {
                    console.log('按钮2的事件函数触发了');
                }
            }
        })

如果fn1函数想使用vm中data的数据，那么需要加上this，如下：

fn1() {
     console.log('按钮2的事件函数触发了',this.msg);
}

另：绑定属性v-bind简写

v-bind:HTML标签的属性值="动态值"    简写 :HTML标签的属性值="动态值"，例：

<button v-bind:title="msg">111</button>
缩写为
<button :title="msg">111</button>

v-on事件简写

v-on:事件名="方法名"  简写 @事件名="方法名"

<button v-on:click="fn1">我是按钮2--vue事件绑定</button>
简写
<button @:click="fn1">我是按钮2--vue事件绑定</button>

 

标签：vue,fn1,绑定,事件,按钮,简写
From： https://www.cnblogs.com/yansunda/p/18357820