※
1.什麼是Vue?
Vue.js 是一套構建用戶界面的`框架`，它不僅易於上手，還可以與其它第三方庫整合(Swiper、IScroll、...)。
2.框架和庫的區別?
框架：是一套完整的解決方案；對項目的`侵入性`較大，項目如果需要更換框架，則需要重構整個項目。
庫（插件）：提供某一個小功能，對項目的`侵入性`較小，如果某個庫無法完成某些需求，可以很容易切換到其它庫實現需求。
例如: 從jQuery 切換到 Zepto, 無縫切換
從IScroll切換到ScrollMagic, 只需要將用到IScroll的代碼替換成ScrollMagic代碼即可
3.為什麼要學習框架?
提升開發效率：在企業中，時間就是效率，效率就是金錢；
前端提高開發效率的發展歷程：原生JS -> jQuery之類的類庫 -> 前端模板引擎 -> Vue / React / Angular
4.框架有很多, 為什麼要先學Vue
Vue、Angular、React一起，被稱之為前端三大主流框架！
但是Angular、React是老外編寫的, 所以所有的資料都是英文的
而Vue是國人編寫的, 所以所有的資料都是中文的, 並且Vue中整合了Angular、React中的眾多優點
所以為了降低我們的學習難度, 我們先學Vue, 學完之後再學習Angular和React
5.使用Vue有哪些優勢?
5.1Vue的核心概念之一:
通過數據驅動界面更新, 無需操作DOM來更新界面
使用Vue我們只需要關心如何獲取數據, 如何處理數據, 如何編寫業務邏輯代碼,
我們只需要將處理好的數據交給Vue, Vue就會自動將數據渲染到模板中(界面上)
5.2Vue的核心概念之二:
組件化開發，我們可以將網頁拆分成一個個獨立的組件來編寫
將來再通過封裝好的組件拼接成一個完整的網頁
※
1.Vue框架使用方式
1.1傳統下載導入使用
1.2vue-cli安裝導入使用（腳手架）
2.Vue框架使用步驟
2.1下載Vue框架
2.2導入Vue框架
2.3創建Vue實例對象
2.4指定Vue實例對象控制的區域
2.5指定Vue實例對象控制區域的數據
模板：
<!--1.下載導入Vue.js-->
<script src="js/vue.js"></script>
<div id="app">
<p>{{ name }}</p>
</div>
<script>
// 2.創建一個Vue的實例對象
let vue = new Vue({
// 3.告訴Vue的實例對象, 將來需要控制界面上的哪個區域
el: '#app',
// 4.告訴Vue的實例對象, 被控制區域的數據是什麼
data: {
name: "某某"
}
});
</script>
※
1.MVVM設計模式
在MVVM設計模式中由3個部分組成
M : Model 數據模型(保存數據, 處理數據業務邏輯)
V : View 視圖(展示數據, 與用戶交互)
VM: View Model 數據模型和視圖的橋梁(M是中國人, V是美國人, VM就是翻譯)
MVVM設計模式最大的特點就是支持數據的雙向傳遞
數據可以從 M -> VM -> V
也可以從 V -> VM -> M
2.Vue中MVVM的劃分
Vue其實是基於MVVM設計模式的
被控制的區域: View
Vue實例對象 : View Model
實例對象中的data: Model
3.Vue中數據的單向傳遞
我們把"數據"交給"Vue實例對象", "Vue實例對象"將數據交給"界面"
Model -> View Model -> View
例子：
<!--這裡就是MVVM中的View-->
<div id="app">
<p>{{ name }}</p>
</div>
<script>
// 這裡就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 這裡就是MVVM中的Model
data: {
name: "某某"
}
});
</script>
※
1.Vue調試工具安裝
如果你能打開谷歌插件商店, 直接在線安裝即可
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN
由於國內無法打開谷歌國外插件商店, 所以可以離線安裝
https://www.chromefor.com/vue-js-devtools_v5-3-0/
2.安裝步驟:
2.1下載離線安裝包
2.2打開谷歌插件界面
2.3直接將插件拖入
2.4報錯 程序包無效: "CRX_HEADER_INVALID"
可以將安裝包修改為rar後綴, 解壓之後再安裝
2.5重啟瀏覽器
※
數據雙向綁定
默認情況下Vue只支持數據單向傳遞 M -> VM -> V
但是由於Vue是基於MVVM設計模式的, 所以也提供了雙向傳遞的能力
在<input>、<textarea> 及 <select> 元素上可以用 v-model 指令(自定義屬性)創建雙向數據綁定
注意點: v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值
而總是將 Vue 實例的數據作為數據來源
例子：
<!--這裡就是MVVM中的View-->
<div id="app">
<p>{{ name }}</p>
<input type="text"v-model="msg">
</div>
<script>
// 這裡就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 這裡就是MVVM中的Model
data: {
name: "某某",
msg: "信息"
}
});
</script>
※
1.什麼是指令?
指令就是Vue內部提供的一些自定義屬性,
這些屬性中封裝好了Vue內部實現的一些功能
只要使用這些指令就可以使用Vue中實現的這些功能
2.Vue數據綁定的特點
只要數據發生變化, 界面就會跟著變化
3.v-once指令:
讓界面不要跟著數據變化, 只渲染一次
例子：<p v-once>原始數據: {{ name }}</p>
※
1.Vue數據綁定過程
1.1會先將未綁定數據的界面展示給用戶
1.2然後再根據模型中的數據和控制的區域生成綁定數據之後的HTML代碼
1.3最後再將綁定數據之後的HTML渲染到界面上
正是在最終的HTML被生成渲染之前會先顯示模板內容
所以如果用戶網絡比較慢或者網頁性能比較差, 那麼用戶會看到模板內容
2.如何解決這個問題
利用v-cloak配合 [v-cloak] {display: none}默認先隱藏未渲染的界面
等到生成HTML渲染之後再重新顯示
3.v-cloak指令作用:
數據渲染之後自動顯示元素
例子：
<style>
[v-cloak] { display: none }
</style>
<p v-cloak>{{ name }}</p>
※
1.什麼是v-text指令
v-text就相當於過去學習的innerText
2.什麼是v-html指令
v-html就相當於過去學習的innerHTML
區別：
插值的方式: 可以將指定的數據插入到指定的位置，不會解析HTML：<p>++++{{ msg }}++++</p>
v-text的方式: 會覆蓋原有的內容，也不會解析HTML：<p v-html="msg">++++++++</p>
v-html的方式: 也會覆蓋原有的內容，還會解析HTML：<p v-html="msg">++++++++</p>
※
1.什麼是v-if指令
條件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素
2.v-if特點:
如果條件不滿足根本就不會創建這個元素(重點)
3.v-if注意點
v-if可以從模型中獲取數據
v-if也可以直接賦值一個表達式
4.v-else指令
v-else指令可以和v-if指令配合使用, 當v-if不滿足條件時就執行v-else就顯示v-else中的內容
5.v-else注意點
v-else不能單獨出現
v-if和v-else中間不能出現其它內容，若出現其他內容，則後面的代碼不會執行
6.v-else-if指令
v-else-if可以和v-if指令配合使用, 當v-if不滿足條件時就依次執行後續v-else-if, 哪個滿足就顯示哪個
7.v-else-if注意點
和v-else一樣
※
1.什麼是v-show指令
v-show和v-if的能夠一樣都是條件渲染, 取值為true就顯示, 取值為false就不顯示
2.v-if和v-show區別
v-if: 只要取值為false就不會創建元素
v-show: 哪怕取值為false也會創建元素, 只是如果取值是false會設置元素的display為none
3.v-if和v-show應用場景
由於取值為false時v-if不會創建元素, 所以如果需要切換元素的顯示和隱藏, 每次v-if都會創建和刪除元素
由於取值為false時v-show會創建元素並設置display為none, 所有如果需要切換元素的顯示和隱藏, 不會反覆創建和刪除, 只是修改display的值
所以: 如果企業開發中需要頻繁切換元素顯示隱藏, 那麼推薦使用v-show, 否則使用v-if
※
1.什麼是v-for指令
相當於JS中的for in循環, 可以根據數據多次渲染元素
2.v-for特點
可以遍歷 數組, 字符, 數字, 對象
例子：
遍歷數組： <li v-for="(value, index) in list">{{index}}---{{value}}</li>
遍歷字符串：<li v-for="(value, index) in 'abcdefg'">{{index}}---{{value}}</li>
遍歷數字： <li v-for="(value, index) in 6">{{index}}---{{value}}</li>
遍歷對象： <li v-for="(value, key) in obj">{{key}}---{{value}}</li>
※
1.什麼是v-bind指令
在企業開發中想要給"元素"綁定數據, 我們可以使用{{}}, v-text, v-html
但是如果想給"元素的屬性"綁定數據, 就必須使用v-bind
所以v-bind的作用是專門用於給"元素的屬性"綁定數據的
2.v-bind格式
v-bind:屬性名稱="綁定的數據"
:屬性名稱="綁定的數據"
3.v-bind特點
賦值的數據可以是任意一個合法的JS表達式
例如: :屬性名稱="age + 1"
注意點: 如果要給元素的屬性綁定數據, 那麼是不能夠使用插值語法的，
雖然通過v-model可以將數據綁定到input標籤的value屬性上
但是v-model是有局限性的, v-model只能用於input/textarea/select
但是在企業開發中我們還可能需要給其它標籤的屬性綁定數據
※
1.v-bind指令的作用
v-bind指令給"任意標籤"的"任意屬性"綁定數據
對於大部分的屬性而言我們只需要直接賦值即可, 例如:value="name"
但是對於class和style屬性而言, 它的格式比較特殊
2.通過v-bind綁定類名格式
:class="['需要綁定類名', ...]"
3.注意點:
3.1直接賦值一個類名(沒有放到數組中)默認會去Model中查找
:class="需要綁定類名"
2.2數組中的類名沒有用引號括起來也會去Model中查找
:class="[需要綁定類名]"
2.3數組的每一個元素都可以是一個三目運算符按需導入
:class="[flag?'active':'']"
2.4可以使用對象來替代數組中的三目運算符按需導入
:class="[{'active': true}]"
2.5綁定的類名太多可以將類名封裝到Model中
obj: {
'color': true,
'size': true,
'active': false,
}
4.綁定類名企業應用場景
從伺服器動態獲取樣式後通過v-bind動態綁定類名
這樣就可以讓服務端來控制前端樣式
常見場景: 618 雙11等
注意點：
如果需要通過v-bind給class綁定類名, 那麼不能直接賦值
默認情況下v-bind會去Model中查找數據, 但是Model中沒有對應的類名, 所以無效, 所以不能直接賦值
如果想讓v-bind去style中查找類名, 那麼就必須把類名放到數組中
但是放到數組中之後默認還是回去Model中查找
將類名放到數組中之後, 還需要利用引號將類名括起來才會去style中查找
如果是通過v-bind綁定類名, 那麼在綁定的時候可以編寫一個三目運算符來實現按需綁定
格式: 條件表達式 ? '需要綁定的類名' : ''
如果是通過v-bind綁定類名, 那麼在綁定的時候可以通過對象來決定是否需要綁定
格式: {'需要綁定的類名' : 是否綁定}
如果是通過v-bind綁定類名, 那麼還可以使用Model中的對象來替換數組，這樣可以通過伺服器來綁定前端類名
例子：
<div id="app">
<p :class="obj">我是段落</p>
</div>
<script>
// 這裡就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 這裡就是MVVM中的Model
data: {
flag: false,
obj:{
'size': false,
'color': false,
'active': true,
}
}
});
</script>
※
1.如何通過v-bind給style屬性綁定數據
1.1將數據放到對象中
:style="{color:'red','font-size':'50px'}"
1.2將數據放到Model對象中
obj: {
color: 'red',
'font-size': '80px',
}
<p :style="obj">我是段落</p>
2.注意點
2.1如果屬性名稱包含-, 那麼必須用引號括起來
2.2如果需要綁定Model中的多個對象, 可以放到一個數組中賦值
<p :style="[obj1, obj2]">我是段落</p>
注意點：
和綁定類名一樣, 默認情況下v-bind會去Model中查找, 找不到所以沒有效果
我們只需要將樣式代碼放到對象中賦值給style即可，但是取值必須用引號括起來
如果樣式的名稱帶-, 那麼也必須用引號括起來才可以
如果Model中保存了多個樣式的對象 ,想將多個對象都綁定給style, 那麼可以將多個對象放到數組中賦值給style即可
※
1.什麼是v-on指令?
v-on指令專門用於給元素綁定監聽事件
2.v-on指令格式
v-on:事件名稱="回調函數名稱"
@事件名稱="回調函數名稱"
3.v-on注意點:
v-on綁定的事件被觸發之後, 會去Vue實例對象的methods中查找對應的回調函數
1.如果是通過v-on來綁定監聽事件, 那麼在指定事件名稱的時候不需要寫on
2.如果是通過v-on來綁定監聽事件, 那麼在賦值的時候必須賦值一個回調函數的名稱
當綁定的事件被觸發後, 會調用Vue實例的methods對象中對應的回調函數
例子：
<script>
// 這裡就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 這裡就是MVVM中的Model
data: {
},
methods: {
myFn(){
alert('lnj')
}
}
});
</script>
※
1.v-on修飾符
在事件中有很多東西需要我們處理, 例如事件冒泡,事件捕獲, 阻止默認行為等
那麼在Vue中如何處理以上內容呢, 我們可以通過v-on修飾符來處理
2.常見修飾符
.once - 只觸發一次回調。
.prevent - 調用 event.preventDefault()。
.stop - 調用 event.stopPropagation()。
.self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
.capture - 添加事件偵聽器時使用 capture 模式。
注意點：
默認情況下事件的回調函數可以反覆的執行, 只要事件被觸發就會執行
如果想讓事件監聽的回調函數隻執行一次, 那麼就可以使用.once修飾符
如果想阻止元素的默認行為, 那麼可以使用.prevent修飾符
默認情況下載嵌套的元素中, 如果都監聽了相同的事件, 那麼會觸發事件冒泡
如果想阻止事件冒泡, 那麼可以使用.stop修飾符
如果想讓回調只有當前元素觸發事件的時候才執行, 那麼就可以使用.self修飾符
默認情況下是事件冒泡, 如果想變成事件捕獲, 那麼就需要使用.capture修飾符
例子：<div @click.stop="myFn2">
※
1.v-on注意點
1.1綁定回調函數名稱的時候, 後面可以寫()也可以不寫
v-on:click="myFn"
v-on:click="myFn()"
1.2可以給綁定的回調函數傳遞參數
v-on:click="myFn('lnj', 33)"
1.3如果在綁定的函數中需要用到data中的數據必須加上this
例子：
<div id="app">
<button @click="myFn('lnj', 33, $event)">我是按鈕</button> <!--$event: 可以拿到原生的事件對象-->
</div>
<script>
// 這裡就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 這裡就是MVVM中的Model
data: {
gender: "man"
},
// 專門用於存儲監聽事件回調函數
methods: {
myFn(name, age, e){
// alert('lnj');
// console.log(name, age, e); //e: 可以拿到原生的事件對象
console.log(this.gender);
}
}
});
</script>
※
1.什麼是按鍵修飾符
我們可以通過按鍵修飾符監聽特定按鍵觸發的事件
例如: 可以監聽當前事件是否是回車觸發的, 可以監聽當前事件是否是ESC觸發的等
2.按鍵修飾符分類
2.1系統預定義修飾符
2.2自定義修飾符
常用的按鍵碼的別名：
.enter
.tab
.delete (捕獲「刪除」和「退格」鍵)
.esc
.space
.up
.down
.left
.right
還可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名：
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
※
1.自定義全局指令
在Vue中除了可以使用Vue內置的一些指令以外, 我們還可以自定義指令
2.自定義全局指令語法
Vue.directive('自定義指令名稱', {
生命周期名稱: function (el) {
指令業務邏輯代碼
}
});
3.指令生命周期方法
自定義指令時一定要明確指令的業務邏輯代碼更適合在哪個階段執行
例如: 指令業務邏輯代碼中沒有用到元素事件, 那麼可以在bind階段執行
例如: 指令業務邏輯代碼中用到了元素事件, 那麼就需要在inserted階段執行
4.自定義指令注意點
使用時需要加上v-, 而在自定義時不需要加上v-
例子：
<script>
/*
directive方法接收兩個參數
第一個參數: 指令的名稱
第二個參數: 對象
注意點: 在自定義指令的時候, 在指定指令名稱的時候, 不需要寫v-
注意點: 指令可以在不同的生命周期階段執行
bind: 指令被綁定到元素上的時候執行
inserted: 綁定指令的元素被添加到父元素上的時候執行
*/
Vue.directive("color", {
// 這裡的el就是被綁定指令的那個元素
bind: function (el) {
el.style.color = "red";
}
});
Vue.directive("focus", {
// 這裡的el就是被綁定指令的那個元素
inserted: function (el) {
el.focus();
}
});
// 這裡就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 這裡就是MVVM中的Model
data: {
},
// 專門用於存儲監聽事件回調函數
methods: {
}
});
</script>
※
1.自定義指令的參數
在使用官方指令的時候我們可以給指令傳參
例如: v-model="name"
在我們自定義的指令中我們也可以傳遞參數
2.獲取自定義指令傳遞的參數
在執行自定義指令對應的方法的時候, 除了會傳遞el給我們, 還會傳遞一個對象給我們
這個對象中就保存了指令傳遞過來的參數
例子：
<div id="app">
<!-- <p v-color="'blue'">我是段落</p>-->
<p v-color="curColor">我是段落</p>
</div>
<script>
Vue.directive("color", {
// 這裡的el就是被綁定指令的那個元素
bind: function (el, obj) {
// el.style.color = "red";
el.style.color = obj.value;
}
});
// 這裡就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 這裡就是MVVM中的Model
data: {
curColor: 'green'
},
// 專門用於存儲監聽事件回調函數
methods: {
}
});
</script>
※
1.自定義全局指令的特點
在任何一個Vue實例控制的區域中都可以使用
2.自定義局部指令的特點
只能在自定義的那個Vue實例中使用
3.如何自定義一個局部指令
給創建Vue實例時傳遞的對象添加
directives: {
// key: 指令名稱
// value: 對象
'color': {
bind: function (el, obj) {
el.style.color = obj.value;
}
}
}