前言
Vue.js是一個數據驅動的web界面庫。 Vue.js只聚焦於視圖層，可以很容易的和其他庫整合。代碼壓縮後只有24kb。
以下代碼是Vue.js最簡單的例子， 當input 中的內容變化時，p 節點的內容會跟著變化。
<!-- html --><div id="demo"> <p>{{message}}</p> <input v-model="message"></div>new Vue({ el: '#demo', data: { message: 'Hello Vue.js!' }})vue.js的基礎語法
插入文本
<span>Message: {{ text }}</span>插入html格式的文本，在頁面顯示為html的格式
<span>Message: {{{ html }}}</span>內容不跟隨data的變化
<span>Message: {{ * text }}</span>屬性上綁定數據
<div id="item-{{ id }}"></div>在{{}}中使用js表達式
{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}在{{}}中使用js語句
{{ var a = 1 }}{{ if (ok) { return message } }}if指令
<p v-if="greeting">Hello!</p>這裡v-if指令將根據表達式greeting值的真假刪除/插入<p>元素。
href指令
<a v-bind:href="url"></a>或者<a href="{{url}}"></a>click指令
<a v-on:click="doSomething">
回車指令
<input v-model="newTodo" v-on:keyup.enter="addTodo">
縮略寫法
v-bind
<!-- 完整語法--><a v-bind:href="url"></a><!-- 縮寫--><a :href="url"></a><!-- 完整語法--><button v-bind:disabled="someDynamicCondition">Button</button><!-- 縮寫--><button :disabled="someDynamicCondition">Button</button>
v-on
<!-- 完整語法--><a v-on:click="doSomething"></a><!-- 縮寫--><a @click="doSomething"></a>
總結
模板中表達式非常便利，但是它們實際上只用於簡單的操作。模板是為了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什麼Vue.js 將綁定表達式限制為一個表達式。如果需要多於一個表達式的邏輯，應當使用計算屬性。小編會在後面給更新如何使用計算屬性。感興趣的朋友們請繼續關注武林網。