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