Vue_ 觸發事件

本文总阅读量次

v-on綁定事件

可將原表達式v-on:click=””簡寫為@:click=””

<實作>

點擊button做來回切換，語法：class=”{‘A效果’：變數}”

  • A效果連結style宣告的效果
  • 變數宣告從data建議變數而來，再經由methods函數做轉換功能(B=!B)
  1. 點擊click事件後，啟動將變數轉為true
  2. 此時觸發:Class裡的公式rotate，roatate便會套用css寫入的翻轉語法而產生效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div class="box" :class="{'rotate': isRotate }"></div>
  <button class="btn btn-outline-primary" @click="changeRotate">
    切換 box 樣式
  </button>

</div>  

   data: {
    isRotate: false,
  },

  methods: {
    changeRotate: function() {
      this.isRotate = !this.isRotate;
    },

    <style>
        .box {
            display: block;
            transition: all .5s;
        }
        .box.rotate {
            transform: rotate(45deg)
        }
    </style>

其他滑鼠事件

  • mouseover：滑鼠經過
  • mouseout：滑鼠移出
  • mousedown:滑鼠點下
  • mouseup:滑鼠點下後‘放開’
  • mousemove：滑鼠在其上方移動時

偵聽按鍵事件

鍵盤事件

  • keydown：按鍵被‘按下’時
  • keyup：按鍵被按下後‘彈起’時
  • v-on:keydown.enter (當「enter」按鍵被按下時)
  • v-on:keydown.a.prevent(當「a」按鍵被按下時，但a的內容不會被放入input中)

便利的修飾符語法

  • .prevent：不執行預設效果
  • .stop：不讓event傳到外層
  • .self：只執行自己發出的event
  • .once：只執行一次

<div id="app">
  <h1>{{num}}</h1>
  <button @click.once="num+=1">+Add </button>
</div>

new Vue({
  el:"#app",
  data:{
    num:0,
  },
})

更多修飾符