Vue是一套用于構建用戶界面的漸進式框架，與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用，Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有專案整合，另一方面，當與現代化的工具鏈以及各種支持類別庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動，
vue是第三方開發的，所以需要下載才可使用；它基于MVVM設計模式；可以逐步在專案中使用vue技術(漸進)，還可以和其它技識訓搭；單靠瀏覽器就可以運行，不需要任何后端技術，
以資料操作(增刪改查)為主的專案，都可以由vue框架開發如：餓了么、大眾點評\淘寶、京東、今日頭條、微博、網易云音樂、小紅書、知乎、自如、鏈家、攜程.......等等；不是以資料操作為主的如大型游戲、微信、qq、抖音、愛奇藝等則盡量不用vue框架，
一、vue的使用 Vue.jsVue.js - The Progressive JavaScript Framework
http://cn.vuejs.org1.vue的下載
（1）只下載一個vue.js檔案，引入網頁使用
vue版本分為開發版和生產版，開發版(未壓縮版)有完備的注釋、代碼格式，以及見名知意的變數名和極其友好的錯誤提示，可讀性好，適合學習和開發之用，但是體積大，不適合生產環境快速下載運行，
生產版(壓縮版)去掉了所有數值和代碼格式，極簡化了變數名，去掉了友好的錯誤提示，體積小，適合生產環境快速下載運行，但是可讀性差，不適合學習和開發之用，
（2）使用vue腳手架工具
腳手架是一套已經包含核心功能的標準的半成品專案檔案和檔案夾結構，便于大專案的標準化和分工協作，
2.vue三步
1.做界面
1.1將界面中所有元素包裹在一個唯一的父元素下，通常用
<div id="app"></div>1.2找到界面中將來可能隨程式自動變化的位置，用{{ 變數名 }}來標記/占位；
1.3找到界面中將來可能觸發事件的元素，用專門的語法：@事件名="事件處理函式名" 來標記，
2.創建一個new Vue()物件，用來監控div所包含的區域
var vm = new Vue({ //vue物件中，必須用el屬性，指出new Vue()要監控的區域 el: "#app", })3.定義模型物件，來保存界面中所需的所有變數和事件處理函式
3.1創建一個data:{ }來保存界面中所需的所有變數和初始值；
3.2創建一個methods:{ }來保存界面中所需的所有事件處理函式；
注意：模型物件就是專門替界面保存變數和事件處理函式的特殊的物件
methods中的事件處理函式中，如果要操作data中的變數，必須加this.
不用考慮如何從界面取值和如何將新值放回界面，只需考慮如何把data中的變數值修改正確，
舉例：vue程式，模擬購物車加減商品數量；
<body>
<!--VUE 3步-->
<!--1. 先做界面
1.1 將界面中所有元素包裹在一個唯一的父元素下<div id="app"></div>
1.2 找到界面中將來可能隨程式自動變化的位置，用{{變數名}}來標記/占位
1.3 找到界面中將來可能觸發事件的元素，用@事件名="事件處理函式名" 來標記-->
<div id="app">
<button @click="minus">-</button>
<span>{{n}}</span>
<button @click="add">+</button>
</div>
<script>
//2. 創建一個new Vue()物件，來監控div所包含的區域
var vm = new Vue({
//vue物件中，必須用el屬性，指出new Vue()要監控的區域
el: "#app",
//3. 定義模型物件，來保存界面中所需的所有變數和事件處理函式
//3.1 先創建一個data:{}來保存界面中所需的所有變數和初始值
data: {
n: 0
},
//3.2 創建一個methods:{}來保存界面中所需的所有事件處理函式
methods: {
add() {
this.n++;
},
minus() {
if (this.n > 0) {
this.n--;
}
}
}
})
</script>
</body>
二、MVVM
以往 的前端代碼分為三個部分：HTML(專門定義網頁的內容和結構)、CSS(專門為網頁添加樣式)、js(專門操作網頁中的內容，為頁面添加互動行為)，
但是HTML和CSS功能太弱，即使很小的修改，都要通過JS來操作，導致js中存在大量重復和冗余的作業，所以為了解決此問題，就需要用到MVVM設計模式，
1.MVVM設計模式
MVVM設計模式是對前端三大代碼的重新劃分，包括三部分；
（1）界面(View)：包含以前的HTML+CSS，讓HTML也支持變數、判斷、回圈；
（2）模型物件(Model)：專門保存頁面中所需的變數和函式的特殊物件，
data:{ } 專門保存界面中所需的所有變數
methods:{ } 專門保存界面中所需的所有函式
（3）視圖模型(ViewModel)：專門負責將模型物件中的變數和函式，自動運送到界面中指定位置的特殊物件，自動將程式中的變數和函式運送到界面中所需的位置，并且還能自動保持界面顯示與程式中的資料同步，
2.vue的系結原理（vue框架如何實作MVVM設計模式）
（1）訪問器屬性
a.new Vue()將data:{ }引入到new Vue()中時，先將data物件及其內部的內容全部隱藏；
b.new Vue()自動為data中每個變數創建訪問器屬性，監視對每個變數的修改操作，訪問器屬性不再隸屬于data物件，而是直接隸屬于new Vue()；
c.只要在程式中修改變數，都會自動呼叫訪問器屬性的set()函式；
d.set()函式中提前安插了一個通知函式()，可通知外部哪個變數值發生了變化；
e.methods中所有的函式，進入new Vue()后，methods物件就被打散，原methods中所有函式直接隸屬于new Vue()物件；
f.methods中的函式和data中的變數，最侄訓平級保存，都直接隸屬于new Vue()，methods中的函式，想操作data中的變數，必須加this.，
（2）虛擬DOM樹
是專門保存界面中所有可能發生變化的元素的簡化版DOM樹；在創建完data和methods之后，根據el屬性值的選擇器所指的元素，去掃描界面中指定區域的元素，一邊掃描真實DOM樹，一邊創建虛擬DOM樹，只保存可能發生變化的元素，
a.只要在程式中修改了變數值，就會自動觸發訪問器屬性的set()，自動執行set()中的通知函式，通知函式()通知虛擬DOM樹哪個變數發生了變化；
b.虛擬DOM樹掃描自己內部保存的所有可能發生變化的元素，只找出受本次變數修改影響的元素；
c.可以用提前封裝好的DOM操作，將變數的新值，自動修改回頁面中顯示，
小結（高頻筆試面試）：
· vue系結原理：訪問器屬性、虛擬DOM樹；
· 虛擬DOM樹四大優點：
（1）內容少體積小：只保存可能變化的個別元素；
（2）遍歷查找快：保存的元素少，所以每次遍歷查找受影響的元素時比遍歷原始DOM樹快；
（3）修改效率高：每次只修改受影響的個別元素，不受影響的元素是不改變；
（4）避免重復編碼：提前封裝了DOM的增刪改查+事件系結操作，
三、系結語法
系結語法是 在界面中標記可能發生變化的元素內容的特殊語法，只要發現一個元素的內容可能隨程式自動改變時，都要用系結語法來標記，
<元素>xxxx{{自定義變數名}}xxx</元素>{{ }}的原理和模板字串中的${ }完全一樣，可以放一切有回傳值的合法的js變數或運算式如變數、三目、算術計算、訪問陣列元素、創建物件、呼叫函式；不能放分支、回圈以及沒有回傳值的js運算式，
舉例：使用{{}}顯示隱藏不同資料；
<body>
<div id="app">
<h3>Welcome:{{uname}}</h3>
<h3>性別:{{sex == 1?"男":"女"}}</h3>
<h3>小計:￥{{price*count.toFixed(2)}}</h3>
<h3>下單時間:{{new Date(orderTime).toLocaleString()}}</h3>
<h3>星期{{arr[day]}}</h3>
</div>
<script>
new Vue({
el: "#app",
data: {
//假設從服務器端請求回來個別資料，顯示到頁面上
uname: "王麻子",
sex: 1,
price: 12.5,
count: 5,
orderTime: 1614158191101,
arr: ["日", "一", "二", "三", "四", "五", "六"],
day: new Date().getDay()
}
})
</script>
</body>效果如下：
四、指令
專門給HTML元素添加新功能的特殊HTML屬性就是指令，含13種，
1.v-bind
如果元素的屬性值可能隨程式自動變化，則不能用{{ }}系結，要用v-bind指令代替{{ }}系結屬性值，格式如下：
<元素 v-bind:屬性名="js變數或運算式">
//簡寫
<元素 :屬性名="js變數或運算式">
//注意：
//加了: 之后就不需要{{}}了
//=右邊的""就起到了{{}}的作用
原理：new Vue()在掃描頁面時，只要發現 : 開頭的屬性，都會先自動計算=右邊的js變數或運算式的值，然后將變數或運算式的值作為當前屬性的屬性值；
舉例：根據pm2.5數值，顯示不同表情；
<body>
<div id="app">
<!--
如果pm25<100，顯示img/1.png
如果pm25<200，顯示img/2.png
如果pm25<300，顯示img/3.png
否則顯示img/4.png
-->
<img :src="
pm25<100 ? 'img/1.png':
pm25<200 ? 'img/2.png':
pm25<300 ? 'img/3.png':
'img/4.png'
">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
//程式中只保存pm2.5的數值，不保存圖片路徑
pm25: 200
}
})
</script>
</body>效果如下：
2.v-show
專門控制一個元素顯示隱藏的特殊指令，用程式控制一個元素的顯示或隱藏時，都用v-show，
<元素 v-show="true/false">原理：只要new Vue()掃描到v-show，就會先計算=右邊的判斷條件的值，如果=右邊的判斷條件值為true，則當前元素默認正常顯示，如果=右邊的判斷條件值為false，則v-show自動被翻譯為style="display:none"，表示當前元素隱藏，
舉例：打開和關閉對話框；
<body>
<!--VUE 3步
1. 做界面:
1.1 唯一父元素
1.2 找可能發生變化的元素
本例中：id="pop"的div顯示和隱藏狀態來回切換，所以應該用v-show
1.3 找觸發事件的元素
本例中: 兩個觸發事件按鈕和超鏈接a
-->
<div id="app">
<button @click="show">click me</button>
<div v-show="visible" id="pop">
<a @click="hide" href="javascript:;">×</a>
</div>
</div>
<script>
//2. 創建new Vue()物件，監控id為app的區域
new Vue({
el: "#app",
//3. 創建模型物件:
//3.1 創建data物件
// 本例中visible變數，控制對話框是否出現
data: {
visible: false //初始默認隱藏
},
//3.2 創建methods物件
methods: {
show() {
this.visible = true //點擊按鈕時顯示對話框
},
hide() {
this.visible = false //點擊×隱藏對話框
}
}
})
</script>
</body>效果如下：對話框點擊按鈕顯示，點擊×隱藏，
3.v-if, v-else
專門控制兩個元素二選一顯示，當要在兩個元素之間選擇一個時，就用v-if和v-else，
<元素1 v-if="條件1">
<元素2 v-else>
//注意：
//else后無序再寫等于
//元素1和2之間不能再有其他元素
原理：當new Vue()掃描到v-if時，先計算=右邊條件變數或運算式的值，如果v-if等號右邊的條件為true，則new Vue()會保留v-if所在元素，洗掉v-else所在元素；如果v-if等號右邊的條件為false，則new Vue()會先洗掉v-if所在的元素，保留v-else所在的元素，
舉例：切換用戶登錄狀態；
<body>
<!--VUE 3步
1. 做界面
1.1 唯一父元素包裹
1.2 找可能發生變化的元素
本例中:兩個div之間二選一顯示一個，所以用v-if和v-else
1.3 找觸發事件的元素
本例中: 觸發事件的元素為注銷和登錄兩個超鏈接
-->
<div id="app">
<!--已登錄時顯示-->
<div @click="logout" v-if="a">
<h3>Welcome dingding <a href="javascript:;">注銷</a></h3>
</div>
<!--未登錄時顯示-->
<div v-else>
<a @click="login" href="javascript:;">登錄</a>
<a href="javascript:;">注冊</a>
</div>
</div>
<script>
//2. 創建new Vue()
new Vue({
el: "#app",
//3. 創建模型物件
//3.1 創建data物件
data: {
a: false //開始時用戶默認未登錄
},
//3.2 創建methods物件
methods: {
login() {
this.a = true //點擊login進入已登錄界面
},
logout() {
this.a = false
}
}
})
</script>
</body>效果如下：
4.v-else-if
和v-if和v-else一起控制多個元素多選一顯示隱藏，只要控制多個元素選擇一個顯示隱藏時，都用v-else-if，
<元素1 v-if="條件1">
<元素2 v-else-if="條件2">
<元素3 v-else-if="條件3">
... ...
<元素n v-else>
//注意：
//元素123之間不能有其他元素原理：當new Vue()掃描到v-if時，先計算v-if后的條件，如果v-if條件為true，則保留v-if所在元素，洗掉其余v-else-if、v-else元素；如果v-if條件為false，則先洗掉v-if所在元素，然后，繼續計算每個v-else-if后的條件；如果任意一個v-else-if的條件為true，則只保留著一個v-else-if所在元素，洗掉其余v-if、v-else-if和v-else元素；如果所有v-if和v-else-if的條件都不滿足，則只保留v-else，洗掉其余v-if和v-else-if的元素，
舉例：使用v-else-if實作根據pm2.5數值不同顯示不同的表情；
<body>
<!--如果pm25<100，顯示1.png
如果pm25<200，顯示2.png
如果pm25<300，顯示3.png
如果pm25>=300，顯示4.png-->
<!-- 本例中有多個元素需要多選一，所以用v-if和v-else-if -->
<div id="app">
<img src="img/1.png" v-if="pm25<100">
<img src="img/2.png" v-else-if="pm25<200">
<img src="img/3.png" v-else-if="pm25<300">
<img src="img/4.png" v-else>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
pm25: 600
}
})
</script>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/309550.html
標籤：其他