vue常见修饰符（vue的修饰符async）

今天给各位分享vue常见修饰符的知识，其中也会对vue的修饰符async进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、Vue事件修饰符（四）.native .once
• 2、Vue事件修饰符（三）.self连缀
• 3、vue的sync修饰符
• 4、这7个 Vue 模式，可能你经常用！但现在看对你很有帮助
• 5、vue事件修饰符和键盘事件
• 6、入门：Vue六大常用内置指令

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事件修饰符（三）.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修饰符

1、由于vue2xx父子组件传递数据是单向传递

2、子组件不能修改props中父组件传递的数据

3、为了能修改父组件的数据，一般用用事件的方式，如this.$emit('update:xxx',yyy),（其中xxx就是props中定义的属性，yyy为修改的值），然后父组件定义子组件的事件@update:xxx="func",在func中修改父组件要传递给子组件的数据

4、而vue的sync修饰符，它省略了父组件的事件的注册，能使子组件修改props的属性，其实它是一个语法糖，本质上没有改变父子组件数据单向传递

5、举例：

定义子组件son.vue的内容：

定义父组件father.vue的内容：

6、说明：

从父组件的文本框中输入数据，子组件的的msg和文本框跟着变化，而从子组件的

文本框输入数据，同样父组件也变化

7、结论：

vue的sync只是帮助使用者省略事件的注册，是一个语法糖，并不改变父子数据流向

这7个 Vue 模式，可能你经常用！但现在看对你很有帮助

说实话，阅读文档并不是我们大多数人喜欢的事情，但是当使用像Vue这样不断发展的现代前端框架时，每一个新版本都会有所变化，我们很有可爱已经错过了一些后来推出的新且好用的功能。

今天，刷碗智带大家来看看那些有趣但不那么流行的功能。记住，所有这些都是官方Vue文档的一部分。

在大型项目中，我们可能需要将组件分成小块，只有在需要时才从服务器上加载。为了更容易做到这一点，Vue允许我们将组件定义为一个工厂函数，异步地解析组件定义。Vue只会在组件需要渲染的时候触发工厂函数，并把结果缓存起来以备后面的重新渲染。2.3版的新内容是，异步组件工厂还可以返回以下格式的对象。

使用这种方法，我们有额外的选项，包括加载和错误状态、组件获取的延迟和超时。

渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，我们可以在根元素上添加 v-once attribute 以确保这些内容只计算一次然后缓存起来，就像这样：

组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事：

当你使用 Vue.component 全局注册一个组件时，这个全局的 ID 会自动设置为该组件的 name 选项。

稍有不慎，递归组件就可能导致无限循环：

类似上述的组件将会导致 “max stack size exceeded” 错误，所以请确保递归调用是条件性的 (例如使用一个最终会得到 false 的 v-if )。

当 inline-template 这个特殊的 attribute 出现在一个子组件上时，这个组件将会使用其里面的内容作为模板，而不是将其作为被分发的内容。这使得模板的撰写工作更加灵活。

内联模板需要定义在 Vue 所属的 DOM 元素内。

指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value" 中， argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。

例如你想要创建一个自定义指令，用来通过固定布局将元素固定在页面上。我们可以像这样创建一个通过指令值来更新竖直位置像素值的自定义指令：

对于 .passive 、 .capture 和 .once 这些事件修饰符，Vue 提供了相应的前缀可以用于 on：

修饰符前缀 .passive .capture! .once~ .capture.once 或.once.capture~!

例如：

对于所有其它的修饰符，私有前缀都不是必须的，因为你可以在事件处理函数中使用事件方法：

修饰符处理函数中的等价操作 .stopevent.stopPropagation() .preventevent.preventDefault() .selfif (event.target !== event.currentTarget) return 按键：.enter, .13if (event.keyCode !== 13) return (对于别的按键修饰符来说，可将 13 改为另一个按键码) 修饰键：.ctrl, .alt, .shift, .metaif (!event.ctrlKey) return (将 ctrlKey 分别修改为 altKey、shiftKey 或者 metaKey)

在Vue中，有几种方法可以让两个组件进行通信，所有这些方法都有优点和缺点。 2.2 版本中引入的一种新方法是使用 Provide/Inject 的依赖注入。

这对选项一起使用，允许一个祖先组件作为其所有后代的依赖注入器，无论组件层次有多深，只要它们在同一个父链上。如果你熟悉React，这与React的上下文功能非常相似。

今天就到这了，就这？

~完，我是刷碗智，疫情只能在家 LoL 了。

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六大常用内置指令

指令（Directives），是vue为开发者提供的 模板语法 ，用于辅助开发者渲染页面的基本结构

所用到的数据定义在实例的 data 中，事件定义在实例的 methods 中

只能渲染纯文本内容， 会覆盖 标签内部原本的内容

只能渲染纯文本内容， 不会覆盖 标签内部原本的内容

能将带标签的字符串渲染成html内容， 会覆盖 标签内部原本的内容

为元素的属性 动态 绑定属性值

注意： 插值表达式 和 v-bind 还支持javascript表达式的运算

为元素绑定事件

只要是事件，就能使用的修饰符，以下列举5个常用的

只能在触发键盘事件时，使用的修饰符，以下列举2个常用的

快速获取表单数据（只应用于表单元素，如：input、textarea、select）

只能给v-model使用的修饰符

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态添加/移除display：none样式 ，一般用于需频繁切换

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态创建/移除元素 ，一般用于默认不展示且展示较少

配合 v-if 指令一起使用，否则将不会被识别

基于一个数组来循环渲染一个列表结构，它有特定的语法结构 v-for="item in items"

注意：在.vue文件中，只要用到 v-for指令 ，一定要绑定一个 :key 属性

作者：用户2031777005900

链接：

vue常见修饰符的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue的修饰符async、vue常见修饰符的信息别忘了在本站进行查找喔。