vue中属性绑定
<a :href="url">属性绑定</a>
在标签属性名前加 : 进行属性数据绑定
a标签href属性成功绑定url数据
vue中事件绑定
<button @click="addfn">事件绑定-{{add}}</button>
data() {
return {
add:1
}
},
methods: {
addfn:function(){
this.add++
}
},
在标签方法名前加 @ 进行事件绑定![a标签click成功绑定add方法]
事件修饰符
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
网友评论