Vue中的縮寫：v-bind、v-on

v-bind
縮寫：:
預期：any (with argument) | Object (without argument)
參數：attrOrProp (optional)
修飾符： 
.prop - 被用於綁定 DOM 屬性。
.camel - (2.1.0+) 將 kebab-case 特性名轉換爲 camelCase.
.sync (2.3.0+) 語法糖，會擴展成一個更新父組件綁定值的 v-on 偵聽器。
用法： 
動態地綁定一個或多個特性，或一個組件 prop 到表達式。 
在綁定 class 或 style 特性時，支持其它類型的值，如數組或對象。能夠經過下面的教程連接查看詳情。 
在綁定 prop 時，prop 必須在子組件中聲明。能夠用修飾符指定不一樣的綁定類型。 
沒有參數時，能夠綁定到一個包含鍵值對的對象。注意此時 class 和 style 綁定不支持數組和對象。

示例:

<a v-bind:href="url" v-bind:class="{active: isActive}">點我</a>
<a v-bind:href="url" v-bind:class="cls">點我</a>

v-on
縮寫：@
預期：Function | Inline Statement | Object
參數：event
修飾符： 
.stop - 調用 event.stopPropagation()。
.prevent - 調用 event.preventDefault()。
.capture - 添加事件偵聽器時使用 capture 模式。
.self - 只當事件是從偵聽器綁定的元素自己觸發時才觸發回調。
.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。
.native - 監聽組件根元素的原生事件。
.once - 只觸發一次回調。
.left - (2.2.0) 只當點擊鼠標左鍵時觸發。
.right - (2.2.0) 只當點擊鼠標右鍵時觸發。
.middle - (2.2.0) 只當點擊鼠標中鍵時觸發。
.passive - (2.3.0) 以 { passive: true } 模式添加偵聽器
用法： 
綁定事件監聽器。事件類型由參數指定。表達式能夠是一個方法的名字或一個內聯語句，若是沒有修飾符也能夠省略。 
從 2.4.0 開始，v-on 一樣支持不帶參數綁定一個事件/監聽器鍵值對的對象。注意當使用對象語法時，是不支持任何修飾器的。 
用在普通元素上時，只能監聽 原生 DOM 事件。用在自定義元素組件上時，也能夠監聽子組件觸發的自定義事件。 
在監聽原生 DOM 事件時，方法以事件爲惟一的參數。若是使用內聯語句，語句能夠訪問一個 $event 屬性：v-on:click="handle('ok', $event)"。

示例:

v-on傳入一個對象:

//綁定元素的mouseenter和click事件
<button  v-on="{mouseenter:onEnter,click:onClick}">點我</button>

或者能夠這麼寫:

<button v-on:click="onClick" v-on="{mouseenter:onEnter}">點我</button>

Vue:

var app = new Vue({
    el:'#app',
    data:{
        foodList:[{
            name:'aa',
            age:10,
            ratio:0.5
        },{
            name:'bb',
            age:20,
            ratio:0.5
        },{
            name:'cc',
            age:30
        }],
        url:'http://www.baidu.com',
        img:'https://dummyimage.com/100x100/ffcc00/ffffff',
        cls:'myCls',
        isActive:true
    },
    methods:{
        onClick:function(){
            console.info(111);
        },
        onEnter:function(){
            console.info(222);
        }
    }
});