Vue常见的修饰符

1.事件修饰符

(1) stop
阻止事件冒泡。
(2) prevent
阻止事件默认行为
(3) once
事件只触发一次。

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

(4) capture
使用事件的捕获模式。一般事件默认都是在冒泡阶段执行的，这个内容详细见https://blog.youkuaiyun.com/fageaaa/article/details/145704595。

<!-- 准备好一个容器 -->
    <div id="root">
      <!-- 开始捕获模式 -->
      <div class="normal-div">
        <div class="box1" @click.capture="showInfo('outer')">
          box1
          <div class="box2" @click="showInfo('inner')">box2</div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      const vm = new Vue({
        el: "#root",
        data() {
          return {
            address: "杭州市",
          };
        },
        methods: {
          <!-- 开始捕获模式 -->
          showInfo(text) {
            //先打印outer后打印inner
            //box1元素上的click事件开启了捕获模式。在捕获阶段就会被执行
           //box2元素上的click事件没开启了捕获模式。默认在冒泡阶段才会被执行
            console.log(text); 
          },
        },
      });
    </script>

(5) self
只有event.target是当前元素时候才会触发该事件

  <div id="root">
    <!-- 只有event.target是当前操作的元素时候才触发该事件 -->
    <div class="normal-div">
      <div class="box1" @click.self="showInfo">
        <button>点我打印信息</button>
      </div>
    </div>
  </div>
  
  <script type="text/javascript">
    const vm = new Vue({
      el: "#root",
      data() {
        return {
          address: "杭州市",
        }
      },
      methods:{
        //点击box1区域内的按钮,box1的方法showInfo不会触发;
        //点击box1区域内的按钮之外的区域  box1的方法showInfo才会触发
        showInfo(event){
          console.log("点击了!!!")
        },
      }
    })
  </script>

(6) passive

事件的默认行为立即执行，而无需等待事件回调完成才执行。

<div class="list" @wheel.passive="test">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</div>
//有这个passive和没有passive是有区别的，
//没有passive的时候，如果滚动滚轮，当test方法里面的事件没有执行完毕时候，滚动条是不会滚动的；
//只要test里面完全执行完毕，才会执行事件的默认行为；
 test(){
   for(let i=0;i<100000;i++){
      console.log("#")
    }
},

2.鼠标修饰符

修饰的是鼠标左键、中键、右键点击。如下:

• click.left
• click.right
• click.middle

    <button @click.left="shout1(1)"
    @click.right="shout2(2)" @click.middle="shout3(3)">左键</button>

3.键盘修饰符

用于修饰键盘事件。如:

• enter
• .tab
• .delete (捕获删除和退格键)
• .esc
• .space
• .up
• .down
• .left
• .right
• …

    <input type="text" @keyup.enter="search()">

4.v-bind修饰符

4.1 sync修饰符

可以对props进行一个双向数据绑定。如下:

//父组件文件中
<comp :myMessage.sync = "bar"></comp>

//子组件文件中
this.$emit('update:myMessage', params);

相当于下面这样子：

//父组件文件
<comp :myMessage="bar" @update:myMessage="func"></comp>
func(e){
  this.bar = e;
}
//子组件文件
func2(){
  this.$emit('update:myMessage',params);
}

总结:sync实现了props的双向绑定，它其实就是一种简写方式。在大多数时候，我们经常是在父组件文件中对子组件通过v-bind绑定数据，然后在子组件文件中用props接收数据，同时在子组件文件中通过emit将数据的值传递给父组件，父组件再触发相应的方法来改变传递给子组件的值，父组件值改变又会触发子组件中的值。现在可以直接在父组件给传递的值绑定sync修饰符，在子组件直接按相应的格式书写就可以,无需通过props接受数据。

4.2 props修饰符

v-bind默认绑定在dom节点的attribute上，使用.prop修饰符后会绑定在property(非自定义属性),并且在浏览器检查界面元素时候,会不显示。

<div id="box" class="box" :school="school"  :data.prop="data" @click="clickDiv()">
...
 data() {
   return {
      address: "杭州市",
      data:111,
      school: 2222,
      boxName:123,
   }
},
methods:{
    clickDiv(){
       let box=document.querySelector(".box")
       console.log(box.attributes)//只有id,school和class
       console.log(box.data)//111(propery需要打点才能获取属性，property获取的是元素的非自定义属性)
       console.log(box.class)//undefined(这个比较特殊)
       console.log(box.className)//box
       console.log(box.id)//非自定义属性 box
       console.log(box.school)//自定义属性 undefined
    }
}

我们可以右键或者F12检查网页元素,如下：

如图,不管是自定义还是非自定义属性都会显示在浏览器元素中.但如果用了prop修饰符，则可以避免暴露数据。

问题:这里要搞清楚attribute和property的区别?
通过attribute可以获取元素的自定义属性和非自定义属性(如id、src、href等)；而property则是非自定义属性,只能通过打点获取。

4.3 camel修饰符

具体用法可查https://v2.cn.vuejs.org/v2/api/#v-bind

5.表单修饰符

• v-model.lazy
  在默认情况下，v-model 在每次input事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加lazy修饰符，从而转为在change事件之后进行同步：
• v-model.number
  如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符。这通常很有用，因为即使在type="number" 时，HTML输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值
• v-model.trim
  如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加trim修饰符：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

<input v-model.number="age" type="number">

<input v-model.trim="msg">