屬性繫結

v-bind：給屬性繫結對應的值

<div id="vue-app">
  <a v-bind:href="website">web開發</a>
</div>

<script src="vue.js"></script>
<script>
  var app = new Vue({
    el: "#vue-app",
    data: {
      website: "http://www.baidu.com"
    },
  })
</script>

這時候a的href屬性值就是我們希望的值。
如果想將標籤繫結，可以採用下面的方法：

<div id="vue-app">
  <p v-html="websiteTag"></p>
</div>

<script src="vue.js"></script>
<script>
  var app = new Vue({
    el: "#vue-app",
    data: {
      websiteTag: "<a href='http://www.baidu.com'>Web</a>"
    }
  })
</script>

這個方法其實是給p標籤添加了一個html內容，而這個html則是一個帶有href屬性的a標籤，此時就達到了繫結標籤的效果。

事件繫結

v-on：js中的事件在這裡依然適用

<style>
  #canvas{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    text-align: center;
    line-height: 300px;
  }
</style>

<h1>Event</h1>
<div id="vue-app">
  <button type="button" v-on:click="add(1)">增一歲</button>
 

  <button type="button" v-on:click="subtract(1)">減一歲</button>
  <button type="button" v-on:click="add(10)">增十歲</button>
  <button type="button" v-on:click="subtract(10)">減十歲</button>
  <p>My age is {{ age }}</p>
  <div id="canvas" v-on:mousemove="moveXY">{{x}},{{y}}</div>
</div>

<script src="vue.js"></script>
<script>
  var app = new Vue({
    el: "#vue-app",
    data: {
      age: 20,
      x: 0,
      y: 0,
     },
     methods: {
      add: function(num){
        return this.age += num;
      },
      subtract: function(num){
        return this.age -= num;
      },
      moveXY: function(event){
        this.x = event.offsetX;
        this.y = event.offsetY;
      }
    }
})
</script>

在這裡，我們封裝了三個方法，其中一個是加age，還有一個是減age，我們在點選按鈕時分別呼叫這兩個方法，並且傳遞對應的引數，就可以實現用兩個方法完成四個按鈕的功能。還有一個方法是滑鼠移動時顯示對應的偏移值。
講到呼叫方法，我們順便說一句：1. 不論需不需要傳引數，在{{ }}裡呼叫方法必須寫成{ { add() }}的形式。2. 在v-on裡，如果不需要傳引數，我們可以寫成v-on:click=”add”，如果需要傳引數就要寫成v-on:click=”add(引數)”。

事件修飾符

修飾符是由點開頭的指令字尾來表示的。比如，在剛才的例子中，如果我們需要僅僅在點選第一下按鈕時年齡發生變化，我們就可以用到once修飾符

<button type="button" v-on:click.once="add(1)">增一歲</button>

還有，如果我們想讓滑鼠在特定區域內x，y不發生變化，可以用到stop修飾符

 <div id="canvas" v-on:mousemove="moveXY">
  {{x}},{{y}} - <span v-on:mousemove.stop="">Stop moving</span>
 </div>

此時，再把滑鼠放在span標籤內，xy的值就不會發生任何變化。
除了once和stop，這樣的修飾符還有一些，我們來看看它們具體有什麼功能：

<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再過載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 可以寫成只有修飾符的形式 -->
<form v-on:submit.prevent></form>

<!-- 新增事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處處理，然後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函式 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>

使用修飾符時，順序很重要；相應的程式碼會以同樣的順序產生。因此，用 @click.prevent.self 會阻止所有的點選，而 @click.self.prevent 只會阻止對元素自身的點選。

<!-- 點選事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>

不像其它只能對原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的元件事件上。
Vue 還對應 addEventListener 中的 passive 選項提供了 .passive 修飾符。

<!-- 滾動事件的預設行為 (即滾動行為) 將會立即觸發 -->
<!-- 而不會等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>

這個 .passive 修飾符尤其能夠提升移動端的效能。
不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的預設行為。

鍵盤事件

<div id="vue-app">
        <h1>鍵盤Event</h1>
        <label>姓名</label>
        <input type="text" v-on:keyup="logName"/>
</div>
<script src="vue.js"></script>
<script>
        var app = new Vue({
            el: "#vue-app",
            methods: {
                logName: function(){
                    console.log("你正在輸入姓名！");
                }
            }
        })
</script>

在這個鍵盤事件中，我們定義的方法是當你輸入內容時，控制檯會列印一句“你正在輸入姓名！”。

鍵盤修飾符

就剛才的例子而言，會發現你按下多少次鍵盤，就會列印多少次話。但是這樣不符合我們平時的習慣，我們更希望在按下enter鍵之後再列印這句話，此時就要用到鍵盤修飾符

<input type="text" v-on:keyup.enter="logName"/>

現在的效果是不是就好多了。如果我們想要按下alt加enter才能列印，就在.enter後加一個.alt就好了。
記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：

<!-- 只有在 `keyCode` 是 enter 時呼叫 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<!-- 縮寫語法 -->
<input @keyup.enter="submit">

全部的按鍵別名：
.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right