【圖文并茂，點(diǎn)贊收藏哦！】重學(xué)鞏固你的Vuejs知識(shí)體系（上）

共 8807字，需瀏覽 18分鐘

2020-10-21 23:03

前沿

置身世外只為暗中觀察?。。ello大家好，我是魔王哪吒！重學(xué)鞏固你的Vuejs知識(shí)體系，如果有哪些知識(shí)點(diǎn)遺漏，還望在評(píng)論中說明，讓我可以及時(shí)更新本篇內(nèi)容知識(shí)體系。歡迎點(diǎn)贊收藏！

談?wù)勀銓?duì)MVC、MVP和MVVM的理解？

https://github.com/webVueBlog/interview-answe/issues/156

轉(zhuǎn)角遇到Vuejs

你為啥學(xué)習(xí)Vuejs
前端開發(fā)的復(fù)雜化
Vuejs的特點(diǎn)
安裝Vuejs
體驗(yàn)Vuejs
MVVM架構(gòu)：data和Vue對(duì)象的分離，Vue中的MVVM

插值語法：Mustache，v-once，v-html，v-text，v-pre，v-block。
綁定屬性：v-bind的介紹，v-bind的基礎(chǔ)，v-bind的語法糖，綁定class，綁定樣式。
計(jì)算屬性
事件監(jiān)聽：v-on介紹，v-on基礎(chǔ)，v-on參數(shù)，v-on修飾符
條件和循環(huán)：條件渲染，v-show指令，v-if和v-show對(duì)比
表單綁定：基本使用，v-model原理，其他類型，值綁定，修飾符。

組件化開發(fā)：

什么是組件化，Vue組件化開發(fā)思想

注冊(cè)的步驟
全局和局部組件
父組件和子組件
注冊(cè)組件語法糖
模板的分離寫法
組件的其他屬性
父級(jí)向子級(jí)傳遞
子級(jí)向父級(jí)傳遞
父子組件的訪問
非父子組件通信

組件化高級(jí)語法：

插槽slot：編譯作用域，為什么使用slot，slot的基本使用，slot的具名插槽，slot的作用域插槽。
動(dòng)態(tài)組件
異步組件
組件聲明周期

Vue Cli

什么是webpack
webpack和gulp對(duì)比
手動(dòng)webpack的配置
Vue Cli是什么
Vue Cli依賴環(huán)境
Vue Cli的安裝

網(wǎng)絡(luò)封裝

使用傳統(tǒng)的Ajax是基于XMLHttpRequest(XHR)
使用jQuery-Ajax
Vue-resource
使用axios

axios的使用

了解axios：axios請(qǐng)求方式
發(fā)送請(qǐng)求，發(fā)送get請(qǐng)求，發(fā)送并發(fā)請(qǐng)求，axios全局配置，常見配置選項(xiàng)。
axios實(shí)例，為什么創(chuàng)建axios實(shí)例，如何創(chuàng)建axios實(shí)例，axios的封裝。
axios的攔截器：請(qǐng)求和響應(yīng)

vuejs原理相關(guān)：響應(yīng)式原理，源碼。

vue.js是什么

vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。
從自底向上逐層應(yīng)用，核心庫是只關(guān)注圖層。
易于學(xué)習(xí)，便于與第三方庫或既有項(xiàng)目整合。

Vue基礎(chǔ)語法

對(duì)于基礎(chǔ)知識(shí)需要掌握，簡(jiǎn)單寫寫?

vue.js安裝

直接CDN引入：

對(duì)于制作原型或?qū)W習(xí)

代碼：

對(duì)于生產(chǎn)環(huán)境

代碼：

#?最新穩(wěn)定版
$?npm?install?vue

vue響應(yīng)式初體驗(yàn)

聲明式編程：

代碼：




?
??"utf-8">
??
??
??
?
?
??"app">
????{{?a?}}
??


??
??
?

小案例-計(jì)算器

新的屬性：methods，該屬性是用于Vue對(duì)象中定義的方法。
新的指令：@click，該指令是用于監(jiān)聽某個(gè)元素的點(diǎn)擊事件，并且需要指定當(dāng)發(fā)生點(diǎn)擊時(shí)，執(zhí)行的方法。

代碼：

"app">
????當(dāng)前計(jì)數(shù){{counter}}

????"increment">+
????"decrement">-

Vue中的MVVM

MVVM的思想

view是我們的DOM
Model是我們抽離出來的obj
ViewModel是我們創(chuàng)建的Vue對(duì)象實(shí)例

它們之間是如何工作的呢？

ViewModel通過Data Binding讓obj中的數(shù)據(jù)實(shí)時(shí)在DOM中顯示
ViewModel通過DOM Listener來監(jiān)聽DOM事件，并且通過methods中的操作，來改變obj中的數(shù)據(jù)

el:類型：string | HTMLElement
作用：決定之后Vue實(shí)例會(huì)管理哪一個(gè)DOM
data:類型：Object | Function
作用：Vue實(shí)例對(duì)應(yīng)的數(shù)據(jù)對(duì)象
methods:類型：{[key:string]:Function}
作用：定義屬于Vue的一些方法，可以在其他地方調(diào)用，也可以在指令中使用。

什么是Vue的生命周期

生命周期：? 事物從誕生到消亡的整個(gè)過程

release穩(wěn)定版本
debug版本

Mustache語法也就是雙大括號(hào)
插值操作
綁定屬性
計(jì)算屬性
事件判斷
循環(huán)遍歷
階段案例
v-model

v-once指令的使用

"app">
?{{message}}

?{{message}}

v-once：

該指令后面不需要跟任何表達(dá)式
該指令表示元素和組件只渲染一次，不會(huì)隨著數(shù)據(jù)的改變而改變

v-html：

當(dāng)我們從服務(wù)器請(qǐng)求到的數(shù)據(jù)本身就是一個(gè)HTML代碼時(shí)

如果直接通過{{}}來輸出，會(huì)將HTML格式進(jìn)行解析，并且顯示對(duì)應(yīng)的內(nèi)容。
可以使用v-html指令
該指令后跟上一個(gè)string類型
會(huì)將string的html解析處理并且進(jìn)行渲染

"url">

v-text的作用和Mustache比較相似，獨(dú)使用于將數(shù)據(jù)顯示在界面中，一般情況下，接受一個(gè)string類型。

"app">
?"message">
?{{message}}

v-pre用于跳過這個(gè)元素和它子元素的編譯過程，用于顯示原本的Mustache語法。

"app">
?{{message}}

v-cloak斗篷的意思。

"app">
?hello{{name}}

v-bind的介紹

v-bind用于綁定一個(gè)或多個(gè)屬性值，或者向另一個(gè)組件傳遞props值。

"app">
?"link">vuejs
?"url"?alt="">

綁定class有兩種方式：

對(duì)象語法
數(shù)組語法

對(duì)象語法：

用法一：直接通過{}綁定一個(gè)類
"{'active':?isActive}">hello

用法二，傳入多個(gè)值
"{'active':?isActive,?'line':?isLine}">hello

用法三：
"title"?:class="{'active':?isActive}">

用法四：
可以放在一個(gè)methods或者computed中
"title"?:class="classes">hello

v-bind動(dòng)態(tài)綁定class，數(shù)組語法

"app">
?"title"?:class="[active,?line]">{{mesg}}
?"title"?:class="getClasses()">{{mesg}}

v-bind動(dòng)態(tài)綁定style

對(duì)象語法和數(shù)組語法兩種綁定。

綁定方法：對(duì)象語法：

:style="{?color:?currentColor,?fontSize:?fontSize?+?'px'?}"

style后面跟的是一個(gè)對(duì)象類型，對(duì)象的key是css屬性名稱，對(duì)象的value是具體賦的值，值可以來自于data中的屬性。

綁定方法：數(shù)組語法：

"[baseStyles,?overStyles]">

style后面跟的是一個(gè)數(shù)組的類型，多個(gè)值，分割即可。

計(jì)算屬性的基本屬性

計(jì)算屬性，寫在實(shí)例的computed選項(xiàng)中：

"app">
?{{firstName}}{{lastName}}

"app">
?{{fullName}}

計(jì)算屬性的緩存：

為什么使用計(jì)算屬性這個(gè)東西？

原因：計(jì)算屬性會(huì)進(jìn)行緩存，如果多次使用時(shí)，計(jì)算屬性只會(huì)調(diào)用一次。

setter和getter

每個(gè)計(jì)算屬性都包含一個(gè)getter和一個(gè)setter

"app">
?{{fullName}}

?{{firstName}}

?{{lastName}}

computed:?{
????fullName:?function()?{
????????return?this.firstName+"?"+this.lastName
????}
????
????//?計(jì)算屬性一般是沒有set方法，只讀屬性。
????fullName:?{
????????get:?function()?{
????????????return?this.firstName?+?"?"?+?this.lastName
????????}
????}
}

const的使用

const的使用，在JavaScript中使用const修飾的標(biāo)識(shí)符為常量，不可以再次賦值。

在es6開發(fā)中，優(yōu)先使用const，只有需要改變一個(gè)標(biāo)識(shí)符的時(shí)候才使用let。

在使用cost定義標(biāo)識(shí)符，必須進(jìn)行賦值。

常量的含義是指向的對(duì)象不能修改，但是可以改變對(duì)象內(nèi)部的屬性。

什么時(shí)候使用const呢？

當(dāng)我們修飾的標(biāo)識(shí)符不會(huì)被再次賦值時(shí)，就可以使用const來保證數(shù)據(jù)的安全性。

const的使用：

const?a=20;
a = 10;?//?錯(cuò)誤：不可以修改

const?name;?//?錯(cuò)誤，const修飾的標(biāo)識(shí)符必須賦值

let和var

塊級(jí)作用域：

JS中使用var來聲明一個(gè)變量，變量的作用域主要是和函數(shù)的定義有關(guān)。

對(duì)于其他塊定義來說是沒有作用域的，比如if/for等，開發(fā)中往往會(huì)引發(fā)一些問題。

//?監(jiān)聽按鈕的點(diǎn)擊
var?btns?=?document.getElementsByTagName('button');
for(var?i=0;?i????(function(i){
????????btns[i].onclick?=?function(){
????????????alert('點(diǎn)擊了'+i+"個(gè)")
????????}
????})(i)
}

let?btns?=?document.getElementsByTagName('button');
for(let?i=0;i????btns[i].onclick?=?function(){
????????alert('點(diǎn)擊了'+i+'個(gè)')
????}
}

塊級(jí)作用域

變量作用域：變量在什么范圍內(nèi)是可用的。

var?func;
if(true)?{
????var?name?=?'web';
????func?=?function()?{
????????console.log(name);?//?web
????}
????
????func();?//?web
}

//?name?=?'it'
func();?//?web?->?it
console.log(name);?//?web?->?it

沒有塊級(jí)作用域引起的問題，for的塊級(jí)

var?btns?=?document.getElementsByTagName('button');
for(var?i=0;?i????btns[i].addEventListener('click',?function(){
????????console.log('第'+i+'個(gè)按鈕被點(diǎn)擊');
????})
}

閉包：

var?btns?=?document.getElementsByTagName('button');
for(var?i=0;?i????(function(i){
????????btns[i].addEventListener('click',?function(){
??????????console.log('第'+i+'個(gè)按鈕');??
????????})
????})(i)
}

為什么閉包可以解決問題，因?yàn)楹瘮?shù)是一個(gè)作用域。

對(duì)象的增強(qiáng)寫法

屬性初始化簡(jiǎn)寫和方法的簡(jiǎn)寫：

//?屬性的簡(jiǎn)寫
//?es6前
let?name?=?'web'
let?age?=?12
let?obj1?=?{
????name:?name,
????age:?age,
}
console.log(obj1);
//?es6后
let?obj2?=?{
????name,?age
}
console.log(obj2)

//?方法的簡(jiǎn)寫
//?es6之前
let?obj1?=?{
????test:?function()?{
????????console.log('obj1')
????}
}
obj1.test();

//?es6后
let?obj2?=?{
????test()?{
????????console.log('obj2')
????}
}
obj2.test();

v-on基礎(chǔ)

v-on:click="counter++"

"app">
?點(diǎn)擊次數(shù):{{counter}}

?"counter++">按鈕點(diǎn)擊
?"btnClick">按鈕點(diǎn)擊2


let?app?=?new?Vue({
?el:?'#app',
?data:?{
?????counter:?0
?},
?methods:?{
?????btnClick(){
?????????this.counter++
?????}
?}
})

v-on修飾符的使用

"app">
?"divClick">
?web
?"btnClick">按鈕

Vue提供了一些修飾符：

.stop?調(diào)用event.stopPropagation()

.prevent?調(diào)用event.preventDefault()

.native?監(jiān)聽組件根元素的原生事件

.once?只觸發(fā)一次回調(diào)

//?停止冒泡
"doThis">

//?阻止默認(rèn)行為
"doThis">

//?阻止默認(rèn)行為，沒有表達(dá)式


//?串聯(lián)修飾符
"doThis">

//?鍵修飾符，鍵別名
"onEnter">

//?鍵修飾符，鍵代碼
"onEnter">

//?點(diǎn)擊回調(diào)智慧觸發(fā)一次
"doThis">

v-if,v-else-if,v-else

簡(jiǎn)單使用：

"app">
?"score>=90">優(yōu)秀

?"score>=80">良好

?"score>=60">及格

?"score<60">不及格

登錄切換：

"app">
?"type==='username'">
??用戶賬號(hào)：
??"用戶賬戶">
?
?
??郵箱地址：
??"郵箱地址">
?
?"handleToggle">切換類型

"app">
?"isUser">
??for="username">用戶賬戶
??type="text"?id="username"?placeholder="用戶賬戶">
?
?
?
??for="email">用戶郵箱
??type="text"?id="email"?placeholder="用戶郵箱">
?
?"isUser=!isUser">切換類型

v-for遍歷對(duì)象

"app">
?
??"(value,?key,?index)?in?info">
???{{value}}-{{key}}-{{index}}
??
?

組件的Key屬性

使用v-for時(shí)，給對(duì)應(yīng)的元素或組件添加上一個(gè):key屬性。

key的作用主要是為了高效的更新虛擬dom。

數(shù)組中哪些方法是響應(yīng)式的

push()
pop()?刪除數(shù)組中的最后一個(gè)元素
shift()?刪除數(shù)組中的第一個(gè)元素
unshift()?在數(shù)組最前面添加元素

splice()
sort()
reverse()

購物車

"app">












"item?in?books">
"value?in?item">{{value}}


書籍名稱 出版日期 價(jià)格 購買數(shù)量 操作

表單綁定v-model

vue中使用v-model指令來實(shí)現(xiàn)表單元素和數(shù)據(jù)的雙向綁定。

"app">
?type="text"?v-model="message">
?{{message}}

reduce作用對(duì)數(shù)組中所有的內(nèi)容進(jìn)行匯總。

JavaScript reduce() 方法

var?numbers?=?[65,?44,?12,?4];
?
function?getSum(total,?num)?{
????return?total?+?num;
}
function?myFunction(item)?{
????document.getElementById("demo").innerHTML?=?numbers.reduce(getSum);
}

定義和用法

reduce() 方法接收一個(gè)函數(shù)作為累加器，數(shù)組中的每個(gè)值（從左到右）開始縮減，最終計(jì)算為一個(gè)值。

reduce() 可以作為一個(gè)高階函數(shù)，用于函數(shù)的 compose。

注意: reduce() 對(duì)于空數(shù)組是不會(huì)執(zhí)行回調(diào)函數(shù)的。

語法

array.reduce(function(total,?currentValue,?currentIndex,?arr),?initialValue)

v-model的使用以及原理

type="text"?:value="message"?@input="message?=?$event.target.value">

v-model是語法糖，本質(zhì)：

v-bind綁定一個(gè)value屬性
v-on指令給當(dāng)前元素綁定input事件

代碼：

type="text"?v-model="message">

type="text"?v-bind:value="message"?v-on:input="message?=?$event.target.value">

v-model:checkbox

復(fù)選框分為兩種情況，單個(gè)勾選框和多個(gè)勾選框。

單個(gè)勾選框：

v-model即為布爾值。input的value并不影響v-model的值。

多個(gè)復(fù)選框：

當(dāng)是多個(gè)復(fù)選框時(shí)，對(duì)應(yīng)的data中屬性是一個(gè)數(shù)組。

當(dāng)選中某一個(gè)時(shí)，就會(huì)將input的value添加到數(shù)組中。

"app">
?for="check">
??type="checkbox"?v-model="checked"?id="check">同意協(xié)議
?
?type="checkbox"?v-model="hobbies"?value="籃球">籃球
?type="checkbox"?v-model="hobbies"?value="臺(tái)球">臺(tái)球

v-model:select

select分單選和多選兩種情況

單選：只能選中一個(gè)值，多選：可以選擇多個(gè)值。

`v-model`結(jié)合`select`類型

和checkbox一樣，select分單選和多選兩種情況。

單選，只能選擇一個(gè)值，v-model綁定的是一個(gè)值。當(dāng)我們選中option中的一個(gè)時(shí)，會(huì)將它對(duì)應(yīng)的value賦值到mySelect中。

多選，可以選中多個(gè)值。v-model綁定的是一個(gè)數(shù)組。當(dāng)選中多個(gè)值時(shí)，就會(huì)將選中的option對(duì)應(yīng)的value添加到數(shù)組mySelects中。

//?選擇一個(gè)值
"mySelect">
?"web">web
?"it">it

您最喜歡的{{mySelect}}


//?選擇多個(gè)值
"mySelects"?multiple>
?"web">web
?"it">it

您最喜歡的{{mySelects}}

input中的值綁定

"item?in?origin">
?type="checkbox"?:value="item"?v-model="hobbies">
?{{item}}

修飾符

lazy修飾符：

默認(rèn)情況下，v-model默認(rèn)是在input事件中同步輸入框的數(shù)據(jù)的。
一旦有數(shù)據(jù)發(fā)生改變對(duì)應(yīng)的data中的數(shù)據(jù)就會(huì)自動(dòng)發(fā)生改變。
lazy修飾符可以讓數(shù)據(jù)在失去焦點(diǎn)或者回車時(shí)才會(huì)更新。

number修飾符：

默認(rèn)情況下，在輸入框中無論我們輸入的是字母還是數(shù)字，都會(huì)被當(dāng)做字符串類型進(jìn)行處理。
但是如果我們希望處理的是數(shù)字類型，那么最好直接將內(nèi)容當(dāng)做數(shù)字處理。
number修飾符可以讓在輸入框中輸入的內(nèi)容自動(dòng)轉(zhuǎn)成數(shù)字類型。

trim修飾符：

如果輸入的內(nèi)容首尾有很多空格，通常我們希望將其去除
trim修飾符可以過濾內(nèi)容左右兩邊的空格

示例：

"app">
?type="text"?v-model.lazy="message">
?{{message}}

什么是組件化

組件化是vue.js中的重要思想
它提供了一種抽象，讓我們可以開發(fā)出一個(gè)個(gè)獨(dú)立可復(fù)用的小組件來構(gòu)造我們的應(yīng)用
任何的應(yīng)用都會(huì)被抽象成一顆組件樹

注冊(cè)組件的基本步驟：

創(chuàng)建組件構(gòu)造器
注冊(cè)組件
使用組件

示例：

調(diào)用Vue.extend()方法創(chuàng)建組件構(gòu)造器
調(diào)用Vue.component()方法，注冊(cè)組件
在Vue實(shí)例的作用范圍內(nèi)使用組件

組件示例：

"app">

全局組件和局部組件

Vue.extend()調(diào)用Vue.extend()創(chuàng)建一個(gè)組件構(gòu)造器。
通常在創(chuàng)建組件構(gòu)造器時(shí)，傳入template代表我們自定義組件的模板。
該模板在使用到組件的地方，顯示的html代碼。
這種寫法在Vue2.x的文檔幾乎看不到了。
Vue.component()是將剛才的組件構(gòu)造器注冊(cè)為一個(gè)組件，并且給它起一個(gè)組件的標(biāo)簽名稱。
注冊(cè)組件的標(biāo)簽名，組件構(gòu)造器。

示例：

組件標(biāo)題

"app">
?
?
??
?

示例：

"app1">
?

"app2">
?

父組件和子組件

組件樹

組件和組件之間存在層級(jí)關(guān)系
其中一種非常重要的關(guān)系就是父子組件的關(guān)系

示例：

"app">
?

"app">
?

//?注冊(cè)局部組件的語法糖
const?app?=?new?Vue({
?el:?'#app',
?data:?{
?????message:?'web'
?},
?components:?{
?????'cpn2':?{
?????????template:?`
?????????
??????????web

?????????

?????????`
?????}
?}
})

vue簡(jiǎn)化了注冊(cè)組件的方式，提供了注冊(cè)的語法糖。

組件模板抽離的寫法

vue提供了兩種定義html模塊內(nèi)容：

使用
template標(biāo)簽
```
"cpn">
?
??web

?


//?注冊(cè)一個(gè)全局組件
Vue.component('cpn',?{
?template:?'#cpn'
})
```
組件可以訪問vue實(shí)例數(shù)據(jù)嗎
組件是一個(gè)單獨(dú)的功能模塊封裝，有屬于自己的html模板和自己的數(shù)據(jù)data。
組件對(duì)象有一個(gè)data屬性，methods屬性，這個(gè)data屬性必須是一個(gè)函數(shù)，函數(shù)返回一個(gè)對(duì)象，對(duì)象內(nèi)部保存著數(shù)據(jù)。
```
"app">
?


"myCpn">
?{{message}}
```
在 Vue 中，父子組件的關(guān)系
props向下傳遞，事件向上傳遞。
父組件通過 props給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送消息。
props支持的數(shù)據(jù)類型：
```
String

Number

Boolean

Array

Object

Date

Function

Symbol
```
示例：
```
Vue.component('my-component',{
?props:?{
?????//?基礎(chǔ)的類型檢查
?????propA:?Number,
?????//?多個(gè)可能的類型
?????propB:?[String,?Number],
?????//?propC:?{
?????????type:?String,
?????????required:?true
?????},
?????//?帶有默認(rèn)值的數(shù)字
?????propD:?{
?????????type:?Number,
?????????default:?100
?????},
?????//?帶有默認(rèn)值的對(duì)象
?????propE:?{
?????????type:?Object,
??????????default:?function(){
??????????????return?{message:?'web'}
??????????}
?????},
?????//?自定義驗(yàn)證函數(shù)
?????propF:?{
?????????vfunc:?function(value)?{
?????????????return?value?>?1
?????????}
?????}
?}
})
```
子傳父
代碼：
```
this.$emit('item-click',item)
```
props用于父組件向子組件傳遞數(shù)據(jù)，還有一種比較常見的是子組件傳遞數(shù)據(jù)或事件到父組件中。
自定義事件：
1. 在子組件中，通過$emit()來觸發(fā)事件。
2. 在父組件中，通過v-on來監(jiān)聽子組件事件。
自定義事件代碼：
```
"app">
?"changeTotal"?@decrement="changeTotal">
?點(diǎn)擊次數(shù)



"childCpn">
?
??"increment">+1
??"decrement">-1
?



let?app?=?new?Vue({
?el:?'#app',
?data:?{
?????total:?0
?},
?methods:?{
?????changeTotal(counter)?{
?????????this.total?=?counter
?????}
?},
?components:?{
?????'child-cpn':?{
?????????template:?'#childCpn',
?????????data(){
?????????????return{
?????????????????counter:?0
?????????????}
?????????},
?????????methods:?{
?????????????increment(){
?????????????????this.counter++;
?????????????????this.$emit('increment',?this.counter)
?????????????},
?????????????decrement(){
?????????????????this.counter--;
?????????????????this.$emit('decrement',this.counter)
?????????????}
?????????}
?????}
?}
})
```
父子組件的訪問方式：$children
有時(shí)候需要父組件直接訪問子組件，子組件直接訪問父組件，或者是子組件訪問父組件。
1. 父組件訪問子組件，使用$children或者$refs
2. 子組件訪問父組件，使用$parent
對(duì)于$children的訪問：
1. this.$children是一個(gè)數(shù)組類型，它包含所有子組件對(duì)象。
2. 通過遍歷，取出所有子組件的message狀態(tài)。
示例：
```
"app">
?


//?父組件template
"parentCpn">
?
??
??
??"showChildCpn">顯示所有子組件信息
?



//?子組件
"childCpn1">
?我是子組件1


//?子組件
"childCpn2">
?我是子組件2



Vue.component('parent-cpn',{
?template:?'#parentCpn',
?methods:?{
?????showChildCpn(){
?????????for(let?i=0;?i$children.length;?i++){
?????????????console.log(this.$children[i].message)
?????????}
?????}
?}
})
```
父子組件的訪問方式：$parent
子組件中直接訪問父組件，可以通過$parent
1. 雖然可以通過$parent來訪問父組件，但是盡量不要這樣做
2. 子組件應(yīng)該盡量避免直接訪問父組件的數(shù)據(jù)，因?yàn)檫@樣耦合度太高了。
父子組件的訪問方式$refs
$children的缺陷：
1. 通過$children訪問子組件，是一個(gè)數(shù)組類型，訪問其子組件要通過索引值。
2. 子組件過多時(shí)，需要拿其中一個(gè)時(shí)，不能確定它的索引值，還可能發(fā)生變化。
3. 獲取其中一個(gè)特定的組件，可以使用$refs
$refs的使用：
1. $refs和ref指令通常一起使用
2. 通過ref給某個(gè)子組件綁定一個(gè)特定的id
3. 通過this.$refs.id可以訪問到該組件
示例：
```
"child1">
"child2">
"show">通過refs訪問子組件

show()?{
????console.log(this.$refs.child1.message);
????console.log(this.$refs.child2.message);
}
```
看看一個(gè).vue文件項(xiàng)目
```
?.xxx?{
?????xxx:?xxx;
?}
```
三層部分：
slot插槽的使用
vue中的代碼slot是什么呢，它叫插槽，元素作為組件模板之中的內(nèi)容分發(fā)插槽，傳入內(nèi)容后元素自身將被替換。
v-slot用法：
1. 默認(rèn)插槽
2. 具名插槽
3. 作用域插槽
4. slot以及slot-scope的用法：子組件編寫，父組件編寫
默認(rèn)插槽
子組件：
```
//?子組件
```
slot基本使用
1. 在子組件中，使用可以為子組件開啟一個(gè)插槽。
2. 該插槽插入什么內(nèi)容取決于父組件如何使用。
子組件定義一個(gè)插槽：
1. 中的內(nèi)容表示，如果沒有在該組件中插入任何其他內(nèi)容，就默認(rèn)顯示改內(nèi)容。
示例：
```
"app">
?
?
??web

?


"myCpn">
?
??我是誰
?
```
使用具名插槽
1. 給slot元素添加一個(gè)name屬性
示例：
```
"app">
?//?沒有任何內(nèi)容
?
?
?//?傳入某個(gè)內(nèi)容
?
??"left">left
?
?
?
??"left">left
??
??"center">center
??
??"right">right


"myCpn">
?
??"left">1
??"center">2
??"right">3
?
```
編譯作用域
Vue實(shí)例屬性：
父組件模板的所有東西都會(huì)在父級(jí)作用域內(nèi)編譯，子組件模板的所有東西都會(huì)在子級(jí)作用域內(nèi)編譯。
父組件替換插槽的標(biāo)簽，但是內(nèi)容由子組件來提供。
模塊化開發(fā)
什么是模塊化，將一組模塊以正確的順序拼接到一個(gè)文件中的過程，模塊是實(shí)現(xiàn)特定功能的一組屬性和方法的封裝。
利用構(gòu)造函數(shù)封裝對(duì)象
```
function?web()?{
????var?arr?=?[];
????this.add?=?function(val)?{
????????arr.push(var)
????}
????this.toString?=?function()?{
????????return?arr.join('')
????}
}
var?a?=?new?web();
a.add(1);?//?[1]
a.toString();?//?"1"
a.arr?//?undefined
```
示例：
```
var?ModuleA?=?(function(){
????//?定義一個(gè)對(duì)象
????var?obj?=?{}
????//?在對(duì)象內(nèi)部添加變量和方法
????obj.flag?=?true
????obj.myFunc?=?function(info)?{
????????console.log(info)
????};
????//?將對(duì)象返回
????return?obj
}
```
```
if(ModuleA.flag)?{
????console.log('web')
}

ModuleA.myFunc('webweb')
```
常見的模塊化規(guī)范：
CommonJS,AMD,CMD,ES6中的Modules
什么是AMD，異步模塊定義，它是在瀏覽器端實(shí)現(xiàn)模塊化開發(fā)的規(guī)范，但是該規(guī)范不是原生js支持的，使用AMD規(guī)范進(jìn)行開發(fā)的時(shí)候需要引入第三方的庫函數(shù)，就是RequireJS。
RequireJS解決了多個(gè)js文件可能有依賴的關(guān)系，被依賴的文件需要早于依賴它的文件加載到瀏覽器；js加載的時(shí)候?yàn)g覽器會(huì)停止頁面渲染，加載文件越多，頁面就會(huì)失去響應(yīng)時(shí)間越長(zhǎng)。
CMD是什么，它是通用模塊定義，解決的問題和AMD一樣，不過在模塊定義方式和模塊加載時(shí)機(jī)上不同，CMD需要額外的引入第三方的庫文件SeaJS。
JavaScript模塊化編程
1. 可以解決項(xiàng)目中的全局變量污染問題
2. 開發(fā)效率高，利于多人協(xié)同開發(fā)
3. 職責(zé)單一，方便代碼復(fù)用和維護(hù)
4. 解決了文件的依賴問題
那么什么是模塊化呢
將一個(gè)項(xiàng)目按照功能劃分，理論上一個(gè)功能一個(gè)模塊，互不影響，在需要的時(shí)候載入，盡量遵循高內(nèi)聚低耦合。
了解CommonJS
CommonJS 是一種思想,本質(zhì)上是可復(fù)用的JavaScript,它導(dǎo)出特定的對(duì)象，提供其它程序使用。
使用module.exports和exports.obj來導(dǎo)出對(duì)象，并在需要它的程序中使用require('module')加載。
模塊化的核心就是：導(dǎo)入和導(dǎo)出
導(dǎo)出：CommonJS
```
module.exports?=?{
????flag:?true,
????test(a,b)?{
????????return?a+b
????},
????demo(a,b)?{
????????return?a*b
????}
}
```
導(dǎo)入：CommonJS
```
//?CommonJS模塊
let?{test,?demo,?flag}?=?require('moduleA');

//?=>
let?ma?=?require('moduleA');
let?test?=?ma.test;
let?demo?=?ma.demo;
let?flag?=?ma.flag;
```
因?yàn)榫W(wǎng)站開發(fā)越來越復(fù)雜，js文件又很多，就會(huì)出現(xiàn)一些問題：
1. 變量名沖突
2. 文件依賴復(fù)雜度高
3. 頁面加載過多，不利于維護(hù)
CommonJS，定義模塊，一個(gè)單獨(dú)的js文件就是一個(gè)模塊，每個(gè)模塊都有自己?jiǎn)为?dú)的作用域，在該模塊內(nèi)部定義的變量，無法被其他模塊讀取，除了定義為global對(duì)象的屬性。
模塊的導(dǎo)出：exports和module.exports
模塊的導(dǎo)入：require
1. 在node中，每個(gè)模塊內(nèi)部都有要給自己的module對(duì)象
2. 在module對(duì)象中，有一個(gè)成員exports也是一個(gè)對(duì)象
3. 通過exports對(duì)象導(dǎo)出當(dāng)前方法或變量，也可通過module.exports導(dǎo)出
4. node簡(jiǎn)化了操作，exports等于module.exports，相當(dāng)于var exports = module.exports
es模塊的導(dǎo)入和導(dǎo)出
```
export?function?add(num1,?num2)?{
????return?num1?+?num2
}
```
```
export?function?accString(param)?{
?if?(param?==?0)?{
??return?'關(guān)'
?}else?if(param?==?1)?{
??return?'開'
?}
}

import?{
??accString
?}?from?'../../utils'
```
```
const?name?=?'web'

export?default?name
```
export default
一個(gè)模塊中包含某個(gè)功能，如果不希望給功能命名，可以讓導(dǎo)入者自己來定：
```
export?default?function(){
????console.log('web')
}
```
使用：
```
import?myFunc?from?'../web.js'

myFunc()
```
export default在同一個(gè)模塊中，不允許同時(shí)存在多個(gè)
import使用
export指令導(dǎo)出了模塊對(duì)外提供的接口
import指令用于導(dǎo)入模塊中的內(nèi)容
```
import?{name,?age}?from?'./web.js'
```
通過*可以導(dǎo)入模塊中所有所有的export變量
```
import?*?as?web?from?'./web.js'

console.log(web.name);
```
最后
我是程序員哆啦A夢(mèng)，藍(lán)胖子，簡(jiǎn)書萬粉優(yōu)秀創(chuàng)作者，掘金優(yōu)秀作者、CSDN博客專家，云+社區(qū)社區(qū)活躍作者，致力于打造一系列能夠幫助程序員提高的優(yōu)質(zhì)文章。網(wǎng)站@http://www.dadaqianduan.cn
```
掃碼關(guān)注公眾號(hào)，訂閱更多精彩內(nèi)容。
```
你點(diǎn)的每個(gè)贊，我都認(rèn)真當(dāng)成了喜歡

瀏覽 9
點(diǎn)贊
評(píng)論
收藏
分享
手機(jī)掃一掃分享
分享
舉報(bào)
評(píng)論
圖片
表情
視頻
全部評(píng)論
推薦
 【圖文并茂，點(diǎn)贊收藏哦！】重學(xué)鞏固你的Vuejs知識(shí)體系（下）
程序源代碼
0
「查缺補(bǔ)漏」鞏固你的RocketMQ知識(shí)體系
猿天地
0
【HTTP】HTTP靈魂之問，鞏固你的 HTTP 知識(shí)體系
前端雜貨鋪
0
（建議精讀）HTTP靈魂之問，鞏固你的 HTTP 知識(shí)體系
前端Sharing
0
(建議精讀)HTTP靈魂之問,鞏固你的 HTTP 知識(shí)體系
前端桃園
0
如何構(gòu)建你自己的計(jì)算機(jī)網(wǎng)絡(luò)知識(shí)體系？
飛天小牛肉
0
收藏！一文掌握數(shù)據(jù)分析知識(shí)體系
大數(shù)據(jù)科學(xué)
0
一篇文章構(gòu)建你的 NodeJS 知識(shí)體系
大海我來了
0
淺談知識(shí)體系
編碼之外
0
形成自己的知識(shí)體系
產(chǎn)品劉
0
點(diǎn)贊
評(píng)論
收藏
分享
手機(jī)掃一掃分享
分享
舉報(bào)

【圖文并茂，點(diǎn)贊收藏哦！】重學(xué)鞏固你的Vuejs知識(shí)體系（上）

前沿

轉(zhuǎn)角遇到Vuejs

目錄：

起步

組件化開發(fā)：

組件化高級(jí)語法：

Vue Cli

網(wǎng)絡(luò)封裝

vue.js是什么

Vue基礎(chǔ)語法

vue.js安裝

vue響應(yīng)式初體驗(yàn)

小案例-計(jì)算器

當(dāng)前計(jì)數(shù){{counter}}

Vue中的MVVM

什么是Vue的生命周期

{{message}}

{{message}}

v-bind的介紹

計(jì)算屬性的基本屬性

{{firstName}}{{lastName}}

{{fullName}}

setter和getter

const的使用

塊級(jí)作用域

對(duì)象的增強(qiáng)寫法

v-on基礎(chǔ)

點(diǎn)擊次數(shù):{{counter}}

v-if,v-else-if,v-else

v-for遍歷對(duì)象

組件的Key屬性

購物車

表單綁定v-model

{{message}}

v-model的使用以及原理

v-model:checkbox

v-model:select

v-model結(jié)合select類型

input中的值綁定

修飾符

{{message}}

什么是組件化

全局組件和局部組件

父組件和子組件

web

組件模板抽離的寫法

web

點(diǎn)擊次數(shù)

父子組件的訪問方式：$children

我是子組件1

我是子組件2

父子組件的訪問方式：$parent

slot插槽的使用

模塊化開發(fā)

最后

【圖文并茂，點(diǎn)贊收藏哦！】重學(xué)鞏固你的Vuejs知識(shí)體系（上）

`v-model`結(jié)合`select`類型

父子組件的訪問方式：`$children`

父子組件的訪問方式：`$parent`