本文作者:qiaoqingyi

vue常见修饰符(vue常用指令修饰符)

qiaoqingyi 2023-05-01 380

1、vuejs为von提供了多个修饰符,方便我们处理一些DOM事件的细节,并且修饰符可以串联使用主要的修饰符如下 stop#160 相当于js中的eventstopPropagation,它是用来阻止冒泡的prevent 相当于js中。

2、#160 #160 #160 #160 vue中事件修饰符时可以连缀的,修饰符的顺序有时会影响最终结果例如prevent与self组合如下图2,图3preventself与selfprevent产生的结果是有差距的self写在prevent前时,prevent。

vue常见修饰符(vue常用指令修饰符)

3、#160#160#160#160#160#160#160#160我们可以称native为原型绑定只有 使用vue组件时 我们会用到这个修饰符当我们在组件上绑定监听时,我们绑定的是组件定义的监听以element框架为例,ltel。

4、4而vue的sync修饰符,它省略了父组件的事件的注册,能使子组件修改props的属性,其实它是一个语法糖,本质上没有改变父子组件数据单向传递 5举例定义子组件sonvue的内容定义父组件fathervue的内容6说明从。

5、Vue 中提供了14个比较常用的指令,如 1vmodel 双向数据绑定,表单元素常用 input select radio checkbox textarea 等,vmodel有三个修饰符,例如input元素 vmodeltrim去掉输入值的前后空格和vmodelnumber,将输入。

6、只能在触发键盘事件时,使用的修饰符,以下列举2个常用的 快速获取表单数据只应用于表单元素,如inputtextareaselect只能给vmodel使用的修饰符 控制DOM的显示与隐藏值为true显示,值为false隐藏,其原理为。

7、Vue 中的 sync 修饰符的功能是 当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定我们通过一个场景来辅助理解一下Childvue 效果展示 等价于 通过查看Vuejs官方文档 sync。

8、一般我们在方法中通过 epreventdefault 来 阻止默认行为 ,在vue中,通过事件修饰符 prevent 来阻止默认行为,如下图 一般我们在方法中通过 #160estopProgation #160 来 阻止默认行为 ,在vue中。

9、我们通过一个场景来辅助理解一下Childvue 效果展示 等价于 通过查看Vuejs官方文档 sync 修饰符 了解到从 230 起重新引入了 sync 修饰符,但是这次它只是作为一个编译时的语法糖存在它会被扩展为。

10、对于 passive capture 和 once 这些事件修饰符,Vue 提供了相应的前缀可以用于 on修饰符前缀 passive capture! once~ captureonce 或oncecapture~!例如对于所有其它的修饰符,私有。

11、stop 阻止冒泡 prevent 阻止默认事件 capture 使用事件捕获模式,即元素自身触发的事件在此处理,然后再由内部元素进行处理 self 只在 eventtarget 是当前元素自身时触发处理函数 once 事件只触发一次 passive。

12、vmodel的修饰符,主要用于控制数据同步的时机使用lazy修饰符vmodel会在change事件中同步这时,message并不是实时改变的,而是在失焦或按回车时才更新运行结果。

13、passive 滚动事件的默认行为 即滚动行为 将会立即触发,而不会等待 onScroll 完成这个 passive 修饰符尤其能够提升移动端的性能htmljseprevent等同于 eventpreventDefault35按键修饰符 在Vue中可以通过。

14、Vue中的数据是单向数据流父级 prop 的更新会向下流动到子组件中,但是反过来则不行,即子组件无法直接修改父组件中的数据但我们常常会遇到需要在子组件中修改父组件数据的场景sync修饰符就可以帮助我们实现这种功能。

15、capture 事件捕获, 相当于addEventListener 的第三个参数, CNdocsWebAPIEventTargetaddEventListener self 只当事件是从侦听器绑定的元素本身触发时才触发回调。

阅读
分享