先前有講到 v-on 和 v-bind 指令
v-on 用在事件上，v-bind 用在綁定標籤的屬性上
而這些指令其實是有修飾符可以用的，意指縮寫。

拿前面章節的程式碼來做說明:

<div id="app">
  <input type="text" class="form-control" v-model="text">
  <button class="btn btn-primary mt-1" v-on:click="reverseText">反轉字串</button>
  <div class="mt-3">
    {{ newText }}
  </div>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    text: '',
    newText: ''
  },
  methods: {
      reverseText: function(){
          consle.log('HELLO');
      }
  }
});
</script>

上述是最原始的方式，假設我們要在 button 元素的 v-on 上用上修飾符:

<div id="app">
  <input type="text" class="form-control" v-model="text">
  <button class="btn btn-primary mt-1" @click="reverseText">反轉字串</button>
  <div class="mt-3">
    {{ newText }}
  </div>
</div>

可以發現被 @ 代替了
再來如果我們想要 input 元素的 class 也用上 v-bind 添加並用上修飾符的話
則會變成如下:

<div id="app">
  <input type="text" :class="className" v-model="text">
  <button class="btn btn-primary mt-1" @click="reverseText">反轉字串</button>
  <div class="mt-3">
    {{ newText }}
  </div>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    text: '',
    newText: '',
    className: 'form-control'
  },
  methods: {
      reverseText: function(){
          consle.log('HELLO');
      }
  }
});
</script>

可以發現本來應該是 v-bind:class="className" 變成 :class="className"
v-bind 被 : 取代了

再額外補充一點，按鈕元素有時候我們會用 a 標籤來撰寫

<a href="#" class="btn btn-primary" @click="reverseText">反轉字串</a>

但會發現 a 有預設 href 這個屬性的行為，當我們想要取消這個預設行為時，我們可以直接在 @click 後面加上 .prevent 意即 @click.prevent="reverseText"
這時候就會取消預設行為了