Vue 2.0學習（三）指令與事件

　　指令（Directives）是Vue.js模板中最經常使用的一項功能，它帶有前綴v-，前面已經使用過v-html、v-pre等。指令的主要職責就是當表達式的值改變時，相應地將某些行爲應用到DOM上。

 

v-if

<!-- html -->
<div id="app">
    <p v-if="show">顯示這段文本</p>
</div>

//JS
var app = new Vue({ el: '#app', data: { show:true } })

　　當數據show的值爲true時，p元素會被插入，爲false時則會被移除。

 

v-bind

　　v-bind的基本用途是動態更新HTML元素上的元素，好比id、class等。

<!-- html -->
<div id="app">
    <a v-bind:href="url">連接</a>
    <img v-bind:src="imgUrl">
</div>

//JS
var app = new Vue({ el: '#app', data: { url: 'https://www.github.com' imgUrl: 'http://xxx.xxx.xx/img.png' } })

 

v-on

　　v-on用來綁定時間監聽器，作一些事件交互。

<!-- html -->
<div id="app">
    <p v-if="show">這是一段文本</p>
    <button v-on:click="handleClose">點擊隱藏</button>
</div>

//JS
var app = new Vue({ el: '#app', data: { show:true }, methods:{ handleColse: function() { this.show = false; } } })

　　在button按鈕上，使用v-on:click給該元素綁定了一個點擊事件，在普通元素上，v-on能夠監聽原生的DOM事件，除了click外，還有dblclick、keyup、mousemove等。

　　表達式除了方法名，也能夠直接是一個內聯語句。

<!-- html -->
<div id="app">
    <p v-if="show">這是一段文本</p>
    <button v-on:click="show = false">點擊隱藏</button>
</div>

//JS
var app = new Vue({ el: '#app', data: { show:true } })

　　若是綁定的事件要處理複雜的業務邏輯，建議仍是在methods裏聲明一個方法，這樣可讀性更強也更好維護。

　　Vue.js將methods裏的方法也代理了，因此也能夠像訪問Vue數據那樣來調用方法。

//JS
var app = new Vue({ el: '#app', data: { show:true }, methods:{ handleColse: function() { this.close(); }, close: function(){ this.show = false; } } })

 

語法糖

　　語法糖是指在不影響功能的狀況下，添加某種方法實現一樣的效果，從而方便開發程序。

　　Vue.js的v-bind和v-on指令都提供了語法糖，也能夠說是縮寫，好比v-bind,能夠省略v-bind，直接寫一個冒號":"。

<a v-bind:href="url">連接</a>
<img v-bind:src="imgUrl">
<!-- 縮寫爲 -->
<a :href="url">連接</a>
<img :src="imgUrl">

　　v-on能夠直接用"@"來縮寫

<button v-on:click="handleClose">點擊隱藏</button>
<!-- 縮寫爲 -->
<button @click="handleClose">點擊隱藏</button>