iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
0
自我挑戰組

vue.js 30天學習軌跡系列 第 4

Day4 vue.js - 初探v-on指令

v-on是用來綁定事件監聽器,用在普通元素上時,只能監聽原生 DOM 事件。
用在自定義元素組件上時,也可以監聽子組件觸發的自定義事件。

可以用 v-on 指令監聽 DOM 事件,並在觸發時運行一些 JavaScript 代碼

範例

每點擊一下按鈕來增加或減少方形的大小

<div id="app">
  <button v-on:click="add">變大</button>
  <button v-on:click="counter -= 10">變小</button>
  <div id="square" :style="{ width: counter +'px' ,height : counter +'px'}"></div>
  <p>{{counter}}px</p>
</div>

v-on绑定的事件函数可寫在直接寫JavaScript
但事件處理邏輯會更為複雜,所以一般還是需要一個可以調用的function

var vm = new Vue({
  el: '#app',
  data: {
    counter: 100
  },
  methods:{
    add: function(){
      this.counter +=10;      
    },  
  },
})

聽說今天是禮拜六了/images/emoticon/emoticon13.gif


上一篇
Day3 vue.js - v-bind屬性綁定
下一篇
Day5 vue.js - v-on 修飾符
系列文
vue.js 30天學習軌跡30

尚未有邦友留言

立即登入留言