Vue學習筆記之Hello Vue
1. 引言
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
1.1. Vue的優勢
- 輕量級， 體積小是一個重要指標。Vue.js壓縮後有只有20多kb(Angular壓縮後56kb+，React壓縮後44kb+)
- 移動優先。更適合移動端， 比如移動端的Touch事件
- 易上手，學習曲線平穩，文件齊全
- 吸取了Angular(模組化) 和React(虛擬DOＭ) 的長處， 並擁有自己獨特的功能，如：計算屬性
- 開源，社群活躍度高
1.2. MVVM
MVVM（Model-View-ViewModel）是一種軟體設計模式，是一種簡化使用者介面的事件驅動程式設計方式。MVVM源自於經典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel層，負責轉換Model中的資料物件來讓資料變得更容易管理和使用。其作用如下：
- 該層向上與檢視層進行雙向資料繫結
- 向下與Model層通過介面請求進行資料互動
MVVM模式和MVC模式一樣，主要目的是分離檢視（View）和模型（Model），有幾大好處：
- 低耦合：檢視（View）可以獨立於Model變化和修改，一個ViewModel可以繫結到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
- 可複用：你可以把一些檢視邏輯放在一個ViewModel裡面，讓很多View重用這段檢視邏輯。
- 獨立開發：開發人員可以專注於業務邏輯和資料的開發（ViewMode），設計人員可以專注於頁面設計。
- 可測試：介面素來是比較難以測試的，而現在測試可以針對ViewModel來寫。
1.3. MVVM模式的實現者
-
Model：模型層， 在這裡表示JavaScript物件
-
View：檢視層， 在這裡表示DOM(HTML操作的元素)
-
ViewModel：連線檢視和資料的中介軟體， Vue.js就是MVVM中的View Model層的實現者
在MVVM架構中， 是不允許資料和檢視直接通訊的， 只能通過ViewModel來通訊， 而View Model就是定義了一個Observer觀察者： -
ViewModel能夠觀察到資料的變化， 並對檢視對應的內容進行更新
-
ViewModel能夠監聽到檢視的變化， 並能夠通知資料發生改變
至此， 我們就明白了， Vue.js就是一個MVVM的實現者， 他的核心就是實現了DOM監聽與資料繫結
2. 第一個Vue程式
嘗試 Vue.js 最簡單的方法是使用 Hello World 例子
2.1. 建立一個HTML檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Vue</title>
</head>
<body>
</body>
</html>
2.2. 引入Vue.js
<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.3. 建立一個Vue例項
<script type="text/javascript">
var app = new Vue({
el:"",
data:{
message:"Hello Vue"
}
})
</script>
2.4. 將資料繫結到頁面元素
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue"
}
})
</script>
2.5. 測試執行
整個HTML檔案完整內容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Vue</title>
<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue"
}
})
</script>
</body>
</html>
用瀏覽器開啟這個檔案可以看到（筆者使用HBuilderX）：
使用F12開啟控制檯，嘗試修改app這個物件的message屬性，發現網頁也隨著變化：
這就再次驗證了Vue.js就是一個MVVM的實現者， 他的核心就是實現了DOM監聽與資料繫結
3. 參考資料
[1]Vue.js 中文文件