iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 11
0
Modern Web

Vue.js 30天系列 第 11

Vue.js 11 - DOM事件處理

Vue 資料與畫面同步的概念很簡單。

  1. data 更新、UI隨之更新;
  2. 反過來,使用者輸入更改UI上的數值, data 得跟著更新。

回顧前面介紹過的兩種 directive
v-bind 做 單向綁定,可以達成 1
v-model 做 雙向綁定,可以達成 1 & 2

我們知道使用者操作,不見得是輸入新的數值,有時會點擊(Click)按鈕、送出(Submit)表單資訊,或是觸發其他已經學過的 DOM 事件。

相較前兩者用來***監聽資料異動*** ,
Vue 拿 v-on 用來補足缺少的拼圖 - 監聽事件


暖暖身,例如想知道使用者按了幾次按鈕

<div id="clickEventDemo">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
  el: '#clickEventDemo',
  data: {
    counter: 0
  }
});

在按鈕上綁定 Click 事件,每次觸發多算一次。

事件處理器若是長了一點,找個地方收好,對眼睛也舒服。

<div id="clickEventDemo">
  <button v-on:click="countUserClick">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
  el: '#clickEventDemo',
  data: {
    counter: 0
  },
  method: {
  	 countUserClick: function() {
  	 	this.counter += 1;
  	 	console.info('Count: ${ counter }');
  	 }
  }
});

若是事件處理器有不同的參數

<div id="clickEventDemo-2">
  <button v-on:click="say('hi')">Hi</button>
  <button v-on:click="say('hello')">Hello</button>
</div>
var example1 = new Vue({
  el: '#clickEventDemo-2',
  method: {
  	 say: function(msg) {
  	 	alert(msg);
  	 }
  }
});

還是需要避開預設行為

<div id="clickEventDemo-2">
  <button v-on:click="say('hi', $event)">Hi</button>
  <button v-on:click="say('hello', $event)">Hello</button>
</div>
var example1 = new Vue({
  el: '#clickEventDemo-2',
  method: {
  	 say: function(msg, evt) {
  	 	<!-- 老朋友 -->
  	 	if (evt) evt.preventDefault();
  	 	alert(msg);
  	 }
  }
});

上一篇
Vue.js 10 - 計算屬性(Computed)
下一篇
Vue.js 12 - 表單輸入綁定
系列文
Vue.js 30天30

尚未有邦友留言

立即登入留言