亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間：2016年09月01日 16:18:30   投稿：daisy  
這篇文章我們將學(xué)習(xí)vue.js的基礎(chǔ)語(yǔ)法，對(duì)于大家學(xué)習(xí)vue.js具有一定的參考借鑒價(jià)值，有需要的朋友們下面來(lái)一起看看。

前言

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

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

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

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

插入文本

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

插入html格式的文本，在頁(yè)面顯示為html的格式

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

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

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

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

<div id="item-{{ id }}"></div>

在{{}}中使用js表達(dá)式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

在{{}}中使用js語(yǔ)句

{{ var a = 1 }}
{{ if (ok) { return message } }}

if指令

<p v-if="greeting">Hello!</p>
這里 v-if指令將根據(jù)表達(dá)式 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

<!-- 完整語(yǔ)法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
<!-- 完整語(yǔ)法 -->
<button v-bind:disabled="someDynamicCondition">Button</button><!-- 縮寫 -->
<button :disabled="someDynamicCondition">Button</button>

v-on

<!-- 完整語(yǔ)法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>

總結(jié)

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

相關(guān)文章

最新評(píng)論