vue学习笔记（二）属性绑定，鼠标事件，事件修饰符，按键修饰符

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>

按键修饰

点击此处进行查看了解