v-bind:class="{'class1': class1}"
v-on:click="showAlert"
v-bind:href="url"

数据双向绑定 ：
<p>{{ message }}</p>
<input v-model="message">

数据过滤器 :
{{ message | filterA | filterB('xx',message)}}

filters: {
capitalize: function (x) {
do?
return x?
}
}

缩写 ：
v-bind 缩写

<a v-bind:href="url"></a>

<a :href="url"></a>
v-on 缩写

<a v-on:click="doSomething"></a>

<a @click="doSomething"></a>

if -else -- if :
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else>
Not A/B/C
</div>
</div>
我们也可以使用 v-show 指令来根据条件展示元素：

v-for :
<li v-for="site in sites">
{{ site.name }}
</li>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>

computed vs methods
computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
<p>计算后反转字符串: {{ reversedMessage }}</p>
<p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
computed: {
// 计算属性的 getter
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}

watch : 用于监听数据变化时间
v-model = "kilometers"
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
}
}

事件管理 ： JQ的事件模式
<button v-on:mouseover.once="say('hi')">Say hi</button>

表单问题：