iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
0

前面有提到屬性綁定,在這裡我來介紹事件綁定及資料綁定,就讓我們開始吧!

事件綁定 v-on

在網頁上,常常會有點擊、輸入資料等的互動事件,而如果你對 JavaScript 及 jQuery 熟悉的話,那應該知道他們是如何取得 DOM 並加上事件。

/* JavaScript 取得 DOM */
var btn = document.querySelector('#btn');
btn.addEventListener('click', event, false)

/* jQuery 取得 DOM */
$('#id').click(event);

在 Vue 裡的 onclick 事件則是這麼寫的,先給按鈕綁定一個點擊事件:

<div id="app">
    <button v-on:click="logOut">click</button>
</div>

接下來在 Vue 的應用程式內建立方法 methods,並將點擊要觸發的事件建立在 methods 內,如下:

new Vue({
  el: '#app',
  data: {},
  methods: {
      logOut () {
        console.log('觸發點擊事件')
      }
  }
})

當點擊按鈕的時候就會觸發 logOut 這個方法,打開 console ( Chrome 的 F12 ) 看看如果有出現 "觸發點擊事件" 的字串,就代表成功囉!

縮寫

當然,v-on 也是有縮寫的囉!直接看看範例吧!

<!— 完整語法 -->
<div id="app">
    <button id="btn" v-on:click="logOut">click</button>
</div>
<!— 縮寫 -->
<div id="app">
    <button @click="logOut">click</button>
</div>

只要將前面的 v-on: 改為 @ 就行囉!是不是又提高了撰寫的效率呢!

資料綁定 v-model

在 Vue 之中,我們可以利用 v-model 來作資料的綁定,我們直接先來看範例:

<div id="app">
  <input type="text" v-model="msg">
  <h2> {{msg}} </h2>
</div>
new Vue({
  el: '#app',
  data: {
      msg: 'Hello Vue!'
  }
})

從上面我們可以看到, input 的輸入框已經和 Vue 應用程式裡 data 的資料作綁定,但是在上面還有另一個重點,也是 Vue 中相當重要的概念之一,就是雙向綁定,如果在輸入框輸入內容,下方的 h2 內容也會即時更新,因為他們兩者都和 data 內的 msg 綁定了,這就是雙向綁定。

那麼,明天再見囉!


上一篇
Day 3 : Class 與 Style 的綁定
下一篇
Day 5 : 動態切換 className
系列文
Vue 學習筆記 - 讓你30天掌握 Vue31

1 則留言

0
w4560000
iT邦新手 5 級 ‧ 2018-11-27 16:40:46

學習了! 謝謝

我要留言

立即登入留言