Vue02-第一個vue程式

1、MVVM

1.1、什麼是MVVM

MVVM（Model-View-ViewModel）是一種軟體設計模式，由微軟WPF（用于替代WinForm，以前就是用這個技術開發桌面應用程式的）和Silverlight（類似于Java Applet，簡單點說就是在浏覽器上運作WPF）的架構師Ken Cooper和Ted Peters開發，是一種簡化使用者界面的事件驅動程式設計方式。由John Gossman（同樣也是WPF和Sliverlight的架構師）于2005年在他的部落格上發表。

MVVM源自于經典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel層，負責轉換Model中的資料對象來讓資料變得更容易管理和使用。其作用如下：

該層向上與視圖層進行雙向資料綁定
向下與Model層通過接口請求進行資料互動

MVVM已經相當成熟了，主要運用但不僅僅在網絡應用程式開發中。當下流行的MVVM架構有

Vue.js

，

Angular.js

1.2、為什麼要使用MVVM

MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model），有幾大好處

低耦合：視圖（View）可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
可複用：你可以把一些視圖邏輯放在一個ViewModel裡面，讓很多View重用這段視圖邏輯。
獨立開發：開發人員可以專注于業務邏輯和資料的開發（ViewModel），設計人員可以專注于頁面設計。
可測試：界面素來是比較難以測試的，而現在測試可以針對ViewModel來寫。

View

View 是視圖層，也就是使用者界面。前端主要由

HTML

和

CSS

來建構，為了更友善地展現

ViewModel

或者

Model

層的資料，已經産生了各種各樣的前後端模闆語言，比如FreeMarker、Thymeleaf等等，各大MVVM架構如Vue.js，Angular.js，EJS等也都有自己用來建構使用者界面的内置模闆語言。

Model

Model 是指資料模型，泛指後端進行的各種業務邏輯處理和資料操控，主要圍繞資料庫系統展開。這裡的難點主要在于需要和前端約定統一的

接口規則

。

ViewModel

ViewModel 是由前端開發人員組織生成和維護的視圖資料層。在這一層前端開發者對從後端擷取的 Model 資料進行轉換處理，做二次封裝。以生成符合 View 層使用預期的視圖資料模型。

需要注意的是 ViewModel 所封裝出來的資料模型包括視圖的狀态和行為兩部分，而 Model 層的資料模型是隻包含狀态的

比如頁面的這一塊展示什麼，那一塊展示什麼，這些都屬于視圖狀态（展示）
頁面加載進來時發生什麼，點選這一塊發生什麼，這一塊滾動時發生什麼，這些都屬于視圖行為（互動）

視圖狀态和行為都封裝在了View Model裡。這樣的封裝使得View Model可以完整地去描述View層。由于實作了雙向綁定，View Model地内容會實時展現在View層，這是激動人心的，因為前端開發者再也不必低效又麻煩地通過操作DOM去更新視圖。

MVVM架構已經把最髒最累地一塊做好了，我們開發者隻需要處理和維護View Model，更新資料視圖就會自動得到相應更新，真正實作事件驅動程式設計。

View層展現的不是Model層的資料，而是ViewModel的資料，由ViewModel負責與Model層互動，擷取和更新資料，這就完全解耦了View層和Model層，這個解耦是至關重要的，它是前後端分離方案實施的重要一環。

2、Vue

Vue(讀音/vju/，類似于view) 是一套用于建構使用者界面的漸進式架構，釋出于2014年2月。與其它大型架構不同的是， Vue被設計為可以自底向上逐層應用。Vue的核心庫隻關注視圖層，不僅易于上手，還便于與第三方庫(如：vue-router，vue-resource，vue x) 或既有項目整合。

2.1、MVVM模式的實作者

Model：模型層，在這裡表示JavaScript對象
View：視圖層，在這裡表示DOM（HTML操作的元素）
ViewModel：連接配接視圖和資料的中間件，Vue.js就是MVVM中的View Model層的實作者

在MVVM架構中，是不允許資料和視圖直接通信的，隻能通過ViewModel來通信，而ViewModel就是定義了一個Observer觀察者

ViewModel能夠觀察到資料的變化，并對視圖對應的内容進行更新
ViewModel能夠監聽到視圖的變化，并能夠通知資料發生改變

至此，我們就明白了，Vue.js就是一個MVVM的實作者，它的核心就是實作了DOM監聽與資料綁定

2.2、為什麼要使用Vue.js

輕量級，體積小是一個重量名額。Vue.js壓縮後有隻有20多kb(Angular壓縮後56kb+，React壓縮後44kb+)
移動優先。更适合移動端，比如移動端的Touch事件
易上手，學習曲線平穩，文檔齊全
吸取了Angular（子產品化）和React（虛拟DOM）的長處，并擁有自己獨特的功能，如：計算屬性
開源，社群活躍度高
......

3、第一個Vue程式

【說明】IDEA可以安裝Vue的插件! 注意：Vue不支援IE 8及以下版本，因為Vue使用了IE 8無法模拟的ECMAScript 5特性。但它支援所有相容ECMAScript 5的浏覽器。

3.1、下載下傳位址

開發版本
- 包含完整的警告和調試模式：https：//yuejs.org/js/vue.js
- 删除了警告， 30.96KBmin+gzip：https：//vuejs.org/js/vue.min.js
CDN
- <script src=“https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js”></script>
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

3.2、代碼編寫

Vue.js的核心是實作了MVVM模式，她扮演的角色就是View Model層，那麼所謂的第一個應用程式就是展示她的資料綁定功能，操作流程如下：

1、建立一個HTML檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

2、引入Vue.js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

3、建立一個Vue執行個體

<script>
    var vm = new Vue({
        el: "#app",
        // Model ：資料
        data: {
            message: "hello,vue!"
        }
    });
</script>
<!--
 el: "#app"：綁定元素的ID
 data: {message: "hello,vue!"}：資料對象中有一個名為message的屬性，并設定了初始值 hello,vue!
-->

4、将資料綁定到頁面元素

<!--view層 模闆-->
<div id="app">
    {{message}}
</div>

3.3、完整的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view層 模闆-->
<div id="app">
    {{message}}
</div>

<!--1.導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        // Model ：資料
        data: {
            message: "hello,vue!"
        }
    });
</script>
</body>
</html>

3.4、測試

為了能夠更直覺的體驗Vue帶來的資料綁定功能，我們需要在浏覽器測試一番，操作流程如下：

1、在浏覽器上運作第一個Vue應用程式，進入開發者工具

2、在控制台輸入vm.message=‘HelloWorld’，然後回車，你會發現浏覽器中顯示的内容會直接變成HelloWorld

此時就可以在控制台直接輸入vm.message來修改值，中間是可以省略data的，在這個操作中，我并沒有主動操作DOM，就讓頁面的内容發生了變化，這就是借助了Vue的資料綁定功能實作的； MVVM模式中要求ViewModel層就是使用觀察者模式來實作資料的監聽與綁定，以做到資料與視圖的快速響應。