vue修饰符（vuesync修饰符）

本篇文章给大家谈谈vue修饰符，以及vuesync修饰符对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、Vue事件修饰符（三）.self连缀
• 2、Vue 中的 .sync 修饰符有什么用
• 3、Vue事件修饰符（四）.native .once
• 4、Vue中的事件修饰符 键盘事件 监视属性watch 深度监视 简写
• 5、以下是Vue常用的修饰符的是（）。
• 6、vue事件修饰符和键盘事件

Vue事件修饰符（三）.self连缀

        Vue提供了事件绑定的语法糖，我们在标签中可直接使用形如v-on:click，@click，@focus的形式绑定事件监听器，并且可以使用修饰符对事件进行option设置。本次解释 self 修饰符以及self连缀的情况。

        self 的作用是，只在目标Dom是绑定了动作的Dom才触发。栗子如下图。我给2号图层的捕获监听与3号图层的冒泡监听加上self修饰符。当我点击最里层的a标签时，控制台纤历行会输出 1 3 4 4 2 1 。 因为我们本次的目标Dom是4号a标签，所以我们绑定在2号与3号的监听在有self修饰时不触发。

        同理当我们点击3号图层时，控制台会输出 1 3 3 2 1 。 这时，3号是目标Dom所以@click.self="log(3)"触发了。

        vue中事件修饰符时可以连缀的，修饰符的顺序有时会影响最终结果。例如prevent与self组合。如下图2,图3。prevent.self与self.prevent产生的结果是有差距的。self写在prevent前时，prevent会被self影响，只有我们直接点击这个目标时才会触发prevent。点击5号通过冒泡传递过来时，self拦截住了监听，后面的prevent也一起失效了。

        .stop也会因为连缀在self可能失效烂高。

前端豆知识，很小却毁哗有用

Vue 中的 .sync 修饰符有什么用

Vue 中的 .sync 修饰符的功能是 : 当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。

我们迹帆通过一个场景来辅助理解一下。姿仿雹

Child.vue

效果展示 :

等价于

通过查看Vue.js官方文档 : .sync 修饰符 了解到。从 2.3.0 起重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会大吵被扩展为一个自动更新父组件属性的 v-on 监听器。

[img]

Vue事件修饰符（四）.native .once

        Vue提供了事件绑定的语法糖，我们在标签中可直接使用形如v-on:click，@click，@focus的形式绑定事件监听器，纤历行并且可以使用修饰符对事件进行option设置。本次解释 once 修饰符以及 native 修饰符的情况。

        绑定once的监听器只会触发一次，在第一次触发后该监听器会被remove掉。很简单不多做解释了。

        我们毁哗可以称native为原型绑定。只有 使用vue组件时 我们会用到这个修饰符。当我们在组件上绑定监听时，我们绑定的是组件定义的监听。以element框架为例，el-input是element提供的组件。它在浏览器解析后是这样的。我们写el-input @click=""时，这click绑定的烂高是element给el-input定义的方法。我们其实把click绑定在了

div[class="el-input"]

上了。与直接在input上绑定是不同的，如果element没给el-input定义click ( this.$emit('click'),function)组件需要这种方式才能定义click监听 )，那么我们这次绑定是无效的。

当我们加上native词缀，el-input @click.native=""这样，我们就把click事件直接绑定在了原型上了，也就是绑定在

input[class="el-input__inner"]

上了。这是我们绑定的就和input标签的原生监听器是一样的。所以当我们使 用组件时需要经常使用原型绑定 。

前端豆知识，很小却有用

Vue中的事件修饰符 键盘事件 监视属性watch 深度监视 简写

 1.Prevent:阻烂信止默认事件(常用)

    2.stop:阻止事件冒泡

    3.once:事件只触发一次

    4.capture:使用事件的捕获模式

    5.self:只有event.target是当前操作的元素是才触冲消发事件

    6.passive:事件的默认行为立即执行，无需等待事件回调函数执行完毕

 2.Vue未提供别名的按键 可以使用按键原始的key值去绑定 但注意要转化为kebab-case(短横线命名)

 3.系统修饰键 ctrl alt shift meta

     (1).配合keyup使用 按下修饰键的同时 再按下其他键 随后释放其他键 事件才被触发

     (2).配合keydown使用正常触发事件

     4.也可以使用 keyCode去指定具体的按键 (不推荐)

     5.Vue.confing.keyCodes.自定义键名 = 键码  可以去定制按键名

 1.当监视的属性变化时 回调函数自动调用 进行相关操作

        2.监视属性的属性必须存在 才能进行监视

        3.监视的两种写法

        (1)new Vue时传入watch配置

        (2)通过vm.$watch监视

 (1).Vue中的watch默认不检测对象内部值的改变(一层)

        (2)配置deep:true可以检测对象内部值改变(多层)

        备注:

        (1)Vue自散历知身可以检测对象内部值的改变但Vue提供的watch默认不可以

        (2)使用watch时根据数据的具体结构 决定是否采用深度监视

以下是Vue常用的修饰符的是（）。

以下是Vue常用的修饰族脊符的是（）穗信。

A.number

B.trim

C.enter

D.last

正确答案：兆族渗ABC

vue事件修饰符和键盘事件

修饰符

vue.js为v-on提供了多个修饰符，方便我们处理一些DOM事件的细节，并且修饰符可以串联使用。主要的修饰符如下：

. stop  相当于js中的event.stopPropagation(),它是敏运用来阻止冒泡的；

.prevent 相当于js中event.preventDefault(),它是用来阻止默认行为的；

.capture  捕获事件和冒泡事件(默认)是两种事件流,事件捕获是从document到触发事件的那个元素;冒泡事件是从下向上的触发事件；

.self  只有点击当前元素时候，才会触发事件处理函数

.once  只会触发一次

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

div v-on:click.self="doThat".../div

a v-on:click.once="doThis"/a

除了事件修饰逗者符之外，v-on还提供了按键修饰符，方便我们监听键盘事件中的按键。例如：

input v-on:keyup.13="submitFn" / 桥指梁监听input的输入，当输入回车时触发submitFn函数（回车的keycode值为13），用于处理常见的用户输入完直接按回车提交。

vue.js给一些常用的按键名提供了别称，这样就省去了一些记keyCode的事件。常用按键码别名为：

need-to-insert-img

刚才的input v-on:keyup.13="submitFn" /可以改为

input v-on:keyup.enter="submitFn" /

关于vue修饰符和vuesync修饰符的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。