DIV CSS 佈局教程網

前言

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 將綁定表達式限制為一個表達式。如果需要多於一個表達式的邏輯，應當使用計算屬性。小編會在後面給更新如何使用計算屬性。感興趣的朋友們請繼續關注。