vue事件绑定

为元素添加属性命令: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>

 

posted @ 2024-08-13 22:18  洛飞  阅读(9)  评论(0编辑  收藏  举报