Vue学习之旅Part2：Vue的v-bind属性绑定和v-on事件触发及事件修饰符(.stop、.prevent、.capture、.self、.once)vue,dom,js"✧treasure mountain✧"-

一、v-bind

先来一个常见场景：
在vue里定义了个名为mytitle的属性

<script> var vm=new Vue({         el:"#app",         data:{             mytitle:"This is a title!" }, }) </script> 

此时 如果

<input type="button" value="按钮" title="mytitle"> 

是不行的
此时 只会将mytitle当作普通字符串 并不会去vue实例中寻找对应的属性

此时 可用v-bind加在属性前面 绑定一个属性 标明该属性是一个变量
这样 在解析的时候 会自动去vue实例的data里寻找对应的变量

<input type="button" value="按钮" v-bind:title="mytitle"> 

这样就可以了

使用v-bind的时候 还可在属性名前后加上js表达式 将解析后的结果输出

例如：

<input type="button" value="按钮" v-bind:title="'123'+mytitle+'321'"> 

v-bind还可简写为冒号[:]

: 就等同于 v-bind:
直接在冒号后跟着要绑定的属性即可

<input type="button" value="按钮" :title="'123'+mytitle+'321'"> 

二、v-on

在以往 若要触发事件 在DOM中是这样的：

<input type="button" value="按钮" id="btn"> 

document.getElementById("btn").onclick=function() { alert("Hello!") } 

但Vue不提倡DOM操作
Vue提供了v-on 类似于JQuery的on()方法
v-on可以绑定事件 后面跟着的是要触发的事件类型：

<input type="button" value="按钮" v-on:click="sayHello"> 

<script> var vm=new Vue({              el:"#app",              data:{ },              methods:{ // 在methods属性中定义了当前Vue实例所有可用的方法                  sayHello:function() { alert("Hello!") } } }) </script> 

当然 除了click事件之外 其它常用事件都可以定义：

<input type="button" value="按钮" v-on:mouseover="sayHello"> 

v-on:也有缩写 其缩写为@

直接在@后跟着事件类型即可

<input type="button" value="按钮1" @click="sayHello"> <input type="button" value="按钮2" @mouseover="sayHello"> 

三、事件修饰符

v-on提供了一些事件修饰符：

• .stop 阻止冒泡
• .prevent 阻止默认事件
• .capture 添加事件侦听器时使用事件捕获模式
• .self 只当事件在该元素本身时触发时才会触发回调
• .once 事件只触发一次

.stop

在触发冒泡的标签上添加.stop修饰符即可：
这样 即可阻止该事件的冒泡

<div id="app"> <div class="inner" @click="divHandler"> <!-- .stop阻止冒泡 --> <input type="button" value="click me" @click.stop="btnHandler"> </div> </div> 

.prevent

<!-- .prevent阻止默认行为 --> <a href="https://www.baidu.com" @click.prevent="linkClick">百度</a> 

能阻止默认事件 例如a标签的href 表单的submit等

.capture

添加事件侦听器默认采用的是冒泡模式 在添加.capture后使用捕获模式
即 默认从里到外 添加该修饰符后 变为从外到里
注：该修饰符是加在外层div上的

<!-- .capture事件捕获模式 --> <div class="inner" @click.capture="divHandler"> <input type="button" value="click me" @click="btnHandler"> </div> 

.self

只有事件是元素本身触发时才回调
除此之外都不会被触发
该修饰符加在要实现此效果的元素标签上

<div class="inner" @click.self="divHandler"> <input type="button" value="click me" @click="btnHandler"> </div> 

.once

只触发一次事件处理函数
(事件处理函数可以串联)

<!-- .once该事件只会被触发一次 --> <a href="https://www.baidu.com" @click.prevent.once="linkClick">百度</a> 

因此 上述代码的效果是 第一次a标签是不会跳转的(因为加了.prevent 阻止默认行为) 但在除了第一次之外都会正常跳转(因为加了.once)

关于.stop和.self的区别

.stop是阻止所有的冒泡
而.self只是阻止当前元素上的冒泡行为 并不阻止它里面或外面的元素的冒泡

<div class="outer" @click="divoHandler"> <div class="inner" @click.self="divHandler"> <input type="button" value="click me" @click.stop="btnHandler"> </div> </div>