Vue.js簡(jiǎn)介
什么是Vue？
Vue.js (讀音 /vju?/，類似于 view) 是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫(kù)只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用程序提供驅(qū)動(dòng)。
Vue的特點(diǎn)：以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。相比于Angular.js，Vue.js提供了更加簡(jiǎn)潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。
常見的其他前端庫(kù)
MVVM模式
Vue是目前前端中非常有名氣的JavaScript MVVM模式庫(kù)。MVVM是Model-View-ModelView的縮寫。Vue實(shí)現(xiàn)了將數(shù)據(jù)模型和DOM的雙向綁定過程。
- 從View側(cè)看，ViewModel上的
DOM Listener，可以監(jiān)聽DOM上的變化，并將這些變化更新到數(shù)據(jù)模型中。 - 從ViewModel側(cè)看，當(dāng)我們更新數(shù)據(jù)模型上的數(shù)據(jù)的時(shí)候，
Data Binding負(fù)責(zé)將數(shù)據(jù)更新到DOM模型上。
image.png
實(shí)例1，入門
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var model = {
message: 'Hello World!'
}
// 創(chuàng)建一個(gè) Vue 實(shí)例
new Vue({
el: '#app',
data: model
})
</script>
</body>
</html>
使用Vue.js的基本步驟是：
- 通過HTML網(wǎng)頁(yè)，編寫視圖部分，通常視圖部分放到一個(gè)
<div>標(biāo)簽中，并指定ID。 - 定義數(shù)據(jù)模型，通常數(shù)據(jù)模型就是一個(gè)
JavaScript對(duì)象。 - 創(chuàng)建Vue實(shí)例（即
數(shù)據(jù)模型，View Model），完成View和模型的雙向綁定過程。
實(shí)例2，雙向綁定
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var model = {
message: 'Hello World!'
}
// 創(chuàng)建一個(gè) Vue 實(shí)例
new Vue({
el: '#app',
data: model
})
</script>
</body>
</html>
