vue.js事件處理器

事件監(jiān)聽可以使用v-on指令：

<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>這個(gè)按鈕被點(diǎn)擊了 {{ counter }} 次踏烙。</p>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>

通常情況下泪酱，我們需要使用一個(gè)方法來調(diào)用js方法蝎困。v-on可以接受一個(gè)定義的方法來調(diào)用

<div id="app">
   <!-- `greet` 是在下面定義的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 對(duì)象中定義方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指當(dāng)前 Vue 實(shí)例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
          alert(event.target.tagName)
      }
    }
  }
})
// 也可以用 JavaScript 直接調(diào)用方法
app.greet() // -> 'Hello Vue.js!'
</script>

除了直接綁定到一個(gè)方法宪巨，也可以用內(nèi)聯(lián)js語句：

<div id="app">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
 
<script>
new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>

事件修飾符

vue.js為v-on提供了事件修飾符來處理DOM事件細(xì)節(jié)，如：event.preventDefault()
vue.js通過點(diǎn)（.）表示的指令后綴來調(diào)用修飾符：
.stop对竣，.prevent庇楞，.capture榜配，.self否纬，.once

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián)  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時(shí)使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào) -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能點(diǎn)擊一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

按鍵修飾符

vue允許為v-on在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符：

<!-- 只有在 keyCode 是 13 時(shí)調(diào)用 vm.submit() -->
<input v-on:keyup.13="submit">

記住所有的 keyCode 比較困難蛋褥，所以 Vue 為最常用的按鍵提供了別名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">

全部的按鍵別名：
.enter
.tab
.delete (捕獲 "刪除" 和 "退格" 鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

表單

用v-model指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定

v-model會(huì)根據(jù)空間類型自動(dòng)選取正確的方法來更新元素临燃。

輸入框

<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="編輯我……">
  <p>消息是: {{ message }}</p>
    
  <p>textarea 元素：</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本輸入……"></textarea>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob',
    message2: '菜鳥教程\r\nhttp://www.runoob.com'
  }
})
</script>

復(fù)選框

復(fù)選框如果是一個(gè)為邏輯值，如果是多個(gè)則綁定到同一個(gè)數(shù)組：
eg:復(fù)選框的雙向數(shù)據(jù)綁定：

<div id="app">
  <p>單個(gè)復(fù)選框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
    
  <p>多個(gè)復(fù)選框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>選擇的值為: {{ checkedNames }}</span>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    checked : false,
    checkedNames: []
  }
})
</script>

image.png

單選按鈕

eg：?jiǎn)芜x按鈕的雙向數(shù)據(jù)綁定：

<div id="app">
  <input type="radio" id="runoob" value="Runoob" v-model="picked">
  <label for="runoob">Runoob</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>選中值為: {{ picked }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    picked : 'Runoob'
  }
})
</script>

image.png

select列表

eg：下拉列表的雙向數(shù)據(jù)綁定：

<div id="app">
  <select v-model="selected" name="fruit">
    <option value="">選擇一個(gè)網(wǎng)站</option>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
  </select>
 
  <div id="output">
      選擇的網(wǎng)站是: {{selected}}
  </div>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    selected: '' 
  }
})
</script>

image.png