Vue的v-bind属性绑定和v-on事件触发及事件修饰符(.stop、.prevent、.capture、.self、.once)

一、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="http://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="http://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>

---