event handler

2019鐵人賽 vue.js

Andy Tsai

團隊好想工作室第二屆鐵人賽

2018-10-22 20:26:58

1875 瀏覽

菜菜菜的 Vue 30天 - Day7

event

我們在前一章的最後面有提到了 v-on ，那這個是什麼呢？！

其實它就 Vue 的事件(event)處理，就像是 Javascript 裡的 onclick、onchange、oninput...等事件。

相信已經開始學 Vue 的各位應該對 Javascript 有一定的瞭解了，對這些事件應該不陌生。

好的！！那我們不囉唆就直接來看看怎麼運用～

計數器

就來做一個計數器好了，雖然老套但是拿來示範最好了哈哈哈！！！

我們就寫一個 button 並且綁上一個 v-on:click 事件，並且指定執行 data 裡的 count + 1

<body>
    <div id="app">
        <button v-on:click="count += 1">add</button>
        <span>{{count}}</span>
    </div>
</body>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
            count: 0
      }
    })
</script>

結果就會是這樣：

是不是使用起來就跟 Javascript 原生的差不多呢～

另外 v-on 也能夠縮寫為 @，所以剛剛上面的 button 也能夠寫成

<button @click="count += 1">add</button>

我們來對前幾章的示範來做一點變化～

當我點擊按鈕的時候，皮卡丘的圖會變換：

<body>
    <div id="app">
        <button @click="count += 1">change img</button></br>
        <img :src=`./皮卡丘${count%2}.jpg` alt="img">
    </div>
</body>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
        count: 0
      }
    })
</script>

當然其他的 on 事件也能夠使用，例如：

使用 onmouseover 事件來改變 div 的顏色。

<body>
    <div id="app">
        <div class="block" @mouseover="blockRed = !blockRed" :class="{blockRed: blockRed}"></div>
    </div>	
</body>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
            blockRed: false
      }
    })
</script>

結果如下：