一、Vue概述
什么是漸進式？
1、把Vue作應用的一部分嵌套項目中
2、如果完全拋棄其他組件和框架，Vue又具有豐富的生態和庫萊支持
3、Core + Router + VueX 滿足項目絕大多數的需求
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
特點和特性：
1、解耦視圖與數據
2、可復用的組件
3、前端路由技術
4、狀態管理
5、虛擬Dom
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Vue 安裝
1、使用cdn引用
生產版本和開發版本的區別：
開發版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
保留代碼格式，保留警告、打印、提示
所以文件大小較大
生產版本：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
格式壓縮，移除所有的警告、打印、提示
文件大小被壓縮到很小
2、下載到本地進行引用
開發：
https://vuejs.org/js/vue.js
生產：
https://vuejs.org/js/vue.min.js
3、使用NPM安裝
通過webpack & CLI的使用進行安裝
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
原始的JS開發：【編程范式 ： 命令式編程】
1、創建一個div標簽
2、設置該標簽的id值為app
3、在js中定義message變量
4、把message變量放置在div標簽中進行顯示
Vue的開發：【編程范式 ：聲明式編程】
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
方法和函數的區別
Method
Function
方法一般被實例所調用，聲明定義在類中
函數不具有實例特性，直接聲明直接調用
二、上手案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 界面的部分只需要處理HTML標簽，不需要更改Mustache模板 --> <div id="app"> <h3>{{message}}</h3> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> const vm = new Vue({ el : '#app', // 綁定掛載的元素 data : { // 定義和聲明數據 message : '哈哈哈哈' /* 在這里處理數據 實現頁面和數據的解耦 */ /* 另外數據更新也不需要操作Dom實現，直接就能進行重新渲染 */ } }); </script> </body> </html>
展示列表：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h3>{{message}}</h3> <p>{{movies}}</p> <ul> <li v-for="movie in movies">{{movie}}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> const vm = new Vue({ el : '#app', data : { message : 'sda', movies : [ '大話西游', '星際穿越', '盜夢空間', '1911' ] } }); </script> </body> </html>
計數器案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 列表顯示 --> <div id="vue-application"> <h3>當前計數值 ： {{varCount}} </h3> <p> <button @click="increase">增加1</button> <button @click="decrease">減少1</button> </p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> let vueObj = new Vue({ el : '#vue-application' , data : { varCount : 0 }, methods : { increase() { // 對計數器的增加進行上限處理 if (this.varCount === 10) { alert('已達到上限'); return; } this.varCount ++ }, decrease() { // 對計數器的增加進行下限處理 if (this.varCount === 0) { alert('已達到下限'); return; } this.varCount -- } } }); </script> </body> </html>
三、理解MVVM
MVVM = Model + View + ViewModel
Model層：
數據層
來自服務請求提供的數據
View層：
視圖層
前端開發中Dom結構即視圖的顯現
主要用來給用戶呈現數據處理后的信息
ViewModel層：
視圖模型層
VM橋接了 View + Model，是兩者溝通建立的橋梁
實現了Data-binding也就是數據綁定
四、Vue實例生命周期
