數(shù)據(jù)綁定
數(shù)據(jù)綁定就是指將js中的變量自動(dòng)更新到html中县袱。如下代碼, message的默認(rèn)值是“Hello Vue.js!”, 那么當(dāng)頁(yè)面啟動(dòng)時(shí)，html中的默認(rèn)值會(huì)被設(shè)置成“Hello Vue.js”
<!-- html -->
<div id="demo">
<p>{{message}}</p>
<input v-model="message">
</div>
new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
}
})
如果要輸出原生的html轴总，可以使用三個(gè)大括號(hào)來(lái)實(shí)現(xiàn)
<p>{{{messageHtml}}}</p>
也可以做表達(dá)式的綁定
<div>{{length - 1}}</div>
<div>{{isShow ? 'block' : 'none'}}</div>
指令
指令是特殊的帶有前綴 v- 的特性担败。當(dāng)表達(dá)式的值發(fā)生變化時(shí)，響應(yīng)應(yīng)用特定的行為到DOM料仗。
<!-- 當(dāng)greeting為true時(shí)状婶，才顯示p節(jié)點(diǎn) -->
<p v-if="greeting">hello</p>
<!-- 綁定href屬性為js中url的值 -->
<a v-bind:href="url"></a>
<!-- 綁定事件意敛，btnClick是js方法 -->
<button v-on:click="btnClick"></button>
指令可以進(jìn)行縮寫(xiě)
<a v-bind:href="url"></a>
<a :href="url"></a>
<button v-on:click="btnClick"></button>
<button @click="btnClick"></button>
html模板
Vue.js支持對(duì)js對(duì)象進(jìn)行判斷(if), 循環(huán)(for)輸出。類似于前端模板膛虫。
<!-- 判斷草姻，如果ok為true,則顯示yes, 如果為false, 顯示no -->
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
<!-- 類似于v-if, v-if是是否加節(jié)點(diǎn)， v-show是display是否為none -->
<h1 v-show="ok">Hello!</h1>
<!-- 循環(huán)稍刀， 對(duì)items屬性進(jìn)行循環(huán)碴倾。 track-by指item的是否重復(fù)，對(duì)重復(fù)的進(jìn)行服用 -->
<!-- 循環(huán)中掉丽， $index表示數(shù)組第n個(gè)元素; $key表示對(duì)象的key -->
<ul id="example-1">
<li v-for="item in items" track-by="_uid">
{{ $index }} : {{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{_uid: '1', message: 'Foo' },
{_uid: '2', message: 'Bar' }
]
}
})
事件綁定
可以使用 v-on 指令來(lái)監(jiān)聽(tīng)DOM事件跌榔。
<div id="example-2">
<button v-on:click="say('hi', $event)">Say Hi</button>
<button v-on:click="say('what', $event)">Say What</button>
</div>
new Vue({
el: '#example-2',
methods: {
say: function (msg, event) {
alert(msg);
event.preventDefault();
}
}
})
常見(jiàn)的阻止冒泡，禁止默認(rèn)行為等event方法可以通過(guò)修飾符來(lái)快速處理捶障。
<!-- 禁止冒泡 -->
<a v-on:click.stop='do'></a>
<!-- 禁止冒泡和默認(rèn)行為 -->
<a @click.stop.prevent="do"></a>
對(duì)特殊按鍵生效也可以使用修飾符
<!-- keyCode是13的時(shí)候出發(fā)僧须。 -->
<input v-on:keyup.13="submit" />
<input v-on:keyup.enter="submit" />
<!-- 支持的鍵名有： enter,tab,delete,esc,space,up,down,left,right -->
