整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
(1)css中聲明變量
--color：red(2)使用變量
color:var(--color) //color:red獲取到全局聲明變量值為red(1)在html標(biāo)簽中
<span :style="{'--color':變量color}" ref='devcolor' />data中聲明變量color
data() {
return {
color: red,
};
}或者使用this.$refs.devcolor.style.setProperty('--color',this.color)
(2)css中使用color變量
color:var(--color) //使用變量color：red讀本文約需要10分鐘，您可以先關(guān)注我們，避免下次無法找到。
本篇文章成哥繼續(xù)帶大家來學(xué)習(xí)前端VUE教程，今天主要講解VUE的插槽等相關(guān)知識(shí)點(diǎn)。下面我們就一起來學(xué)習(xí)該塊內(nèi)容吧！
插槽就是子組件中的提供給父組件使用的一個(gè)占位標(biāo)識(shí)符，用<slot></slot> 表示（），父組件可以在這個(gè)占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會(huì)替換子組件的<slot></slot>標(biāo)簽，下面我們來看看具體示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基礎(chǔ)教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--調(diào)用子組件-->
<Child>
<p style="color: red">插槽示例(本內(nèi)容將會(huì)渲染至子組件slot位置處)</p>
</Child>
</div>
<script>
// 定義一個(gè)子組件Child，同時(shí)在其html內(nèi)部增加<slot></slot>進(jìn)行占位
var Child = {
data: function () {
return {
}
},
/*父組件在調(diào)用子組件時(shí)會(huì)把其在子組件標(biāo)簽的內(nèi)容渲染進(jìn)slot占位處*/
template: '<h4>我是子組件<slot></slot></h4>',
}
var vm = new Vue({
el: '#app', // dom的掛載點(diǎn),這邊將dom掛載到id為app的標(biāo)簽上
// 在 components 選項(xiàng)中定義你想要使用的組件
components: {
"Child": Child,
},
data: { // 數(shù)據(jù)對(duì)象
},
})
</script>
</body>
</html>
這時(shí)肯定有人疑惑如果我子組件中沒有slot標(biāo)簽然后再父組件中調(diào)用子組件時(shí)也在期內(nèi)寫上內(nèi)容會(huì)不會(huì)被渲染了，我們來看一下演示：現(xiàn)在可以得出一個(gè)結(jié)論如果子組件中沒有<slot></slot>標(biāo)簽，則父組件調(diào)用子組件時(shí)內(nèi)插入的所有內(nèi)容都會(huì)被丟棄，不會(huì)被渲染出來
如上面的列子中如果我們想在插槽中使用數(shù)據(jù)時(shí),會(huì)發(fā)現(xiàn)插槽中的數(shù)據(jù)是由父組件的data控制的而不是子組件進(jìn)行控制，示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基礎(chǔ)教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--由于編譯作用域所以這邊的v-show與msg其實(shí)都是父組件傳遞的值,因?yàn)檫@些內(nèi)容都是父組件編譯的-->
<Child v-show="isShow">
<p style="color: red">插槽編譯作用域示例： {{msg}}</p>
</Child>
</div>
<script>
var Child = {
data: function () {
return {
msg: "我是子組件msg的值"
}
},
// 子組件定義的msg變量值不會(huì)渲染到插槽內(nèi)
template: '<h4>我是子組件<slot></slot></h4>',
}
var vm = new Vue({
el: '#app', // dom的掛載點(diǎn),這邊將dom掛載到id為app的標(biāo)簽上
// 在 components 選項(xiàng)中定義你想要使用的組件
components: {
"Child": Child,
},
data: { // 數(shù)據(jù)對(duì)象
isShow: true,
msg: "我是父組件msg的值"
},
})
</script>
</body>
</html> 編譯作用域其實(shí)就是一條規(guī)則就是，父級(jí)模板里的所有內(nèi)容都是在父級(jí)作用域中編譯的；子模板里的所有內(nèi)容都是在子作用域中編譯的。
有時(shí)為一個(gè)插槽設(shè)置具體的后備 (也就是默認(rèn)的) 內(nèi)容是很有用的，它只會(huì)在沒有提供內(nèi)容的時(shí)候被渲染。例如在一個(gè) <submit-button> 組件中
<button type="submit">
<slot></slot>
</button> 我們可能希望這個(gè) <button> 內(nèi)絕大多數(shù)情況下都渲染文本“Submit”。為了將“Submit”作為后備內(nèi)容，我們可以將它放在 <slot> 標(biāo)簽內(nèi)：
<button type="submit">
<slot>Submit</slot>
</button> 現(xiàn)在當(dāng)我在一個(gè)父級(jí)組件中使用 <submit-button> 并且不提供任何插槽內(nèi)容時(shí)：
<submit-button></submit-button> 后備內(nèi)容“Submit”將會(huì)被渲染：
<button type="submit">
Submit
</button> 但是如果我們提供內(nèi)容：
<submit-button>
Save
</submit-button> 則這個(gè)提供的內(nèi)容將會(huì)被渲染從而取代后備內(nèi)容：
<button type="submit">
Save
</button> 具名插槽就是給插槽指定名稱我們?cè)谑褂脮r(shí)通過名稱來指定其渲染的位置，具體示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基礎(chǔ)教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--具名插槽示例-->
<Child>
<!--按照插槽名稱進(jìn)行標(biāo)簽傳遞渲染，具體渲染順序是根據(jù)子組件中編寫插槽的順序來的-->
<template v-slot:header>
<div>我是header</div>
</template>
<template v-slot:footer>
<div>我是footer</div>
</template>
<!--如果不指定插槽名稱標(biāo)簽會(huì)被渲染至默認(rèn)插槽處，也就是沒有定義名稱的插槽位置-->
<template>
<div>我會(huì)被渲染至默認(rèn)插槽位置</div>
</template>
</Child>
</div>
<script>
var Child = {
data: function () {
return {
msg: "我是子組件msg的值"
}
},
// 定義具名插槽，沒有定義名稱的slot會(huì)有一個(gè)默認(rèn)值為default,在父組件調(diào)用時(shí)沒有指定渲染插槽名稱的標(biāo)簽會(huì)被渲染至默認(rèn)插槽位置
template: '<div><h4>我是子組件</h4><slot name="header"></slot><slot></slot><slot name="footer"></slot></div>',
}
var vm = new Vue({
el: '#app', // dom的掛載點(diǎn),這邊將dom掛載到id為app的標(biāo)簽上
// 在 components 選項(xiàng)中定義你想要使用的組件
components: {
"Child": Child,
},
data: { // 數(shù)據(jù)對(duì)象
},
})
</script>
</body>
</html> 作用域插槽就是讓父組件的插槽內(nèi)容插能夠訪問子組件中才有的數(shù)據(jù)，具體使用示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基礎(chǔ)教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--作用域插槽示例-->
<Child>
<!--這邊v-slot后面其實(shí)省略了default名稱詳細(xì)寫法v-slot:default="slotProps"-->
<template v-slot="slotProps">
<!--通過slotProps獲取子組件中給slot v-bind的值，然后進(jìn)行遍歷讀取-->
<div v-for="item in slotProps.user">姓名: {{ item.name }} 得分: {{ item.score }}</div>
</template>
</Child>
</div>
<script>
var Child = {
data: function () {
return {
userList: [
{"name": "小明", "score": "90"},
{"name": "小紅", "score": "95"},
{"name": "小強(qiáng)", "score": "96"}
]
}
},
// 定義作用域插槽，給slot v-bind了一個(gè)userList的值
template: '<div><h4>作用域插槽示例</h4><slot :user="userList"></slot></div>',
}
var vm = new Vue({
el: '#app', // dom的掛載點(diǎn),這邊將dom掛載到id為app的標(biāo)簽上
// 在 components 選項(xiàng)中定義你想要使用的組件
components: {
"Child": Child,
},
data: { // 數(shù)據(jù)對(duì)象
},
})
</script>
</body>
</html> 至此我們VUE基礎(chǔ)教程就就講完了，主要講解了VUE的基礎(chǔ)用法，其實(shí)VUE還有一些進(jìn)階知識(shí)如vue-router（前端路由）、vuex（數(shù)據(jù)狀態(tài)管理）等內(nèi)容，但這些內(nèi)容主要用在項(xiàng)目構(gòu)建上，成哥在下面AntDesign vue教程中會(huì)進(jìn)行穿插講解，敬請(qǐng)期待。最后如果喜歡本篇文章不要忘了點(diǎn)贊、關(guān)注與轉(zhuǎn)發(fā)哦！
-END-
@IT管理局專注計(jì)算機(jī)領(lǐng)域技術(shù)、大學(xué)生活、學(xué)習(xí)方法、求職招聘、職業(yè)規(guī)劃、職場(chǎng)感悟等類型的原創(chuàng)內(nèi)容。期待與你相遇，和你一同成長(zhǎng)。
相關(guān)閱讀：
.vue優(yōu)點(diǎn)？
答：輕量級(jí)框架：只關(guān)注視圖層，是一個(gè)構(gòu)建數(shù)據(jù)的視圖集合，大小只有幾十kb；
簡(jiǎn)單易學(xué)：國(guó)人開發(fā)，中文文檔，不存在語言障礙 ，易于理解和學(xué)習(xí)；
雙向數(shù)據(jù)綁定：保留了angular的特點(diǎn)，在數(shù)據(jù)操作方面更為簡(jiǎn)單；
組件化：保留了react的優(yōu)點(diǎn)，實(shí)現(xiàn)了html的封裝和重用，在構(gòu)建單頁面應(yīng)用方面有著獨(dú)特的優(yōu)勢(shì)；
視圖，數(shù)據(jù)，結(jié)構(gòu)分離：使數(shù)據(jù)的更改更為簡(jiǎn)單，不需要進(jìn)行邏輯代碼的修改，只需要操作數(shù)據(jù)就能完成相關(guān)操作；
虛擬DOM：dom操作是非常耗費(fèi)性能的， 不再使用原生的dom操作節(jié)點(diǎn)，極大解放dom操作，但具體操作的還是dom不過是換了另一種方式；
運(yùn)行速度更快:相比較與react而言，同樣是操作虛擬dom，就性能而言，vue存在很大的優(yōu)勢(shì)。
2.vue父組件向子組件傳遞數(shù)據(jù)？
答：通過props
3.子組件像父組件傳遞事件？
答：$emit方法
4.v-show和v-if指令的共同點(diǎn)和不同點(diǎn)？
答: 共同點(diǎn)：都能控制元素的顯示和隱藏；
不同點(diǎn)：實(shí)現(xiàn)本質(zhì)方法不同，v-show本質(zhì)就是通過控制css中的display設(shè)置為none，控制隱藏，只會(huì)編譯一次；v-if是動(dòng)態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素，若初始值為false，就不會(huì)編譯了。而且v-if不停的銷毀和創(chuàng)建比較消耗性能。
總結(jié)：如果要頻繁切換某節(jié)點(diǎn)，使用v-show(切換開銷比較小，初始開銷較大)。如果不需要頻繁切換某節(jié)點(diǎn)使用v-if（初始渲染開銷較小，切換開銷比較大）。
5.如何讓CSS只在當(dāng)前組件中起作用？
答：在組件中的style前面加上scoped
6.<keep-alive></keep-alive>的作用是什么?
答:keep-alive 是 Vue 內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。
7.如何獲取dom?
答：ref="domName" 用法：this.$refs.domName
8.說出幾種vue當(dāng)中的指令和它的用法？
答：v-model雙向數(shù)據(jù)綁定；
v-for循環(huán)；
v-if v-show 顯示與隱藏；
v-on事件；v-once: 只綁定一次。
9. vue-loader是什么？使用它的用途有哪些？
答：vue文件的一個(gè)加載器，將template/js/style轉(zhuǎn)換成js模塊。
用途：js可以寫es6、style樣式可以scss或less、template可以加jade等
10.為什么使用key?
答：需要使用key來給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)，Diff算法就可以正確的識(shí)別此節(jié)點(diǎn)。
作用主要是為了高效的更新虛擬DOM。
11.axios及安裝?
答：請(qǐng)求后臺(tái)資源的模塊。npm install axios --save裝好，
js中使用import進(jìn)來，然后.get或.post。返回在.then函數(shù)中如果成功，失敗則是在.catch函數(shù)中。
12.v-modal的使用。
答：v-model用于表單數(shù)據(jù)的雙向綁定，其實(shí)它就是一個(gè)語法糖，這個(gè)背后就做了兩個(gè)操作：
v-bind綁定一個(gè)value屬性；
v-on指令給當(dāng)前元素綁定input事件。
13.請(qǐng)說出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法？
答：assets文件夾是放靜態(tài)資源；components是放組件；router是定義路由相關(guān)的配置; app.vue是一個(gè)應(yīng)用主組件；main.js是入口文件。
14.分別簡(jiǎn)述computed和watch的使用場(chǎng)景
答：computed:
當(dāng)一個(gè)屬性受多個(gè)屬性影響的時(shí)候就需要用到computed
最典型的栗子： 購物車商品結(jié)算的時(shí)候
watch:
當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時(shí)候就需要用watch
栗子：搜索數(shù)據(jù)
15.v-on可以監(jiān)聽多個(gè)方法嗎？
答：可以，栗子：<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。
16.$nextTick的使用
答：當(dāng)你修改了data的值然后馬上獲取這個(gè)dom元素的值，是不能獲取到更新后的值，
你需要使用$nextTick這個(gè)回調(diào)，讓修改后的data值渲染更新到dom元素之后在獲取，才能成功。
17.vue組件中data為什么必須是一個(gè)函數(shù)？
答：因?yàn)镴avaScript的特性所導(dǎo)致，在component中，data必須以函數(shù)的形式存在，不可以是對(duì)象。
組建中的data寫成一個(gè)函數(shù)，數(shù)據(jù)以函數(shù)返回值的形式定義，這樣每次復(fù)用組件的時(shí)候，都會(huì)返回一份新的data，相當(dāng)于每個(gè)組件實(shí)例都有自己私有的數(shù)據(jù)空間，它們只負(fù)責(zé)各自維護(hù)的數(shù)據(jù)，不會(huì)造成混亂。而單純的寫成對(duì)象形式，就是所有的組件實(shí)例共用了一個(gè)data，這樣改一個(gè)全都改了。
18.漸進(jìn)式框架的理解
答：主張最少；可以根據(jù)不同的需求選擇不同的層級(jí)；
19.Vue中雙向數(shù)據(jù)綁定是如何實(shí)現(xiàn)的？
答：vue 雙向數(shù)據(jù)綁定是通過 數(shù)據(jù)劫持 結(jié)合 發(fā)布訂閱模式的方式來實(shí)現(xiàn)的， 也就是說數(shù)據(jù)和視圖同步，數(shù)據(jù)發(fā)生變化，視圖跟著變化，視圖變化，數(shù)據(jù)也隨之發(fā)生改變；
核心：關(guān)于VUE雙向數(shù)據(jù)綁定，其核心是 Object.defineProperty()方法。
20.單頁面應(yīng)用和多頁面應(yīng)用區(qū)別及優(yōu)缺點(diǎn)
答：?jiǎn)雾撁鎽?yīng)用（SPA），通俗一點(diǎn)說就是指只有一個(gè)主頁面的應(yīng)用，瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內(nèi)容都包含在這個(gè)所謂的主頁面中。但在寫的時(shí)候，還是會(huì)分開寫（頁面片段），然后在交互的時(shí)候由路由程序動(dòng)態(tài)載入，單頁面的頁面跳轉(zhuǎn)，僅刷新局部資源。多應(yīng)用于pc端。
多頁面（MPA），就是指一個(gè)應(yīng)用中有多個(gè)頁面，頁面跳轉(zhuǎn)時(shí)是整頁刷新
單頁面的優(yōu)點(diǎn)：
用戶體驗(yàn)好，快，內(nèi)容的改變不需要重新加載整個(gè)頁面，基于這一點(diǎn)spa對(duì)服務(wù)器壓力較小；前后端分離；頁面效果會(huì)比較炫酷（比如切換頁面內(nèi)容時(shí)的專場(chǎng)動(dòng)畫）。
單頁面缺點(diǎn)：
不利于seo；導(dǎo)航不可用，如果一定要導(dǎo)航需要自行實(shí)現(xiàn)前進(jìn)、后退。（由于是單頁面不能用瀏覽器的前進(jìn)后退功能，所以需要自己建立堆棧管理）；初次加載時(shí)耗時(shí)多；頁面復(fù)雜度提高很多。
21.v-if和v-for的優(yōu)先級(jí)
答：當(dāng) v-if 與 v-for 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級(jí)，這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中。所以，不推薦v-if和v-for同時(shí)使用。
如果v-if和v-for一起用的話，vue中的的會(huì)自動(dòng)提示v-if應(yīng)該放到外層去。
22.assets和static的區(qū)別
答：相同點(diǎn)：assets和static兩個(gè)都是存放靜態(tài)資源文件。項(xiàng)目中所需要的資源文件圖片，字體圖標(biāo)，樣式文件等都可以放在這兩個(gè)文件下，這是相同點(diǎn)
不相同點(diǎn)：assets中存放的靜態(tài)資源文件在項(xiàng)目打包時(shí)，也就是運(yùn)行npm run build時(shí)會(huì)將assets中放置的靜態(tài)資源文件進(jìn)行打包上傳，所謂打包簡(jiǎn)單點(diǎn)可以理解為壓縮體積，代碼格式化。而壓縮后的靜態(tài)資源文件最終也都會(huì)放置在static文件中跟著index.html一同上傳至服務(wù)器。static中放置的靜態(tài)資源文件就不會(huì)要走打包壓縮格式化等流程，而是直接進(jìn)入打包好的目錄，直接上傳至服務(wù)器。因?yàn)楸苊饬藟嚎s直接進(jìn)行上傳，在打包時(shí)會(huì)提高一定的效率，但是static中的資源文件由于沒有進(jìn)行壓縮等操作，所以文件的體積也就相對(duì)于assets中打包后的文件提交較大點(diǎn)。在服務(wù)器中就會(huì)占據(jù)更大的空間。
建議：將項(xiàng)目中template需要的樣式文件js文件等都可以放置在assets中，走打包這一流程。減少體積。而項(xiàng)目中引入的第三方的資源文件如iconfoont.css等文件可以放置在static中，因?yàn)檫@些引入的第三方文件已經(jīng)經(jīng)過處理，我們不再需要處理，直接上傳。
23.vue常用的修飾符
答：.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；
.prevent：等同于JavaScript中的event.preventDefault()，防止執(zhí)行預(yù)設(shè)的行為（如果事件可取消，則取消該事件，而不停止事件的進(jìn)一步傳播）；
.capture：與事件冒泡的方向相反，事件捕獲由外到內(nèi)；
.self：只會(huì)觸發(fā)自己范圍內(nèi)的事件，不包含子元素；
.once：只會(huì)觸發(fā)一次。
24.vue的兩個(gè)核心點(diǎn)
答：數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)
數(shù)據(jù)驅(qū)動(dòng)：ViewModel，保證數(shù)據(jù)和視圖的一致性。
組件系統(tǒng)：應(yīng)用類UI可以看作全部是由組件樹構(gòu)成的。
25.vue和jQuery的區(qū)別
答：jQuery是使用選擇器（$）選取DOM對(duì)象，對(duì)其進(jìn)行賦值、取值、事件綁定等操作，其實(shí)和原生的HTML的區(qū)別只在于可以更方便的選取和操作DOM對(duì)象，而數(shù)據(jù)和界面是在一起的。比如需要獲取label標(biāo)簽的內(nèi)容：$("lable").val();,它還是依賴DOM元素的值。
Vue則是通過Vue對(duì)象將數(shù)據(jù)和View完全分離開來了。對(duì)數(shù)據(jù)進(jìn)行操作不再需要引用相應(yīng)的DOM對(duì)象，可以說數(shù)據(jù)和View是分離的，他們通過Vue對(duì)象這個(gè)vm實(shí)現(xiàn)相互的綁定。這就是傳說中的MVVM。
26. 引進(jìn)組件的步驟
答: 在template中引入組件；
在script的第一行用import引入路徑；
用component中寫上組件名稱。
27.delete和Vue.delete刪除數(shù)組的區(qū)別
答：delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。Vue.delete 直接刪除了數(shù)組 改變了數(shù)組的鍵值。
28.SPA首屏加載慢如何解決
答：安裝動(dòng)態(tài)懶加載所需插件；使用CDN資源。
29.Vue-router跳轉(zhuǎn)和location.href有什么區(qū)別
答：使用location.href='/url'來跳轉(zhuǎn)，簡(jiǎn)單方便，但是刷新了頁面；
使用history.pushState('/url')，無刷新頁面，靜態(tài)跳轉(zhuǎn)；
引進(jìn)router，然后使用router.push('/url')來跳轉(zhuǎn)，使用了diff算法，實(shí)現(xiàn)了按需加載，減少了dom的消耗。
其實(shí)使用router跳轉(zhuǎn)和使用history.pushState()沒什么差別的，因?yàn)関ue-router就是用了history.pushState()，尤其是在history模式下。
30. vue slot
答：簡(jiǎn)單來說，假如父組件需要在子組件內(nèi)放一些DOM，那么這些DOM是顯示、不顯示、在哪個(gè)地方顯示、如何顯示，就是slot分發(fā)負(fù)責(zé)的活。
31.你們vue項(xiàng)目是打包了一個(gè)js文件，一個(gè)css文件，還是有多個(gè)文件？
答：根據(jù)vue-cli腳手架規(guī)范，一個(gè)js文件，一個(gè)CSS文件。
32.Vue里面router-link在電腦上有用，在安卓上沒反應(yīng)怎么解決？
答：Vue路由在Android機(jī)上有問題，babel問題，安裝babel polypill插件解決。
33.Vue2中注冊(cè)在router-link上事件無效解決方法
答： 使用@click.native。原因：router-link會(huì)阻止click事件，.native指直接監(jiān)聽一個(gè)原生事件。
34.RouterLink在IE和Firefox中不起作用（路由不跳轉(zhuǎn)）的問題
答: 方法一：只用a標(biāo)簽，不適用button標(biāo)簽；方法二：使用button標(biāo)簽和Router.navigate方法
35.axios的特點(diǎn)有哪些
答：從瀏覽器中創(chuàng)建XMLHttpRequests；
node.js創(chuàng)建http請(qǐng)求；
支持Promise API；
攔截請(qǐng)求和響應(yīng)；
轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)；
取消請(qǐng)求；
自動(dòng)換成json。
axios中的發(fā)送字段的參數(shù)是data跟params兩個(gè)，兩者的區(qū)別在于params是跟請(qǐng)求地址一起發(fā)送的，data的作為一個(gè)請(qǐng)求體進(jìn)行發(fā)送
params一般適用于get請(qǐng)求，data一般適用于post put 請(qǐng)求。
36.請(qǐng)說下封裝 vue 組件的過程？
答：1. 建立組件的模板，先把架子搭起來，寫寫樣式，考慮好組件的基本邏輯。(os：思考1小時(shí)，碼碼10分鐘，程序猿的準(zhǔn)則。)
2. 準(zhǔn)備好組件的數(shù)據(jù)輸入。即分析好邏輯，定好 props 里面的數(shù)據(jù)、類型。
3. 準(zhǔn)備好組件的數(shù)據(jù)輸出。即根據(jù)組件邏輯，做好要暴露出來的方法。
4. 封裝完畢了，直接調(diào)用即可
37.params和query的區(qū)別
答：用法：query要用path來引入，params要用name來引入，接收參數(shù)都是類似的，分別是this.$route.query.name和this.$route.params.name。
url地址顯示：query更加類似于我們ajax中g(shù)et傳參，params則類似于post，說的再簡(jiǎn)單一點(diǎn)，前者在瀏覽器地址欄中顯示參數(shù)，后者則不顯示
注意點(diǎn)：query刷新不會(huì)丟失query里面的數(shù)據(jù)
params刷新 會(huì) 丟失 params里面的數(shù)據(jù)。
38.vue初始化頁面閃動(dòng)問題
答：使用vue開發(fā)時(shí)，在vue初始化之前，由于div是不歸vue管的，所以我們寫的代碼在還沒有解析的情況下會(huì)容易出現(xiàn)花屏現(xiàn)象，看到類似于{{message}}的字樣，雖然一般情況下這個(gè)時(shí)間很短暫，但是我們還是有必要讓解決這個(gè)問題的。
首先：在css里加上[v-cloak] {
display: none;
}。
如果沒有徹底解決問題，則在根元素加上style="display: none;" :style="{display: 'block'}"
39.vue更新數(shù)組時(shí)觸發(fā)視圖更新的方法
答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()
40.vue常用的UI組件庫
答：Mint UI，element，VUX
41.vue修改打包后靜態(tài)資源路徑的修改
答：cli2版本：將 config/index.js 里的 assetsPublicPath 的值改為 './' 。
build: {
...
assetsPublicPath: './',
...
}
cli3版本：在根目錄下新建vue.config.js 文件，然后加上以下內(nèi)容：（如果已經(jīng)有此文件就直接修改）
module.exports={
publicPath: '', // 相對(duì)于 HTML 頁面（目錄相同） }
生命周期函數(shù)面試題
1.什么是 vue 生命周期？有什么作用？
答：每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程——例如，需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時(shí)更新 DOM 等。同時(shí)在這個(gè)過程中也會(huì)運(yùn)行一些叫做 生命周期鉤子 的函數(shù)，這給了用戶在不同階段添加自己的代碼的機(jī)會(huì)。（ps：生命周期鉤子就是生命周期函數(shù)）例如，如果要通過某些插件操作DOM節(jié)點(diǎn)，如想在頁面渲染完后彈出廣告窗， 那我們最早可在mounted 中進(jìn)行。
2.第一次頁面加載會(huì)觸發(fā)哪幾個(gè)鉤子？
答：beforeCreate， created， beforeMount， mounted
3.簡(jiǎn)述每個(gè)周期具體適合哪些場(chǎng)景
答：beforeCreate：在new一個(gè)vue實(shí)例后，只有一些默認(rèn)的生命周期鉤子和默認(rèn)事件，其他的東西都還沒創(chuàng)建。在beforeCreate生命周期執(zhí)行的時(shí)候，data和methods中的數(shù)據(jù)都還沒有初始化。不能在這個(gè)階段使用data中的數(shù)據(jù)和methods中的方法
create：data 和 methods都已經(jīng)被初始化好了，如果要調(diào)用 methods 中的方法，或者操作 data 中的數(shù)據(jù)，最早可以在這個(gè)階段中操作
beforeMount：執(zhí)行到這個(gè)鉤子的時(shí)候，在內(nèi)存中已經(jīng)編譯好了模板了，但是還沒有掛載到頁面中，此時(shí)，頁面還是舊的
mounted：執(zhí)行到這個(gè)鉤子的時(shí)候，就表示Vue實(shí)例已經(jīng)初始化完成了。此時(shí)組件脫離了創(chuàng)建階段，進(jìn)入到了運(yùn)行階段。 如果我們想要通過插件操作頁面上的DOM節(jié)點(diǎn)，最早可以在和這個(gè)階段中進(jìn)行
beforeUpdate： 當(dāng)執(zhí)行這個(gè)鉤子時(shí)，頁面中的顯示的數(shù)據(jù)還是舊的，data中的數(shù)據(jù)是更新后的， 頁面還沒有和最新的數(shù)據(jù)保持同步
updated：頁面顯示的數(shù)據(jù)和data中的數(shù)據(jù)已經(jīng)保持同步了，都是最新的
beforeDestory：Vue實(shí)例從運(yùn)行階段進(jìn)入到了銷毀階段，這個(gè)時(shí)候上所有的 data 和 methods ， 指令， 過濾器 ……都是處于可用狀態(tài)。還沒有真正被銷毀
destroyed： 這個(gè)時(shí)候上所有的 data 和 methods ， 指令， 過濾器 ……都是處于不可用狀態(tài)。組件已經(jīng)被銷毀了。
4.created和mounted的區(qū)別
答：created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。
mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。
5.vue獲取數(shù)據(jù)在哪個(gè)周期函數(shù)
答：一般 created/beforeMount/mounted 皆可.
比如如果你要操作 DOM , 那肯定 mounted 時(shí)候才能操作.
6.請(qǐng)?jiān)敿?xì)說下你對(duì)vue生命周期的理解？
答：總共分為8個(gè)階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。
創(chuàng)建前/后： 在beforeCreated階段，vue實(shí)例的掛載元素$el和**數(shù)據(jù)對(duì)象**data都為undefined，還未初始化。在created階段，vue實(shí)例的數(shù)據(jù)對(duì)象data有了，$el還沒有。
載入前/后：在beforeMount階段，vue實(shí)例的$el和data都初始化了，但還是掛載之前為虛擬的dom節(jié)點(diǎn)，data.message還未替換。在mounted階段，vue實(shí)例掛載完成，data.message成功渲染。
更新前/后：當(dāng)data變化時(shí)，會(huì)觸發(fā)beforeUpdate和updated方法。
銷毀前/后：在執(zhí)行destroy方法后，對(duì)data的改變不會(huì)再觸發(fā)周期函數(shù)，說明此時(shí)vue實(shí)例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定，但是dom結(jié)構(gòu)依然存在。
vue路由面試題
1.mvvm 框架是什么？
答：vue是實(shí)現(xiàn)了雙向數(shù)據(jù)綁定的mvvm框架，當(dāng)視圖改變更新模型層，當(dāng)模型層改變更新視圖層。在vue中，使用了雙向綁定技術(shù)，就是View的變化能實(shí)時(shí)讓Model發(fā)生變化，而Model的變化也能實(shí)時(shí)更新到View。
2.vue-router 是什么?它有哪些組件
答：vue用來寫路由一個(gè)插件。router-link、router-view
3.active-class 是哪個(gè)組件的屬性？
答：vue-router模塊的router-link組件。children數(shù)組來定義子路由
4.怎么定義 vue-router 的動(dòng)態(tài)路由? 怎么獲取傳過來的值？
答：在router目錄下的index.js文件中，對(duì)path屬性加上/:id。 使用router對(duì)象的params.id。
5.vue-router 有哪幾種導(dǎo)航鉤子?
答：三種，
第一種：是全局導(dǎo)航鉤子：router.beforeEach(to,from,next)，作用：跳轉(zhuǎn)前進(jìn)行判斷攔截。
第二種：組件內(nèi)的鉤子
第三種：?jiǎn)为?dú)路由獨(dú)享組件
6.$route 和 $router 的區(qū)別
答：$router是VueRouter的實(shí)例，在script標(biāo)簽中想要導(dǎo)航到不同的URL,使用$router.push方法。返回上一個(gè)歷史history用$router.to(-1)
$route為當(dāng)前router跳轉(zhuǎn)對(duì)象。里面可以獲取當(dāng)前路由的name,path,query,parmas等。
7.vue-router的兩種模式
答:hash模式：即地址欄 URL 中的 # 符號(hào)；
history模式：window.history對(duì)象打印出來可以看到里邊提供的方法和記錄長(zhǎng)度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）。
8.vue-router實(shí)現(xiàn)路由懶加載（ 動(dòng)態(tài)加載路由 ）
答:三種方式
第一種：vue異步組件技術(shù)====異步加載，vue-router配置路由 , 使用vue的異步組件技術(shù) , 可以實(shí)現(xiàn)按需加載 .但是,這種情況下一個(gè)組件生成一個(gè)js文件。
第二種：路由懶加載(使用import)。
第三種：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技術(shù)，也可以實(shí)現(xiàn)按需加載。這種情況下，多個(gè)路由指定相同的chunkName，會(huì)合并打包成一個(gè)js文件。
vuex常見面試題
1.vuex是什么？怎么使用？哪種功能場(chǎng)景使用它？
答：vue框架中狀態(tài)管理。在main.js引入store，注入。
新建了一個(gè)目錄store.js，….. export 。
場(chǎng)景有：?jiǎn)雾搼?yīng)用中，組件之間的狀態(tài)。音樂播放、登錄狀態(tài)、加入購物車
2.vuex有哪幾種屬性？
答：有五種，分別是 State、 Getter、Mutation 、Action、 Module
state=> 基本數(shù)據(jù)(數(shù)據(jù)源存放地)
getters=> 從基本數(shù)據(jù)派生出來的數(shù)據(jù)
mutations=> 提交更改數(shù)據(jù)的方法，同步！
actions=> 像一個(gè)裝飾器，包裹mutations，使之可以異步。
modules=> 模塊化Vuex
3.Vue.js中ajax請(qǐng)求代碼應(yīng)該寫在組件的methods中還是vuex的actions中？
答：如果請(qǐng)求來的數(shù)據(jù)是不是要被其他組件公用，僅僅在請(qǐng)求的組件內(nèi)使用，就不需要放入vuex 的state里。
如果被其他地方復(fù)用，這個(gè)很大幾率上是需要的，如果需要，請(qǐng)將請(qǐng)求放入action里，方便復(fù)用。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
