a1:v-bind:属性绑定
a2:v-on:事件绑定
a3:v-model:数据双向绑定,一般用于表单元素
- v-bind:title,绑定title属性,简写: 【:title='title_info'】,绑定多个:【:class=["red", isBig?'big':'' ],绑定red class类以及判断 vue实力上的isBig是否为true,为true就加上big类,FALSE就不加】
- v-on:click,绑定点击事件,简写:【@click='func'】
- 事件可以链式的连接修饰符====> @click.stop.once=‘func’
事件修饰符【 并且这些修饰符是可以串联使用的】
-
.stop:阻止冒泡
-
.prevent:阻止默认事件[例如 <a>跳转/表单的默认submit提交]这种默认事件都可以用.prevent阻止
-
.capture:事件监听时的事件捕获【】
-
.self:事件只在自己身上触发,不包过子元素,父元素
-
.once:事件只触发一次
demo:
1 <div id="app"> 2 <div style="height:100px;background-color: aqua;" @click.capture='divclick'> 3 <input type="button" value="点我" @click ='btnclick'> 4 <!-- 默认 点击事件会从子元素向父元素传递(冒泡【如果父元素有点击事件的话】), 5 如果在子元素上绑定事件修饰符 .stop可以组织默认冒泡事件【从里到外】 6 如果在btn父级div上添加.capture修饰符,那么点击btn就不会是冒泡那样先执行子元素,在父元素,而是先执行 7 带有prevent修饰符的click事件【也就是从外到里】 8 --> 9 </div> 10 11 </div>
let vm = new Vue({//确保引入了vue.js el:'#app', data:{}, methods:{ divclick () { console.log('点击了div') }, btnclick () { console.log('点击了btn') }, aclick () { console.log('点击了超链接a') } } })