Vue这些修饰符帮我节省20%的开发时间

为了方便大家写代码，vue.js给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等~

目录

• 表单修饰符
• 事件修饰符
• 鼠标按键修饰符
• 键值修饰符
• v-bind修饰符（实在不知道叫啥名字）

表单修饰符

• .lazy

<div>
   <input type="text" v-model="value">
   <p>{{value}}p>
div>

<div>
   <input type="text" v-model.lazy="value">
   <p>{{value}}p>
div>

• .trim

<input type="text" v-model.trim="value">

• .number

事件修饰符

<div @click="shout(2)">
  <button @click="shout(1)">okbutton>
div>

//js
shout(e){
  console.log(e)
}
//1
//2

<div @click="shout(2)">
  <button @click.stop="shout(1)">okbutton>
div>
//只输出1

• .prevent

<form v-on:submit.prevent="onSubmit">form>

• .self

<div class="blue" @click.self="shout(2)">
  <button @click="shout(1)">okbutton>
div>

• .once

//键盘按坏都只能shout一次
<button @click.once="shout(1)">okbutton>

• .capture

<div @click.capture="shout(1)">
      obj1
      <div @click.capture="shout(2)">
        obj2
        <div @click="shout(3)">
          obj3
          <div @click="shout(4)">
            obj4
          div>
        div>
      div>
    div>
    // 1 2 4 3

• .passive

<div v-on:scroll.passive="onScroll">...div>

• .native

<My-component @click="shout(3)">My-component>

鼠标按钮修饰符

• .left 左键点击
• .right 右键点击
• .middle 中键点击

<button @click.right="shout(1)">okbutton>

键值修饰符

• .keyCode

<input type="text" @keyup.keyCode="shout(4)">

//普通键
.enter
.tab
.delete //(捕获“删除”和“退格”键)
.space
.esc
.up
.down
.left
.right


//系统修饰键
.ctrl
.alt
.meta
.shift

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

<input type="text" @keyup.ctrl="shout(4)">

<input type="text" @keyup.ctrl.67="shout(4)">

<button @mouseover.ctrl="shout(1)">okbutton>
 <button @mousedown.ctrl="shout(1)">okbutton>
 <button @click.ctrl.67="shout(1)">okbutton>

• .exact (2.5新增)

<button type="text" @click.ctrl.exact="shout(4)">okbutton>

<input type="text" @keydown.enter.exact="shout('我被触发了')">

//父亲组件
<comp :myMessage="bar" @update:myMessage="func">comp>
//js
func(e){
 this.bar = e;
}

//子组件js
func2(){
  this.$emit('update:myMessage',params);
}

//父组件
<comp :myMessage.sync="bar">comp>
//子组件
this.$emit('update:myMessage',params);

• .prop

Property：节点对象在内存中存储的属性，可以访问和设置。
Attribute：节点对象的其中一个属性( property )，值是一个对象。
可以通过点访问法 document.getElementById('xx').attributes 或者 document.getElementById('xx').getAttributes('xx') 读取，通过 document.getElementById('xx').setAttribute('xx',value) 新增和修改。
在标签里定义的所有属性包括 HTML 属性和自定义属性都会在 attributes 对象里以键值对的方式存在。

//这里的id,value,style都属于property
//index属于attribute
//id、title等既是属性，也是特性。修改属性，其对应的特性会发生改变；修改特性，属性也会改变
<input id="uid" title="title1" value="1" :index="index">
//input.index === undefined
//input.attributes.index === this.index

• 通过自定义属性存储变量，避免暴露数据
• 防止污染 HTML 结构

<input id="uid" title="title1" value="1" :index.prop="index">
//input.index === this.index
//input.attributes.index === undefined

• .camel

<svg :viewBox="viewBox">svg>

<svg viewbox="viewBox">svg>

new Vue({
  template: ''
})

最后

相关文章

1. 手写简易版vue-router
2. Vue 中 Axios 的封装和 API 接口的管理
3. 10个实用技巧让你的 Vue 代码更优雅
   

last

转发文章并关注公众号：前端开发博客，回复 1024，领取前端进阶资料

—————END—————

喜欢本文的朋友，欢迎关注公众号 程序员哆啦A梦，收看更多精彩内容

点个[在看]，是对小达最大的支持！

如果觉得这篇文章还不错，来个【分享、点赞、在看】三连吧，让更多的人也看到~