vue常用的修飾符

v-model修飾符

<template>
  <div id="demo14">
    <p>-----------------模板語法之修飾符----------------</p>

    <!-- .prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault(),取消事件的默認動作。 -->
    <form v-on:submit.prevent="onSubmit">
      <input type="submit" value="submit">
    </form>

    <form v-on:submit="onSubmit">
      <input type="submit" value="submit2">
    </form>

    <!-- 當在文本框輸入內容，並且光標焦點沒有離開文本框時，屬性值沒有實時發生變化 -->
    <h2>v-model.lazy</h2>
    <input type="text" v-model.lazy="input_lazy">

    <h2>v-model.number</h2>
    <input type="text" v-model.number="input_number">

    <h2>v-model.trim</h2>
    <input type="text" v-model.trim="input_trim">
  </div>
</template>
 

<script>
export default {
  data() {
    return {
      url: "https://www.baidu.com",
      input_lazy: "",
      input_number: "",
      input_trim: ""
    };
  },
  methods: {
    onSubmit: function() {
      console.log(this.url);
    }
  }
};
</script>

 

 

事件處理修飾符

<template>
  <section>
    <div id="demo23-1">
      <p>-----------------事件處理之修飾符---------------------</p>
      <!-- 阻止單擊事件繼續傳播 ,將上面兩個方法綁定到一組具有父子關系的元素上-->
      <div @click="div_click">
        <a v-on:click.stop="stop_click">click.stop</a>
      </div>
      <div @click="div_click">
        <a v-on:click="stop_click">click without stop</a>
      </div>

      <!-- 提交事件不再重載頁面 阻止表單提交並刷新當前頁面的默認行為。-->
      <form v-on:submit.prevent="form_submit">
        <input type="submit" value="submit">
      </form>

      <!-- 修飾符可以串聯 -->
      <a v-on:click.stop.prevent="doThis">串聯</a>
      <!-- 只有修飾符 -->
      <form v-on:submit.prevent></form>
    </div>
    <p>------------------------------</p>
    <div id="demo23-2" v-on:click.capture="doThis">test capture</div>
    <p>------------------------------</p>
    <!-- 該指令只當事件是從事件綁定的元素本身觸發時才觸發回調 -->
    <div id="demo23-3" v-on:click.self="div_click" style="display:inline-block; width:200px; background-color:red;">
      <button type="button" @click="stop_click">Button</button>
    </div>
    <button type="button" @click.once="once_click">Onceclick</button>
    <p>------------------------------</p>
    <div id="demo24-4">
      <!-- Enter -->
      <input v-on:keyup.13="doThis">
      <input type="text" @keyup.enter="enter_click" placeholder="enter_click">

      <!-- Alt + C -->
      <input @keyup.alt.67="doThis">
      <!-- Ctrl + Click -->
      <div @click.ctrl="doThis">doThis</div>
      <!-- 即使 Alt 或 Shift 被一同按下時也會觸發 -->
      <button @click.ctrl="doThis">A</button>

      <!-- 有且只有 Ctrl 被按下的時候才觸發 -->
      <button @click.ctrl.exact="doThis">B</button>

      <!-- 沒有任何系統修飾符被按下的時候才觸發 -->
      <button @click.exact="doThis">C</button>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      name: "Vue.js"
    };
  },
  methods: {
    doThis: function() {
      alert("Hello " + name + " ！");
    },
    div_click() {
      console.log("div click");
    },
    stop_click() {
      console.log("stop click");
    },
    form_submit() {
      console.log("form submit");
    },
    enter_click() {
      console.log("enter click");
    },
     once_click() {
      console.log("once click");
    }
  }
};
</script>

 

https://www.jianshu.com/p/60135bb32ebb  vue常用修飾符