vue.js入門教程之基礎(chǔ)語法小結(jié)

更新時間：2016年09月01日 16:18:30 投稿：daisy

這篇文章我們將學(xué)習(xí)vue.js的基礎(chǔ)語法，對于大家學(xué)習(xí)vue.js具有一定的參考借鑒價值，有需要的朋友們下面來一起看看。

前言

Vue.js是一個數(shù)據(jù)驅(qū)動的web界面庫。Vue.js只聚焦于視圖層，可以很容易的和其他庫整合。代碼壓縮后只有24kb。

以下代碼是Vue.js最簡單的例子，當 input 中的內(nèi)容變化時，p 節(jié)點的內(nèi)容會跟著變化。

<!-- html -->
<div id="demo">
 <p>{{message}}</p>
 <input v-model="message">
</div>
new Vue({
 el: '#demo',
 data: {
 message: 'Hello Vue.js!'
 }
})

vue.js的基礎(chǔ)語法

插入文本

<span>Message: {{ text }}</span>

插入html格式的文本，在頁面顯示為html的格式

<span>Message: {{{ html }}}</span>

內(nèi)容不跟隨data的變化

<span>Message: {{ * text }}</span>

屬性上綁定數(shù)據(jù)

<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指令將根據(jù)表達式 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>

總結(jié)

模板中表達式非常便利，但是它們實際上只用于簡單的操作。模板是為了描述視圖的結(jié)構(gòu)。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什么 Vue.js 將綁定表達式限制為一個表達式。如果需要多于一個表達式的邏輯，應(yīng)當使用計算屬性。小編會在后面給更新如何使用計算屬性。感興趣的朋友們請繼續(xù)關(guān)注腳本之家。

您可能感興趣的文章: