既然點開了摩窃，就不啰嗦為什么學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)上請求過來的服務器數(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：一般用于請求服務器中的數(shù)據(jù)
mounted：用于掛載模板之后的一些操作
destroyed: 用于銷毀當前Vue時作相應的操作
當被包裹在<keep-alive>中還有activated和deactivated函數(shù)谴古，<keep-alive>包裹的組件離開時就不會銷毀质涛，會緩存數(shù)據(jù)，避免頻繁渲染讥电。activate：是在被包裹的組件被激活時使用的生命周期鉤子deactivated：在被包裹組件停止使用時調(diào)用蹂窖。
