前端试题(一)
2020-03-28 金卡智能
*1. 腳手架 vue-cli現在用的什么版本,2版本了解多少,2 3有什么區別
絕對路徑與相對路徑
./ 當前路徑
…/父路徑
/ 絕對路徑
某文件里引用其他路徑下的資源:
判斷該文件所在文件夾與其他資源路徑間的關系。
什么?錯過了Vue CLI 2!你還要錯過Vue CLI3?
區別寫得很詳細
全局安裝一個橋接工具
Vue CLI 是一個基于 Vue.js 進行快速開發的完整系統,提供:
通過 @vue/cli 搭建交互式的項目腳手架。
通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。
一個運行時依賴 (@vue/cli-service),該依賴:
可升級;
基于 webpack 構建,并帶有合理的默認配置;
可以通過項目內的配置文件進行配置;
可以通過插件進行擴展。
一個豐富的官方插件集合,集成了前端生態中最好的工具。
一套完全圖形化的創建和管理 Vue.js 項目的用戶界面。
vue-cli3.0默認項目目錄與2.0的相比,更精簡:
1.移除的配置文件根目錄下的,build和config等目錄,
2.移除了static文件夾,新增了public文件夾,并且index.html移動到public中。
3.在src文件夾中新增了views文件夾,用于分類 試圖組件 和 公共組件 。
4.大部分配置 都集成到 vue.config.js這里,在項目根目錄下
1 安裝
2 目錄 配置文件
3 運行
4 cli插件 @vue/cli-plugin-
*2.怎么存儲靜態資源
vue-cli2 版本
1) static – 不打包,直接上傳(引入的第三方的資源文件(已經經過處理)我們不再需要處理,直接上傳)
2) src/assets – 會被打包(壓縮體積,代碼格式化,上傳至服務器 => 將項目中template需要的樣式文件、js文件等都可以放置在assets中,打包減少體積。)
config/index.js
注意:如果把圖片放在assets與static中,html頁面可以使用;但在動態綁定中,assets路徑的圖片會加載失敗,因為webpack使用的是commenJS規范,必須使用require才可以,具體代碼如下:
<div id="hook"><h3>演示鉤子的組件</h3><p>直接使用路徑</p><img src="../../assets/11.png" alt="圖片加載失敗" title="assets中的圖片"><img src="../../../static/11.png" alt="圖片加載失敗" title="static中的圖片"><br><p>動態綁定路徑</p><img :src="assetsURL" alt="圖片加載失敗" title="assets中的圖片"><img :src="staticURL" alt="圖片加載失敗" title="static中的圖片"></div> data (){return {assetsURL: require('../../assets/11.png'),staticURL: '../../../static/11.png'}}vue-cli3 版本
1)public不打包(個人理解相當于2版本static)
2) src/assets
資源打包
- webpack處理靜態資源:在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查詢資源的URLs解析. 比如說, 在 img src=”./logo.png” 和background: url(./logo.png) 中./logo.png是一個相對資源路徑,并且會被Webpack視為一個模塊依賴來解析。
- 因為./logo.png并非一個Javascript,當將它作為模塊依賴對待時,我們需要用url-loader和file-loader去處理它。
webpack 中的解析規則
webpack中文文檔
- 相對URLs,
例如 ./assets/logo.png 將會被解釋為一個模塊依賴.
它們將會被替換為基于你Webpack輸出配置自動生成的 URL - 無前綴URLs,
例如. assets/logo.png 將會被像相對URLs一樣處理并將被轉化為 ./assets/logo.png. 我在實際操作中,不加./會報錯,會當做模塊去查找,如果起了別名@/xx/xx.png正常,給assets直接取別名也無法加載圖片。而大多在項目中加載圖片,都是用import的方法,并不直接src=字符串 - 帶~前綴的URLs 將會被看做模塊請求, 類似于請求(‘some-module/image.png’).
如果你想改變Webpack的模塊解決配置你需要使用這個前綴 。例如,你需要處理資源的別名,你需要使用 ~assets/logo.png去確保這個別名時受到重視的. - 特權相對URLs(絕對路徑,/開頭),
例如 /assets/logo.png 是完全不作處理的.
最后
假如說,你把index.html以及static文件夾直接放到容器的根目錄,即訪問路徑為:http://xxxx:9090/index.html這樣形式,那么直接使用‘/’即可,不用使用相對路徑。
但是如果說你的前端項目是在某個項目文件夾下或者合并到后臺項目中去發布,即訪問路徑可能為:http://xxx:9090/projectname/index.html,那么就一定要使用’./’,否則資源信息會找不到。
另外:放在static下的圖片,在編碼開發的時候直接使用相對路徑即可,和assetsPublicPath配置為相對路徑或絕對路徑沒有任何關系。這點不要混淆。
*3.多入口
vue-cli3多環境多入口,分別打包
http://localhost:8081/ui.html http://localhost:8081/index.html會有2個main.js,2個router.js
都是 雙份的
需要配置vue.config.js
他說入口是public?
4 .BFC(5個要點)
什么是BFC?看這一篇就夠了
5.call和apply的區別(反性)
如果使用apply或call方法,那么this指向他們的第一個參數,apply的第二個參數是一個參數數組,call的第二個及其以后的參數都是數組里面的元素。會立即調用。而bind返回函數,不會立即調用。
var numbers = [5, 458 , 120 , -215 ] Math.max.apply(null, numbers)看MDN Math.max()的參數是一組數值(把數寫進去,不能直接傳數組)
有幾個例子比較深了沒看下去
6.Localstorage和sessionstorage的區別
- localStorage生命周期是永久,這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息,否則這些信息將永遠存在。
- sessionStorage生命周期為當前窗口或標簽頁,一旦窗口或標簽頁被永久關閉了,那么所有通過sessionStorage存儲的數據也就被清空了。
- 不同瀏覽器(× ×)無法共享localStorage或sessionStorage中的信息。
- 相同瀏覽器的不同頁面間可以共享相同的 localStorage(頁面屬于相同域名和端口)但是不同頁面或標簽頁間無法共享sessionStorage的信息。(√ ×)
- 如果一個標簽頁包含多個iframe標簽且他們屬于同源頁面,那么他們之間是可以共享sessionStorage的。(√ √)
7.數組遍歷的區別:forEach map filter 返回值(find、some、every)
| forEach | 遍歷數組,length次,無法break | 無返回值,return控制跳出當前循環 | 執行 |
| map | 同上 | 新數組 | 執行 |
| filter | – | 判斷為true的元素 組成的新數組 | 篩選 |
| includes | 判斷數組是否含有某值,不用return,不用回調 | true或false | 篩選 |
| find | 輸出的是一旦 判斷為true 則跳出循環輸出符合條件的那個數組元素 | 篩選 | |
| findIndex | 輸出的是一旦 判斷為true 則跳出循環輸出符合條件的那個數組元素下標 | 篩選 | |
| some | 判斷為true則馬上跳出循環并return成true | 判斷 | |
| every | 判斷 | ||
| reduce | 利用前遍歷操作的結果到下一次遍歷使用,重復疊加使用下去 | sum或者新數組 |
MDN內置對象
8.Reduce 作用 返回值
*9.ES6
阮一峰ES6
羅列出平時用到的哪些是es6語法
- 變量聲明 var let const
- 模板字符串``
**10.var與(let、const)的區別 要完整
let
- 模仿私有成員:在處理構造函數的時候,可以通過let聲明而不是閉包來創建一個或多個私有成員。
- 暫存死區 :let和const都適用
- switch語句
下面是對的寫法:
let x = 1;switch(x) {case 0: {let foo;break;} case 1: {let foo;break;} }由于詞法作用域,表達式(foo + 55)內的標識符foo被認為是if塊的foo變量,而不是值為33的塊外面的變量foo。
function test(){var foo = 33;{let foo = (foo + 55); // ReferenceError} } test();在以下情況下,這種現象可能會使您感到困惑。 let n of n.a已經在for循環塊的私有范圍內。因此,標識符n.a被解析為位于指令本身(“let n”)中的“ n”對象的屬性“ a”。
在沒有執行到它的初始化語句之前,它仍舊存在于暫存死區中。
const常量
- 一旦聲明必須賦值,不能使用null占位。
-
聲明后不能再修改
-
如果聲明的是復合類型數據,可以修改其屬性
*11.模板字符串 ``
vue {{}} 叫插值表達式、 mustache模板語言 – 相關 模板引擎
模板字符串 ``
- 可以當作普通字符串使用
- 定義多行字符串
- 字符串中嵌入變量
*12.模板字符串中怎么表示變量
// 字符串中嵌入變量 var name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?` // Hello Bob, how are you today?- 大括號內可以放入任意的JavaScript表達式,可以進行運算,以及引入對象屬性
- 模板字符串之中還可以調用函數
- 如果模板字符串中的變量沒有聲明,則會報錯
- String.raw方法用來充當模板字符串的處理函數,返回一個除表達式和變量會被替換,其它都保持原樣的字符串。
13.箭頭函數里的this 指向
ES6箭頭函數里this的指向就是上下文里對象this指向,偶爾沒有上下文對象,this就指向window14.Object. keys
// simple array var arr = ['a', 'b', 'c']; console.log(Object.keys(arr)); // console: ['0', '1', '2']// array like object var obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.keys(obj)); // console: ['0', '1', '2']// array like object with random key ordering var anObj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(Object.keys(anObj)); // console: ['2', '7', '100']15.V-if v-show 區別 相當于css中的
*16.V-for的key有什么用
關鍵詞:
虛擬DOM的Diff算法 vue實現了一套虛擬DOM,使我們可以不直接操作DOM元素,只操作數據便可以重新渲染頁面 ``高效的更新虛擬DOM`
Vue2.0 v-for 中 :key 到底有什么用?
**17.16:06頁面切換回來的時候,查詢過的表不用再查。求 vue中如何保存組件的狀態,進行緩存,切換的時候#? 輸出的
**18.Vue中怎么跨域
配置代理方式
關鍵詞:配置代理
1. 后臺更改header
header('Access-Control-Allow-Origin:*');//允許所有來源訪問 header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式2. 使用JQuery提供的jsonp
ethods: { getData () { var self = this $.ajax({ url: 'http://f.apiplus.cn/bj11x5.json', type: 'GET', dataType: 'JSONP', success: function (res) { self.data = res.data.slice(0, 3) self.opencode = res.data[0].opencode.split(',') } }) } }3. 使用http-proxy-middleware 代理解決(項目使用vue-cli腳手架搭建)
proxyTable: { '/api': { //使用"/api"來代替"http://f.apiplus.c" target: 'http://f.apiplus.cn', //源地址 changeOrigin: true, //改變源 pathRewrite: { '^/api': 'http://f.apiplus.cn' //路徑重寫 } } }4. axios跨域,依然是配置了代理
在main.js中,配置下我們訪問的Url前綴:
修改config文件夾下的index.js文件,在proxyTable中加上如下代碼:
給url加上了前綴/api,我們訪問"/test/test123"就當于訪問了:localhost:8080/api/test/test123
**19.header誰處理的?17:54 后端
**20.發請求到響應的過程
一個完整的http請求響應過程
21.vuex用過嗎
**22.Vuex怎么獲取數據
獲取vuex中的數據一般寫在computed(計算)中<script>import { mapState, mapMutations } from 'vuex';export default {// computed: mapState({// 第一種接受數據方法// // hhh: state => state.num,// 第二種接受數據方法// // zxd : 'num'// 第三種接受數據方法// countPlusLocalState(state){// return state.num + 100// }// }),//第四種接收數據的方法computed:mapState(['num']),//第五種接收數據的方法// computed:{// ...mapState(['num']),// he(){// return 'hhehehe'// }// },name: "user",methods:{...mapMutations(['add','del'])}, </script>**23.Mutation 和action區別: 異步
1、流程順序
“相應視圖—>修改State”拆分成兩部分,視圖觸發Action,Action再觸發Mutation。
2、角色定位
基于流程順序,二者扮演不同的角色。
Mutation:專注于修改State,理論上是修改State的唯一途徑。
Action:業務代碼、異步請求。
3、限制
角色不同,二者有不同的限制。
Mutation:必須同步執行。
Action:可以異步,但不能直接操作State。
24.Getter 的作用 – 可以認為是store的計算屬性
[Vuex系列] - Vuex中的getter的用法
*25.vue里怎么阻止冒泡
- . stop:阻止冒泡(通俗講就是阻止事件向上級DOM元素傳遞)
- . prevent:阻止默認事件的發生
- . capture:捕獲冒泡,即有冒泡發生時,有該修飾符的dom元素會先執行,如果有多個,從外到內依次執行,然后再按自 然順序執行觸發的事件
- . self:將事件綁定到自身,只有自身才能觸發,通常用于避免冒泡事件的影響
- . once:設置事件只能觸發一次,比如按鈕的點擊等
**26.21.55 axios異步請求,如果同時發多個請求,讓他們全部返回以后再進行處理,是怎么操作的
this.$axios.all([this.$axios.get(url).then(res => res.data),this.$axios.get(url).then(res => res.data)]).then(this.$axios.spread((val1,val2) => {// val 是數組中每個接口返回的值 res.dataconsole.log('兩個接口全部加載完成',val1,val2) ; // 1,2})).catch(err => {console.log(err) ;}) =*27.Axios get請求post請求參數
get:params
params:{id:this.kemuid}, headers:{token:Cookies.get('token'), platform: 'web'}post:對象
{'queslistid':this.kemuid},{headers: {'token':Cookies.get('token'),'platform': 'web'} }*28.axios如何實現一個請求的攔截 24.48
**29.Axios回調函數作用. Then 和catch 什么時候執行catch
Promise對象——then()和catch()方法
30.Baseurl
*31.Timeout
axios超時timeout攔截
32.Vue以外其他框架
33.框架除了elementUI
*34.ElemuentUI解釋柵格布局實現原理 26.10
Element UI Layout源碼解析
**35.vue子組件之間直接怎么通信 25.27
bus數據通信
Vue 兄弟組件之間的通信
https://www.cnblogs.com/fundebug/p/10884896.html
**36.表單組件綁定的model值
**37.前端控制用戶對頁面的訪問權限
前端權限控制
**38.Echarts如何把分割線去掉
yAxis : [{type : 'value',name:'電量(kWh)',axisLine:{show:false},axisTick:{show:false},splitLine:{show:false}}]splitLine對應2,axisTick對應1.**39.路由兩類:hash和history的區別
前端路由的兩種模式:hash模式和 history模式
40.只需要1個div
<style>div{height: 100px;width: 100px;border-radius: 100px;position: absolute;top: 40%;left: 40%;border: solid 10px purple;box-shadow: 0px 0px 0px 10px red,0px 0px 0px 10px black inset;background: gray;}div::after{content:' ';background-color: yellow; border-radius: 100px;display: block;z-index: -1;position: relative; left: -30px;top: -30px;width: 160px;height: 160px;}div::before{content:' ';background-color: green; border-radius: 100px;display: block;z-index: -2;position: absolute; left: -40px;top: -40px; width: 180px;height: 180px;}</style><div></div>總結
- 上一篇: node项目正常启动后不能访问(防火墙未
- 下一篇: 兄弟9150cdn换硒鼓清零抹粉_兄弟打