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>