四川盐亭网站制作公司

Vue中常用的修饰符有哪些

这篇文章主要介绍了Vue中常用的修饰符有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue中常用的修饰符有哪些文章都会有所收获，下面我们一起来看看吧。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、虚拟空间、营销软件、网站建设、恩阳网站维护、网站推广。

Vue中常用的修饰符有哪些

面试官：说一下你平时用过的 Vue修饰符

候选人：又卷？谁平时没事记这些啊，真正要用的时候我不知道去查文档吗？【相关推荐：vue.js视频教程】

面试官：嗯？

候选人：好吧，我说。

Vue中常用的修饰符有哪些

面试官：这才对嘛，虽然考这些八股文看起来是没啥意义，但其实我考察的是你对 vue 的熟悉程度，真正用 vue 开发过几个大型项目的人，是不可能答不出 5 个以上的。

候选人：您说的都对。

...

解答及延伸：

在上一篇文章 《自定义组件中如何用v-model？聊聊.sync修饰符的使用场景》 中，我们介绍了 .sync 修饰符。由此引出了这篇文章的问题，说一下你平时用过的 vue 修饰符。

修饰符用得好，那开发效率杠杠滴，即使不是应对面试，我们也应该掌握常用的修饰符。

自定义组件修饰符

.sync

父子组件交互，父组件传递给子组件 prop 值，子组件抛出事件，通知父组件改变这个绑定的值，可以用 .sync 修饰符简写。

父组件里
 fatherValue = val">

子组件里
this.$emit('update:value', newValue)

等价于

父组件里


子组件里
this.$emit('update:value', newValue)

.nativue

.native 修饰符是加在自定义组件的事件上，保证自定义组件的原生事件能执行

执行不了 
 

可以执行 

如果不写 .native 修饰符，那上面的 @click 就是自定义事件click，而非原生事件click，除非在 my-button 组件内部 emit 了自定义事件 click，否则 handleClick 方法不会执行。

事件修饰符

.stop

.stop 修饰符，用于阻止冒泡，同 event.stopPropagation()


  click

Vue中常用的修饰符有哪些

一个 div 里面包了一个 button。

button 上的事件不加 .stop 修饰符，点击 button ，先执行 handleBtnClick ，再执行 handleDivClick 。

button 上的事件加了 .stop 修饰符，点击 button ，只执行 handleBtnClick。

了解事件冒泡和捕获，请 点击这里，面试几乎必考。

.capture

.capture 修饰符，用于添加事件监听器时使用事件捕获模式


  click

Vue中常用的修饰符有哪些

div 上的事件不加 .capture 修饰符，点击 button ，先执行 handleBtnClick ，再执行 handleDivClick ，其实就是默认使用冒泡模式。

div 上的事件加了 .capture 修饰符，点击 button ，先执行 handleDivClick ，再执行 handleBtnClick 。

.self

.self 修饰符，只当在 event.target 是当前元素自身时触发处理函数


  click

Vue中常用的修饰符有哪些

div 上的事件不加 .self 修饰符，点击 button ，先执行 handleBtnClick ，再执行 handleDivClick ，其实就是默认使用冒泡模式。

div 上的事件加了 .self 修饰符，点击 button ，只执行 handleBtnClick ，点击 div，才执行 handleDivClick 。

.once

.once 修饰符，点击事件将只会触发一次

button

button 上的事件加了 .once 修饰符，点击 button ，只执行一次 handleBtnClick 事件 ，之后再次点击，handleBtnClick 事件不会执行。

.prevent

.prevent 阻止默认事件，同event.preventDefault()

阻止a标签的跳转行为
点击跳转

阻止复选框被勾选


阻止 form 表单提交刷新页面问题

  
    
  

键盘按键修饰符

需要用到的时候再去查 vue文档 吧，太多了，不用记住。

表单输入绑定修饰符

.lazy

v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。添加 .lazy 修饰符，会在 change 事件之后进行同步



{{ value }}

//...
data() {
  return {
    value: 'lin'
  }
}
// ...

.trim

使用 .trim 修饰符，会自动过滤用户输入的首尾空白字符



{{ value }}

//...
data() {
  return {
    value: 'lin'
  }
}
// ...

.number

使用 .number 修饰符，会将用户的输入值转为数值类型



{{ value }}

//...
data() {
  return {
    value: 'lin'
  }
}
// ...

关于“Vue中常用的修饰符有哪些”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue中常用的修饰符有哪些”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。


当前名称：Vue中常用的修饰符有哪些
文章来源：http://scyanting.com/article/jeoosg.html

其他资讯