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

Love The Way You Lie 2023-05-22 13:29 162阅读 0赞

## 一、v-bind ##

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

此时 如果

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

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

这样就可以了

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

例如：

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

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

--------------------

## 二、v-on ##

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

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

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

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

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

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

--------------------

## 三、事件修饰符 ##

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

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

#### .stop ####

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

--------------------

#### .prevent ####

<a href="http://www.baidu.com" @click.prevent="linkClick">百度</a>

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

--------------------

#### .capture ####

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

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

--------------------

#### .self ####

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

--------------------

#### .once ####

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

<a href="http://www.baidu.com" @click.prevent.once="linkClick">百度</a>

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

--------------------

### 关于.stop和.self的区别 ###

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

--------------------

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 3.Vue—绑定事件、事件修饰符、键盘事件（详细）

相关 vue事件绑定

相关 Vue学习之旅Part2：Vue的v-bind属性绑定和v-on事件触发及事件修饰符(.stop、.prevent、.capture、.self、.once)

相关 Vue 事件绑定

相关 vue事件修饰符+v-model双向绑定

相关 vue基础（1）——数据绑定，事件，事件修饰符

相关 vue(2)事件绑定

相关 vue 事件绑定

相关 Vue之绑定事件

相关 Vue学习之事件修饰符