Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的庫(kù)枪孩，主要特點(diǎn)是響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件被碗，只聚焦于視圖層伶丐。因此它非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合潮峦。在與相關(guān)工具和支持庫(kù)一起使用時(shí)囱皿，Vue.js 也能完美地驅(qū)動(dòng)復(fù)雜的單頁(yè)應(yīng)用。
Vue.js 的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)忱嘹，它讓數(shù)據(jù)與 DOM 保持同步非常簡(jiǎn)單嘱腥。在使用 jQuery 手工操作 DOM 時(shí)，我們的代碼常常是命令式的拘悦、重復(fù)的與易錯(cuò)的齿兔。Vue.js 擁抱數(shù)據(jù)驅(qū)動(dòng)的視圖概念。通俗地講础米，它意味著我們?cè)谄胀?HTML 模板中使用特殊的語(yǔ)法將 DOM “綁定”到底層數(shù)據(jù)愧驱。一旦創(chuàng)建了綁定，DOM 將與數(shù)據(jù)保持同步椭盏。每當(dāng)修改了數(shù)據(jù)组砚，DOM 便相應(yīng)地更新。這樣我們應(yīng)用中的邏輯就幾乎都是直接修改數(shù)據(jù)了掏颊，不必與 DOM 更新攪在一起糟红。這讓我們的代碼更容易撰寫、理解與維護(hù)乌叶。
雙向綁定
我們通過(guò)很簡(jiǎn)單的JS對(duì)象綁定到Dom元素上盆偿，同時(shí)輸入文本框的內(nèi)容變化時(shí)候段落的內(nèi)容也會(huì)發(fā)生變化:
<!-- 綁定內(nèi)容 -->
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'Hello FlyElephant'
}
})
</script>
綁定列表
我們除了綁定一對(duì)一的元素之外還可以通過(guò)Vue.js的指令系統(tǒng)來(lái)實(shí)現(xiàn)數(shù)組的綁定:
<!-- 綁定列表 -->
<div id="applist">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: '#applist',
data: {
todos: [
{ text: '簡(jiǎn)書(shū)' },
{ text: 'FlyElephant },
{ text: 'keso' }
]
}
})
事件響應(yīng)
頁(yè)面中經(jīng)常會(huì)響應(yīng)用戶的各種點(diǎn)擊事件，下面可以通過(guò)Vue來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的按鈕點(diǎn)擊事件：
<!-- 綁定輸入 -->
<div id="appinput">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script type="text/javascript">
new Vue({
el: '#appinput',
data: {
message: 'Hello FlyElephant'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
