Vue
Vue是一個輕量級，比較容易上手的一個框架。與普通的Jquery庫，以及其他的ui框架不同，Vue是更加完整的。
vue特點：
- 類似於後端的MVC的理念，這裏的理念是MVVM。Model-View-ViewModel的簡寫【模型】指的是數據。【視圖】指的是所看到的頁面。【視圖模型】mvvm模式的核心，它是連接view和model的橋樑。它有兩個方向：一是將【模型】轉化成【視圖】，即將後端傳遞的數據轉化成所看到的頁面。實現的方式是：數據綁定。二是將【視圖】轉化成【模型】，即將所看到的頁面轉化成後端的數據。實現的方式是：DOM
事件監聽。這兩個方向都實現的，我們稱之爲數據的雙向綁定。總結：在MVVM的框架下視圖和模型是不能直接通信的。它們通過ViewModel來通信，ViewModel通常要實現一個observer觀察者，當數據發生變化，ViewModel能夠監聽到數據的這種變化，然後通知到對應的視圖做自動更新，而當用戶操作視圖，ViewModel也能監聽到視圖的變化，然後通知數據做改動，這實際上就實現了數據的雙向綁定。並且MVVM中的View
和 ViewModel可以互相通信。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-d2KhnMcG-1589117099588)(media/97b01f8ed8942207f012ed4d35088ee0.png)]
MVVM是借鑑了後端的MVC理念，並在其基礎上衍生。MVVM
就誕生了。這個理念也是Vue的一個非常鮮明的特點。
- 漸進式
不管是單頁面還是多頁面。首先都是通過聲明式渲染聲明每個字段，這是基本的要求。
基本要求不管什麼頁面，什麼功能，都會使用聲明式渲染，去渲染我們的字段，因爲我們需要展現一些功能一些信息，那麼就要通過渲染纔可以。通常我們會把公共的頭部和尾部抽出來，做成組件。這時候就需要使用組件系統。
單頁面應用程序時往往是需要路由，這時候需要把vue的插件（vue-router）拉進來做路由，如果我們的項目足夠複雜，大量的使用組件而且難以去管理組件的狀態，這個時候我們使用vue-resource,vue-resource是集中來管理我們的狀態的。項目完成後需要構建工具來build我們的系統，來提高我們的效果，最後形成完成的項目。
- 組件化
組件化就像Js裏面的函數一樣，又或者像後端語言中的類一樣。如果一個項目中有一個模塊需要多次使用就可以把這個模塊寫成一個組件然後哪裏用到就引入調用即可。比如輪播，一個項目中可能會多次用到就可已封裝成一個vue組件。哪裏需要用就可以用import進行引入調用。
- 指令
Vue提供了很多的指令。如@click點擊事件指令
<div @click=”active”></div>
V-for
<div v-for="(item,index) in items"></div>
V-for是一個非常好用的指令。在項目中往往很多地方是需要在Js裏動態創造標籤進行編寫。在Js裏面動態創造標籤不僅語法麻煩，而且需要用字符串編寫，一不小心寫錯了需要找半天。V-for指令就非常好的解決了這個問題。
- 生命週期
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7K8GdAqh-1589117099591)(media/b3251a15e5779fcfec925b78a149f5c8.png)]
安裝vue cli3
- 安裝node.js
首先檢查電腦上有沒有nodejs
命令：node-v
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-kb4Urjqw-1589117099593)(media/389655aa2e7ed47caf46a6c2f8364fde.png)]
安裝網址：http://nodejs.cn/
- 安裝vue cli
Npm命令：npm install -g @vue/cli
- 創建一個項目
// 創建命令 名字
// ↓ ↓ ↓↓
Npm命令：vue create hello-world
錯誤：vue : 無法加載文件 C:\Users\lihongjie\AppData\Roaming\npm\vue.ps1，因爲在此係統上禁止運行腳本。有關詳細信息，請參閱 htt ps:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 1 + vue init webpack vue_p
解決：以管理員方式打開powershell
npm：set-ExecutionPolicy RemoteSigned
執行策略更改
執行策略可幫助你防止執行不信任的腳本。更改執行策略可能會產生安全風險，如
https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 幫助主題所述。是否要更改執行策略?
[Y] 是(Y) [A] 全是(A) [N] 否(N) [L] 全否(L) [S] 暫停(S) [?] 幫助 (默認值爲“N”):
Y
即可
安裝步驟：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-IEcOr479-1589117099596)(media/98e4b1bb82d326bb4eb8dc84e84b58c3.png)]
打開：cd hello-world
npm run serve
創建成功進入會顯示：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-8yhvoZDE-1589117099598)(media/e3710baeb464f1572d189d2442337cae.png)]
- 指令
- v-bind:
什麼是: 專門綁定元素的屬性值
爲什麼: {{}}只能綁定元素內容，不能綁定元素屬性值
何時: 只要元素的屬性值需要根據變量自動變化時，都用v-bind。
如何: <元素 v-bind:屬性=“js表達式”
其實可簡寫爲 “:屬性”
強調: 1. 加了:的屬性，值中不用再加{{}}
加了:的屬性，"“就是{{}}的作用，”"中不但可以寫值/變量，而且也可以寫js表達式
- 根據條件控制元素的顯示和隱藏:
- 控制一個元素的顯示隱藏:
<元素 v-show=“條件表達式”
結果:
- 如果條件表達式執行結果爲true，則當前元素顯示——會去掉display:none
如果條件表達式執行結果爲false，則當前元素隱藏——會自動將v-show替換爲display:none
- 控制兩個元素二選一顯示隱藏
問題:
v-show如果控制多個元素多選一顯示隱藏，必須把判斷條件在每個元素上都重複寫一遍，代碼繁瑣！
解決: v-if v-else
如何:
<元素1 v-if=“判斷條件”>
<元素2 v-else-if=”判斷條件”>
結果:
如果判斷條件返回true，就顯示第一個元素，刪除第二個元素
如果判斷條件返回false，就顯示第二個元素，刪除第一個元素
強調:
- 兩個元素之間不能插入其他元素
- v-else不需要屬性值
- 控制多個元素多選一顯示隱藏
用v-else-if
<元素1 v-if=“條件1”>
<元素2 v-else-if=“條件2”>
…
<元素n v-else>
原理：
從上向下一次判斷每個v-if或v-else-if後的條件。
只要條件不滿足就刪除該元素
只有滿足條件的元素纔會保留下來用於顯示。
如果判斷走到了下一個元素上，隱含着上一個元素的條件肯定不滿足
強調:
- 多個元素之間不能插入其他元素
- v-else不需要屬性值
總結: v-show vs v-if
v-show採用display:none 隱藏元素
v-if 採用直接刪除元素隱藏元素
-
反覆生成多個相同結構的元素
-
前提: 一定有一個數組或一個數值，讓你可參照着反覆生成元素內容
-
如何:
<要反覆生成的元素 v-for="(item,i) of 數組或數值">
在<子元素>中可以將item和i用於綁定值
…
</要反覆生成的元素>
- 原理:
數組中有幾個元素，vue在掃描時，就會重複創建幾個相同結果的元素。
每遍歷數組中一個元素，就可以獲得兩個值:
第一個變量item獲得數組中當前元素的值，第二個變量i獲得當前正在遍歷的數組元素的下標位置。
每創建一個元素，就會將重複結構中的綁定語法，替換爲本次遍歷獲得的item或index值
- 強調:
-
想重複生成哪個元素，v-for就放在哪個元素的開始標籤中！
-
v-for=" of "原理和js中的for of完全一樣，只不過js中的for
of只能獲得元素的內容，無法獲得元素的下標。而vue中的v-for
of即可獲得元素內容，又可獲得下標。
- :key :
每個v-for的元素中，都強烈綁定一個key屬性，值爲當前元素的下標位置index。
<要反覆生成的元素 v-for="(item,i) of 數組或數值" :key=“i”>
在<子元素>中可以將item和i用於綁定值
…
</要反覆生成的元素>
不加:key，每個<li>最終除了內容，在屬性上是毫無差別的，當數組中某個位置的元素髮生更改時，vue只能用最笨的方法，遍歷所有li，把所有li的內容重新更新一遍。
加:key， 每個<li>就變成: <li key=“0”><li
key=“1”>…，就都有了一個唯一的標識。當數組中某個元素髮生改變時，vue就可根據修改元素的下標位置，對應找到相同key值的元素，只更新這個位置相同的元素，別的元素保持不變。
- 綁定事件:
<元素 v-on:事件名=“處理函數”
可簡寫爲@事件名=“處理函數”
四種情況:
-
如果處理函數不需要參數，可省略()
-
如果處理函數需要參數，也可加(實參值, …)
-
如果處理函數需要獲得事件對象
-
不需要在綁定時傳參
-
只在methods中定義函數時添加第一個形參e即可。
-
e獲得的對象和DOM中事件對象e，完全一樣。
-
綁定HTML片段內容:
問題:
{{}}不能用於綁定html片段。如果{{}}綁定的是HTML片段，不會解析其中的內嵌標籤和特殊符號，而是儘量保持原樣顯示
解決: 今後，凡是綁定HTML片段，都用v-html
強調: v-html是指令，應該放在開始標籤內！
- axios:
什麼是: 專門發送ajax請求的js函數庫
Vue官方推薦使用第三方函數庫: axios
何時: 今後只要在vue中發送ajax請求，都可用axios
說明: axios其實是第三方獨立的函數庫，並不僅僅侷限於vue中！
如何:
- 發get請求:
axios.get(
“服務端接口地址”,
{
params:{
參數:值,
… : …
}
}
).then(result=>{
result.data 纔是服務器端返回的結果！
})
- 發post請求:
補: 如果服務端給出的接口是post類型，可用postman軟件先測試一下。
axios.post(
“服務端接口地址”,
//本來需要"查詢字符串"
//比如:“uname=dingding&upwd=123456”
//不推薦
//推薦: 對象語法
//但是必須藉助一個工具叫qs.min.js
//<script src=“js/qs.min.js”>
//Qs的stringify函數可將對象轉爲查詢字符串格式
Qs.stringify({
變量1:值1,
變量2:值2
})
//轉換之後: “變量1=值1&變量2=值2”
).then(result=>{
result.data 纔是服務器端返回的結果！
})
頁面跳轉傳遞參數：
跳轉的頁面：
Bun(){//跳轉方法
This.$router.push({
path:”/index”,//跳轉路由
name:”index”//跳轉名字
query:{ name:”name”},
params:{usersitelist:”傳遞的參數”}
})
}
跳轉到的頁面接受值：
//接受數據的值
↓↓
this.chuan=this.$route.param. usersitelist
=值2"
).then(result=>{
result.data 纔是服務器端返回的結果！
})
頁面跳轉傳遞參數：
跳轉的頁面：
Bun(){//跳轉方法
This.$router.push({
path:”/index”,//跳轉路由
name:”index”//跳轉名字
query:{ name:”name”},
params:{usersitelist:”傳遞的參數”}
})
}
跳轉到的頁面接受值：
//接受數據的值
↓↓
this.chuan=this.$route.param. usersitelist