既然點開了，就不啰嗦為什么學Vue了，或者Vue有多好。實在太多大佬已經(jīng)解釋過了。初體驗，那么必然就是先怎么安裝，然后怎么使用Vue輸出Hello World，最后再說一下Vue的總體結(jié)構(gòu)。
一、安裝
一共有三種安裝方式：
- 直接CDN引入
- 開發(fā)環(huán)境：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
- 生產(chǎn)環(huán)境：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
- 下載Vue.js文件并在使用時引入
- 開發(fā)版本下載地址：https://cn.vuejs.org/js/vue.js
- 生產(chǎn)版本下載地址：https://cn.vuejs.org/js/vue.min.js
- 使用<script src="存放的js代碼位置"></script>引用
- 安裝
- npm install vue
這里生產(chǎn)環(huán)境和開發(fā)版主要有以下區(qū)別：
- 開發(fā)版本包含完整的警告和調(diào)試模式,生產(chǎn)版本刪除了警告
- 生產(chǎn)環(huán)境一個更小的構(gòu)建，可以帶來比開發(fā)環(huán)境下更快的速度體驗
二、Vue初體驗
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">{{message}}</div>
<script src="./../js/vue.js"></srcipt>
<script>
const app = new Vue({
el: "#app",
data: {
message: "Hello Vuejs"
}
})
</script>
</body>
</html>
其中可以看到，我是下載了js的代碼，然后在<script>標簽中引用，而且引用的是開發(fā)版本。
代碼中核心有兩個部分，一個是<div id="app"></div>這個模塊，另一個是const app = new Vue({...})，其中第一個很好理解，就是標簽，HTML文檔里的標簽。而另一部分則是初始化了一個Vue實例，并將此實例使用了一個常量app定義。
在初始化Vue實例的時候，帶入了兩個參數(shù)，一個是el:"#app"，這表示這個Vue實例將作用在id="app"的標簽上。另一個是data: {message:"Hello Vuejs"}這是Vue實例中的數(shù)據(jù)。
數(shù)據(jù)用來干嘛呢？我們都聽說Vue是響應式的，所謂響應式就是當數(shù)據(jù)發(fā)生變化時，界面會跟隨這發(fā)生變化。這其中的變化就不得不說一下Vue的MVVM了。
三、Vue的MVVM
View層：視圖層，在前端中通常就是DOM層，主要作用是給用戶展示各種信息
Model層：數(shù)據(jù)層，其中數(shù)據(jù)可以是自定義的固定數(shù)據(jù)，也可以是從網(wǎng)上請求過來的服務(wù)器數(shù)據(jù)
ViewModel層：視圖模型層，是View層與Model層溝通的橋梁，一方面它實現(xiàn)了數(shù)據(jù)綁定，將Model層中的數(shù)據(jù)的改變實時反應到View層中展示。另一方面實現(xiàn)了DOM的監(jiān)聽，當DOM發(fā)生一些事件（點擊、滾動、touch等）時，ViewModel層可以監(jiān)聽到，并在需要時改變Model層中的數(shù)據(jù)。而這個ViewModel層在代碼中正是new Vue({...})
這也正好解釋了為什么要在初始化Vue類的實例時傳入el和data。其中el指代了要使用模板替換DOM中的哪個區(qū)域，并監(jiān)聽。而data保存了Model層中的數(shù)據(jù)。那么初始化Vue實例時，到底做了什么，那就得看看下面Vue的生命周期了。
四、Vue的生命周期
圖中主要流程是Vue實例的生命周期，紅色框內(nèi)的就是生命周期函數(shù)，也就是鉤子函數(shù)，即當Vue流程處于那一步時，會回調(diào)的函數(shù)。這里常用的生命周期函數(shù)有
created：一般用于請求服務(wù)器中的數(shù)據(jù)
mounted：用于掛載模板之后的一些操作
destroyed: 用于銷毀當前Vue時作相應的操作
當被包裹在<keep-alive>中還有activated和deactivated函數(shù)，<keep-alive>包裹的組件離開時就不會銷毀，會緩存數(shù)據(jù)，避免頻繁渲染。activate：是在被包裹的組件被激活時使用的生命周期鉤子deactivated：在被包裹組件停止使用時調(diào)用。
