一、樣式綁定
class 與 style 是 HTML 元素的屬性，用於設置元素的樣式，我們可以用 v-bind 來設置樣式屬性。
v-bind 在處理 class 和 style 時， 專門增強了它。表達式的結果類型除了字符串之外，還可以是對象或數組。
1、class 屬性綁定
我們可以為 v-bind:class 設置一個對象，從而動態的切換 class
//將 isActive 設置為 true 顯示 class 名為active 的樣式，如果設置為 false 則不顯示：
<div v-bind:class="{ active: isActive }"></div>
//實例 div class 為：<div class="active"></div>
我們也可以在對象中傳入更多屬性用來動態切換多個 class 。
//text-danger 類背景顏色覆蓋了 active 類的背景色：
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
//以上實例 div class 為：<div class="static active text-danger"></div>
我們也可以直接綁定數據里的一個對象：
<div id="app">
<div v-bind:class="classObject"></div>
</div>
<script>
new Vue({ el: '#app', data: { classObject: { active: true, 'text-danger': true } } }) </script>
//和上例是一樣的
此外，我們也可以在這里綁定返回對象的計算屬性。這是一個常用且強大的模式：
new Vue({ el: '#app', data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal', }//返回一個對象 } } })
2、數組語法
我們可以把一個數組傳給 v-bind:class ，實例如下：
<div id="app">
<div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script>
new Vue({ el: '#app', data: { activeClass: 'active', errorClass: 'text-danger' } }) </script>
//實例 div class 為：<div class="active text-danger"></div>
還可以使用三元表達式來切換列表中的 class
//errorClass 是始終存在的，isActive 為 true 時添加 activeClass 類：
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
new Vue({ el: '#app', data: { isActive: true, activeClass: 'active', errorClass: 'text-danger' } })
3、style(內聯樣式)
我們可以在 v-bind:style 直接設置樣式：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
直接綁定到一個樣式對象，讓模板更清晰：
<div id="app">
<div v-bind:style="styleObject">菜鳥教程</div>
</div>
<script>
new Vue({ el: '#app', data: { styleObject: { color: 'green', fontSize: '30px' } } }) </script>
可以使用數組將多個樣式對象應用到一個元素上
<div id="app">
<div v-bind:style="[baseStyles, overridingStyles]">測試</div>
</div>
<script>
new Vue({ el: '#app', data: { baseStyles: { color: 'green', fontSize: '30px' }, overridingStyles: { 'font-weight': 'bold' } } }) </script>
注意：當 v-bind:style 使用需要特定前綴的 CSS 屬性時，如 transform ，Vue.js 會自動偵測並添加相應的前綴。
二、事件處理器
事件監聽可以使用 v-on 指令：
<div id="app">
<button v-on:click="counter += 1">增加 1</button>
<p>這個按鈕被點擊了 {{ counter }} 次。</p>
</div>
<script>
new Vue({ el: '#app', data: { counter: 0 } }) </script>
通常情況下，我們需要使用一個方法來調用 JavaScript 方法。v-on 可以接收一個定義的方法來調用。
//`greet` 是在下面定義的方法名
<button v-on:click="greet">Greet</button>
// 也可以用 JavaScript 直接調用方法
app.greet() // -> 'Hello Vue.js!'
1、事件修飾符
Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通過由點(.)表示的指令后綴來調用修飾符。
//阻止單擊事件冒泡
<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>
// 只當事件在該元素本身（而不是子元素）觸發時觸發回調
<div v-on:click.self="doThat">...</div>
// click 事件只能點擊一次，2.1.4版本新增
<a v-on:click.once="doThis"></a>
2、按鍵修飾符
Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符：
//只有在 keyCode 是 13 時調用 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