1、 說下行內(nèi)元素和塊級元素的區(qū)別?行內(nèi)塊元素的兼容性使用?(IE8 以下)
萊陽網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),萊陽網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為萊陽上1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營銷網(wǎng)站建設(shè)要多少錢，請找那個(gè)售后服務(wù)好的萊陽做網(wǎng)站的公司定做！
答：行內(nèi)元素：會在水平方向排列，不能包含塊級元素，設(shè)置width無效，height無效(可以設(shè)置line-height)，margin上下無效，padding上下無效。塊級元素：各占據(jù)一行，垂直方向排列。從新行開始結(jié)束接著一個(gè)斷行。兼容性：display:inline-block;*display:inline;*zoom:1。
2、box-sizing常用的屬性有哪些?分別有什么作用?
答：box-sizing: content-box|border-box|inherit。content-box:寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框(元素默認(rèn)效果)。
border-box:元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
3、Doctype作用?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
答：告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。
標(biāo)準(zhǔn)模式的排版和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。
4、html5有哪些新特性?如何處理HTML5新標(biāo)簽的瀏覽器兼容問題?如何區(qū)分 HTML 和 HTML5?
答：HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。
(1)繪畫 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
(4)sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;
(5)語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;
(6)表單控件，calendar、date、time、email、url、search;
(7)新的技術(shù)webworker, websocket, Geolocation;
IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。當(dāng)然也可以直接使用成熟的框架、比如html5shim。
以上就是環(huán)球青藤小編關(guān)于web前端面試題的相關(guān)分享，希望對大家有所幫助，想要了解更多相關(guān)內(nèi)容，請及時(shí)關(guān)注本平臺并進(jìn)行查看!
[img]大家好，我是王我。
隨著春節(jié)的結(jié)束，各個(gè)行業(yè)也普遍開始了上班的節(jié)奏， 不過本人17號才上班。為什么？因?yàn)殚L得帥的都上班比較晚。 當(dāng)然，每到新年結(jié)束，又迎來了一批招聘者與面試者，我來說說作為一年工作經(jīng)驗(yàn)應(yīng)該知道的面試題。
HTML篇
1.doctype是什么？有哪些類型？
2.input有哪些新類型？簡要說明其8用法。
3.HTML5有哪些新特性，移除了哪些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分HTML和HTML5？
4.bootstrap響應(yīng)式的原理是什么？
5.多移動終端頁面適配是如何實(shí)現(xiàn)的？
CSS篇
1.如何實(shí)現(xiàn)兩列布局，左邊自適應(yīng)，右邊固定寬度？
2.用CSS畫一個(gè)三角形
3.CSS實(shí)現(xiàn)字體大寫
4.display有哪些常用的屬性值？分別是什么意思？
5.position為absolute，relative，fixed的定點(diǎn)位置
6.用三種方法清除浮動
7.請介紹一下margin塌陷問題
js篇
1.什么是事件冒泡和捕獲？如何阻止事件冒泡？(分別用原生和jquery實(shí)現(xiàn))
2.js創(chuàng)建對象，至少使用三種方法
3.簡述一下事件穿透以及解決辦法
4.用三種方式判斷變量類型是否是數(shù)組
5.如何實(shí)現(xiàn)對象的拷貝？
6.什么是閉包？閉包的優(yōu)缺點(diǎn)。
7.簡述一下ajax請求的過程。
8.簡述一下new一個(gè)人構(gòu)造函數(shù)的人過程。
9.為什么會有跨域？是怎么解決跨域問題的？簡述一下原理。
10.js原始數(shù)據(jù)類型有哪些？
11.學(xué)一個(gè)函數(shù)，判斷一個(gè)變量是否是字符串
12.typeof有哪些結(jié)果？
13.剪頭函數(shù)和普通函數(shù)有什么區(qū)別？
14.請用三種方法實(shí)現(xiàn)數(shù)組去重
15.href和src有什么區(qū)別？
jquery篇
1.attr()和prop()有什么區(qū)別？
2.on和bind有什么區(qū)別？js動態(tài)添加的dom元素是通過on還是bind？
3.touch和click有什么區(qū)別？
4.window.onload和jquery的ready有什么區(qū)別？
vue篇
1.簡述一下vue的生命周期及其特點(diǎn)
2.vue雙向綁定的原理是什么？
3.vue的特點(diǎn)有哪些？和jquery有什么區(qū)別？
4.父子組件之間傳遞數(shù)據(jù)的方法
5.子組件如何共享數(shù)據(jù)？
6.一般有什么工具進(jìn)行數(shù)據(jù)交互？
7.webpack的原理是什么？
8.簡述一下$nextTick的用法
瀏覽器篇
1.cookie、sessionStorage、localStorage的區(qū)別是什么？
2.有用過瀏覽器緩存嗎？簡述一下基本的緩存機(jī)制
網(wǎng)絡(luò)篇
1.http和https之間的區(qū)別
2.從服務(wù)器的安全考慮，是使用get請求還是post請求？
3.URL請求的過程有哪些？
項(xiàng)目經(jīng)驗(yàn)篇
1.項(xiàng)目中遇到的最大挑戰(zhàn)以及解決辦法
2.常見的網(wǎng)頁優(yōu)化有哪些？
作為一個(gè)面試一年以內(nèi)工作經(jīng)驗(yàn)的前端程序員來說，以上的問題能夠倒答如流月薪6k應(yīng)該不成問題啦。這些面試題也是我在很多面試中感覺經(jīng)常被問到的題目。
希望大家年后找工作能夠順順利利， 千萬不要跟我一樣哦，只有帥氣就一無所有了。
大家好，我是王我，中國最帥的前端程序員。
前幾次都是各種培訓(xùn)公司，各種忽悠就不提了，說說后面4次面試的經(jīng)歷。
第一次是面一個(gè)小公司，不過他們好像沒有厲害的前端，來面我的是個(gè)后端，一來沒有問我關(guān)于js的知識，直接問我以前做過什么，有沒有經(jīng)驗(yàn)，我本人不會吹牛，簡歷也沒怎么包裝，就是自己把自學(xué)的知識和做的幾個(gè)小demo弄在上面，也用github掛在頁面上了，不過他根本不點(diǎn)開看，也不問，問我會不會vue，我當(dāng)時(shí)對框架還不了解，他就說他們需要能直接上手開始寫的，所以我第一個(gè)就直接掛了。
第二次面試是一個(gè)國企，這個(gè)問了很多問題，都很基礎(chǔ)，js數(shù)據(jù)類型，數(shù)組操作，事件，大概就是高程的前面幾章看看就差不多都能答到，然后因?yàn)樗麄冎饕胘q，所以問了很多jq的操作，關(guān)于節(jié)點(diǎn)的，動畫的，我看鋒利的jq大概看了3遍，也練過多次，所以我答的很熟。然后問了些布局方面的，bootstrap我了解過，又看過css3，所以這方面也沒啥問題，最后在現(xiàn)場做了個(gè)題目，主要就是布局然后通過ajax呈現(xiàn)數(shù)據(jù)。后面聽介紹我面試的說面試官比較滿意，說我jq很熟，一面就過了?？上Ш竺骐娫捗嬖嚥恢趺椿厥驴赡鼙憩F(xiàn)的不夠自信，雖然沒問技術(shù)，但是我沒啥自信，把沒項(xiàng)目經(jīng)驗(yàn)什么的也不知怎么就一五一十交代了，估計(jì)因?yàn)檫@個(gè)掛掉了。
第三次沒問問題，直接就是一套題開做，我在那做了一個(gè)多小時(shí)。題目就是按照要求一步一步做一個(gè)頁面出來，我也搞忘了我當(dāng)時(shí)卡在哪個(gè)地方了，坐在那得時(shí)候就是做不出來，沒有設(shè)計(jì)圖，要根據(jù)他的描述自己找個(gè)設(shè)計(jì)圖然后做，我第一次遇到這個(gè)有點(diǎn)懵，雖然當(dāng)時(shí)沒做出來，不過回來我自己花了幾個(gè)小時(shí)把它做了。所以這個(gè)也是涼了。
第四個(gè)問的比較多，數(shù)據(jù)類型，數(shù)組操作，跨域，ajax，閉包，原型鏈，繼承，深拷貝，淺拷貝，模塊amd cmd，基本都是問的js。然后問了html5的新特性 css3 的新特性，遇到過什么瀏覽器的兼容性問題，怎么解決的，以后想往什么方面發(fā)展。這個(gè)時(shí)候我已經(jīng)會點(diǎn)vue了，照著做了個(gè)小demo，不過后來知道公司用的angularjs，面試官也沒看我做的，問也沒問。。以前聽網(wǎng)上說要帶上自己的項(xiàng)目去面試感覺沒起多大效果。
最后總結(jié)下如果面的比較初級的崗位，應(yīng)該主要問js，原型鏈，繼承，閉包，深淺拷貝，ajax，跨域，然后js的基礎(chǔ)知識，對了還有apply和call也問了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一點(diǎn)的，暫時(shí)還沒面過，等以后面過在來回答
1. cookie session 的用途和區(qū)別，以及有效期
1、cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙
考慮到安全應(yīng)當(dāng)使用session。
3、session會在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問增多，會比較占用你服務(wù)器的性能
考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE。
4、單個(gè)cookie保存的數(shù)據(jù)不能超過4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。
2. vue的數(shù)據(jù)綁定原理，mvvm與mvc的區(qū)別
MVVM：
m:model數(shù)據(jù)模型層 v:view視圖層 vm:ViewModel
vue中采用的是mvvm模式，這是從mvc衍生過來的
MVVM讓視圖與viewmodel直接的關(guān)系特別的緊密，就是為了解決mvc反饋不及時(shí)的問題
圖片說明一下：
說到MVVM就要說一下雙向綁定和數(shù)據(jù)劫持的原理，
MVC：
m:model數(shù)據(jù)模型層 v:view視圖層 c:controller控制器
原理： c層需要控制model層的數(shù)據(jù)在view層進(jìn)行顯示
MVC兩種方式，圖片說明：
總結(jié)：
mvvm與mvc最大的區(qū)別：
MVVM實(shí)現(xiàn)了view與model的自動同步，也就是model屬性改變的時(shí)候， 我們不需要再自己手動操作dom元素去改變view的顯示，而是改變屬性后該屬性對應(yīng)的view層會自動改變。
不懂得可以復(fù)制鏈接查看：
3. storage 的區(qū)別 sessionStorage localStorage
localStorage 的生命周期是永久性的。假若使用localStorage存儲數(shù)據(jù)，即使關(guān)閉瀏覽器，也不會讓數(shù)據(jù)消失，除非主動的去刪除數(shù)據(jù)，使用的方法如上所示。localStorage有l(wèi)ength屬性
sessionStorage 的生命周期是在瀏覽器關(guān)閉前。也就是說，在整個(gè)瀏覽器未關(guān)閉前，其數(shù)據(jù)一直都是存在的。sessionStorage也有l(wèi)ength屬性，其基本的判斷和使用方法和localStorage的使用是一致的
4.v-model雙向數(shù)據(jù)原理
有一個(gè)文本框 通過v-bind綁定了value屬性 值為myname 是我們在vue實(shí)例中定義的屬性
傳統(tǒng)我們獲取文本框值方法 可能通過getElementById找到文本框 然后獲取其value屬性
但是vue中直接通過v-bind綁定了value屬性 所以不需要像之前那樣獲取值
所以在后面的按鈕中獲取name值 直接獲取vue實(shí)例對象data里面的myname屬性即可
【數(shù)據(jù)為尊 ----數(shù)據(jù)映射到瀏覽器 如果數(shù)據(jù)v-model后修改（肯定input）然后到數(shù)據(jù)在有數(shù)據(jù)映射到瀏覽器頁面 ----映射關(guān)系統(tǒng)稱】
5.keepAlive用過嗎？什么作用？
緩存路由組件
使用的是vue的一個(gè)組件，參考vue的官方文檔
使用這個(gè)東西可以保證我們在切換組件的時(shí)候，原來顯示的組件不被銷毀
-----【保障組件的數(shù)據(jù)不會被切換路由而銷毀數(shù)據(jù)】
Home是對應(yīng)的組件對象的名字，不是路由的名字
6.多維數(shù)組拍平
數(shù)組拍平也稱數(shù)組扁平化，就是將數(shù)組里面的數(shù)組打開，最后合并為一個(gè)數(shù)組
一紅六種方法吧……
了解的請看：
7.跨域的原因 解決方案
跨域是指一個(gè)域下的文檔或腳本試圖去請求另一個(gè)域下的資源，這里跨域是廣義的。
這樣就可以說同源策略----協(xié)議---端口---域名
原生的src和href可以解決跨域
代理可以解決
請求頭也可以攜帶瀏覽器提示的也可以解決
一般都是后端解決跨域問題
【別的需要了解看下方鏈接】
8.uniApp兼容問題
§ 如果你使用cli創(chuàng)建項(xiàng)目（即項(xiàng)目根目錄是package.json），不管用什么ide，即便是用HBuilderX，切記cli項(xiàng)目的編譯器是在項(xiàng)目下的，HBuilderX不管怎么升級都不會影響編譯器版本。你需要手動npm update來升級編譯器。以及如果你想要安裝less、scss等預(yù)編譯器，也需要自己npm安裝在項(xiàng)目下，而不是在HBuilderX的插件管理里安裝。
§ 如果你使用離線打包，請注意HBuilderX升級后，真機(jī)運(yùn)行基座和云打包對應(yīng)引擎跟隨HBuilderX升級，而你的sdk需要手動升級。sdk的版本升級一般滯后HBuilderX正式版升級一兩天。
§ 如果你使用自定義基座，之前制作的自定義基座是不會跟隨HBuilderX升級的，升級HBuilderX后你應(yīng)該重新制作新版自定義基座。
§ 如果你使用wgt升級，新版HBuilderX編譯的wgt，運(yùn)行到之前的runtime上，一定要先測試好，看有沒有兼容性問題。如果有問題，就不要wgt升級，整包升級。
§ 考慮到向下兼容，uni-app編譯器在升級為新的自定義組件模式后，同時(shí)保留了對老編譯模式的向下兼容。
在HBuilderX alpha版中，App端一定會使用新編譯器，不理會manifest配置。
在HBuilderX 正式版中，新創(chuàng)建的項(xiàng)目會使用新編譯器，老項(xiàng)目不會強(qiáng)制使用，而是開發(fā)者自己在manifest里配置開啟。
§ 如果你使用其他ide開發(fā)uni-app，會經(jīng)常因?yàn)槠村e單詞而運(yùn)行失敗，因?yàn)榻?jīng)過webpack編譯一道，很多錯誤反應(yīng)的不夠直觀，排錯時(shí)間很長，不如從開始就依賴有良好提示的HBuilderX，避免敲錯單詞。
§ 云打包的引擎版本說明
HBuilderX Alpha，只有1套云打包機(jī)，不管你的HBuilderX alpha版本多少，對應(yīng)的打包機(jī)一定是最新的alpha版的客戶端引擎。
HBuilderX正式版，有2套打包機(jī)，一個(gè)是最新正式版，一個(gè)是次新正式版。
中間的緊急更新版本沒有獨(dú)立打包機(jī)。
舉個(gè)例子：
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個(gè)正式版。
那么當(dāng)前可用的打包機(jī)有1.9.1和1.8.2這2臺。（即每個(gè)大版本的最后一個(gè)版本）
除了這2個(gè)HBuilderX版本外，其他版本的云打包都指向最新的1.9.1版對應(yīng)的打包機(jī)。（即只保留2個(gè)大版本的云打包機(jī)）
【詳情請看】
一、HTML
HTML書寫規(guī)范
H5新增標(biāo)簽
HTML渲染過程
二、CSS
css盒子模型概念
css彈性布局概念
三、JavaScript
事件模型
DOM2級事件模型
閉包
原型鏈
四、移動Web開發(fā)
常見的布局方案
移動端前端常見的觸摸相關(guān)事件touch、tap、swipe等整理
移動端前端手勢事件
移動端頁面渲染優(yōu)化
GPU渲染
GPU核心渲染過程
五、調(diào)試
常用的調(diào)試工具
Chrome控制臺調(diào)試js使用
移動端測試
六、HTTP網(wǎng)絡(luò)知識
常見的HTTP狀態(tài)碼
不同請求類型的區(qū)別
WEB緩存方案
——————————
?？途W(wǎng)（）
- 專業(yè)IT筆試面試備考平臺
- 最全C++JAVA前端等互聯(lián)網(wǎng)技術(shù)求職題庫
- 全面提升IT編程能力
- 程序員交友圣地
分享了一些Web前端的面試題，限時(shí)一小時(shí)，你看看自己能夠答出多少道！
放心，這些面試題都是一些非?；A(chǔ)的知識，只要你在平時(shí)認(rèn)真聽課、學(xué)習(xí)了，那么這些面試題肯定不會難道你。
建議：雖然沒有人監(jiān)督你，但還是希望你不要去尋找答案，脫離百度，拿起紙筆，你試一下自己究竟能夠答出個(gè)什么水平！有沒有真本領(lǐng)？答案盡在這些面試題里！那么，你準(zhǔn)備好了嗎？OK！計(jì)時(shí)開始！
一、HTML常見題目
01、Doctype作用？嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義？
02、HTML5為什么只需要寫？
03、行內(nèi)元素有哪些？塊級元素有哪些？空(void)元素有那些？
04、頁面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？
05、介紹一下你對瀏覽器內(nèi)核的理解？
06、常見的瀏覽器內(nèi)核有哪些？
07、html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？
08、如何區(qū)分HTML和HTML5？
09、簡述一下你對HTML語義化的理解？
10、HTML5的離線儲存怎么使用，工作原理能不能解釋一下？
二、CSS類的題目
01、介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？
02、CSS選擇符有哪些？哪些屬性可以繼承？
03、CSS優(yōu)先級算法如何計(jì)算？
04、CSS3新增偽類有那些？
05、如何居中p？如何居中一個(gè)浮動元素？如何讓絕對定位的p居中？
06、display有哪些值？說明他們的作用。
07、position的值relative和absolute定位原點(diǎn)是？
08、CSS3有哪些新特性？
09、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景？
10、用純CSS創(chuàng)建一個(gè)三角形的原理是什么？
三、Java類的題目
01、介紹Java的基本數(shù)據(jù)類型。
02、說說寫Java的基本規(guī)范？
03、Java原型，原型鏈？有什么特點(diǎn)？
04、Java有幾種類型的值？(堆：原始數(shù)據(jù)類型和棧：引用數(shù)據(jù)類型)，你能畫一下他們的內(nèi)存圖嗎？
05、Java如何實(shí)現(xiàn)繼承？
06、Java創(chuàng)建對象的幾種方式？
07、Java作用鏈域？
08、談?wù)凾his對象的理解。
09、eval是做什么的？
10、什么是window對象？什么是document對象？
OK，一小時(shí)到了，這個(gè)時(shí)間可不算短了，那么這些面試題你答出了幾道呢？你寫的答案正確了嗎？現(xiàn)在你可以去翻看答案了。
如果你答出了絕大多數(shù)的或者是全部的題，并且答案也正確了，那么恭喜你……
你這時(shí)心里是不是有點(diǎn)小竊喜，認(rèn)為自己有能力拿高薪了？雖然我也很想這么告訴你，但事實(shí)上這只能表明你的基礎(chǔ)扎實(shí)，畢竟這只是一些非?；A(chǔ)的面試題。騷年~繼續(xù)努力吧！
如果你只答出了小部分或者答出了大部分題但答案不正確，那么我只想說：“騷年，你的水平還差的遠(yuǎn)呢?！边B這么基礎(chǔ)的題你都打不出來，還想拿高薪？回去再練一段時(shí)間吧！
扎實(shí)的基礎(chǔ)是你拿高薪的重要武器，如果你連基礎(chǔ)都不扎實(shí)，那么想要攻克“高薪”這個(gè)厚實(shí)的堡壘，那只是癡人說夢罷了。
1.前端框架類問題，問你會不會用vue react啊
2.語言類，問你一些JavaScript語言的問題
3.項(xiàng)目經(jīng)驗(yàn)，讓你講講做過的項(xiàng)目，遇到的問題和解決之道
1.什么是websocket？
websocket是HTML5的一種新協(xié)議，允許服務(wù)器想客戶端傳遞信息，實(shí)現(xiàn)瀏覽器和客戶端雙工通信。
2.websocket特點(diǎn)
（1）與http協(xié)議有良好的兼容性；
（2）建立在TCP協(xié)議之上，和http協(xié)議同屬于應(yīng)用層；
（3）數(shù)據(jù)格式比較輕量，性能開銷小，通信高效；
（4）可以發(fā)送文本，也可以發(fā)送二進(jìn)制；
（5）沒有同源限制，可以與任意服務(wù)器通信。
3.http和websocket的區(qū)別
http協(xié)議是短鏈接，因?yàn)檎埱笾?，都會關(guān)閉連接，下次請求需要重新打開鏈接。websocket協(xié)議是一種長連接，只需要通過一次請求來初始化連接，然后所有請求和響應(yīng)都是通過TCP鏈接進(jìn)行通信。
4.websocket和socket的區(qū)別
socket是應(yīng)用層與TCP/IP協(xié)議通信的中間軟件抽象層，它是一組接口。而websocket協(xié)議是一個(gè)完整的應(yīng)用層協(xié)議，柏寒一套完整的API。
5.websocket中常用注解有哪些
@ServerEndpoint 類似與servlet中的 RequestMapping
@OnOpen類似與servlet中的 init（）初始化
@OnClose類似與servlet中的destroy() 銷毀
@OnMessage類似于servlet中的service請求 （意思就是發(fā)送數(shù)據(jù)的方式 @doPost() / @doGet() 組合）
vue的路由模式一共有兩種，分別是哈希和history，他們的區(qū)別是hash模式不會包含在http請求當(dāng)中，并且hash不會重新加載頁面，而使用history模式的話，如果前端的url和后端發(fā)起請求的url不一致的話，會報(bào)404錯誤，所以history的原理是利用html5新增的兩個(gè)特性方法，分別是psuhState和replaceState來完成的，以上就是對vue路由的理解。
路由的導(dǎo)航守衛(wèi) 又叫做路由的鉤子函數(shù)（生命周期函數(shù)）
就是在跳轉(zhuǎn)頁面的時(shí)候把路由欄下來，做一些操作在放行，vue一共提供了三種路由守衛(wèi)。
第一種是全局守衛(wèi)
beforeEach路由進(jìn)入之前
afterEach路由進(jìn)入之后
第二種 組件內(nèi)守衛(wèi)
beforeRouteEnter 路由進(jìn)入之前
beforeRouteUpdate 路由更新之前
beforeRouteLeave 路由離開之前
第三種 路由獨(dú)享守衛(wèi)
beforeEnter 路由進(jìn)入之前
分別是 to from next
next 這個(gè)參數(shù) 在路由3.x版本的時(shí)候，是必須的
但是到了路由4.x版本的時(shí)候next參數(shù)變成可選的了
一般來說vue2搭配 3.x的路由
vue3搭配 4.x 的路由
比如說購物車頁面只有登陸的才能訪問，我們可以用組件級守衛(wèi)購物車頁面，如果已經(jīng)登陸存有token 的話，就繼續(xù)訪問這個(gè)頁面，如果沒有登陸的話就會跳轉(zhuǎn)到登陸頁面。
在項(xiàng)?中我們經(jīng)常使?路由守衛(wèi)實(shí)現(xiàn)??的鑒權(quán). ?如:當(dāng)?戶登錄之后,我們會把后臺返回的token以及?戶信息保存到vuex
和本地,當(dāng)??進(jìn)?跳轉(zhuǎn)的時(shí)候,我們會在路由守衛(wèi)??獲取vuex??的token,如果token存在的話,我們則使?next讓他進(jìn)?要
跳轉(zhuǎn)的??,如果token不存在的話我們使?next?法讓他回到登錄?
以上就是我對vue路由守衛(wèi)的理解。
?先v-if和v-show都是控制元素的顯示與隱藏, 不過v-if控制元素的顯
示和隱藏的時(shí)候會刪除對?的dom元素,當(dāng)每?個(gè)顯示的時(shí)候,都會重新創(chuàng)建dom和渲染. ?v-show則是通過css的display:none
和display:block來控制元素的顯示與隱藏. v-if?較耗費(fèi)性能,所以我們涉及到頻繁的顯示隱藏操作我們建議使?v-show,如果不
是頻繁操作的話,我們可以v-if
在項(xiàng)?中我會經(jīng)常使?v-if和v-show,?如我們在搜索功能的時(shí)候,他有?個(gè)歷史記錄,這個(gè)時(shí)候我們根據(jù)是否有搜索的結(jié)果來判
斷歷史記錄的顯示與隱藏,這塊我就可以使?v-if ,當(dāng)然?v-show也可以. 以上就是我對v-if和v-show的理解。
v-for的優(yōu)先級?. 因?yàn)関-for的時(shí)候我們才開始渲染dom元素,這個(gè)v-if還?法進(jìn)?判斷.
v-for和v-if不能同時(shí)使?,我們可以通過標(biāo)簽,?如div或者template標(biāo)簽來進(jìn)?包裹,把v-if寫到包裹的標(biāo)簽上?(寫到v-for外?)。
?先呢,methods是?來定義?法的區(qū)域,methods定義的?法需要調(diào)?才能觸發(fā). 不具備緩存?
?computed是計(jì)算屬性,他依賴于屬性值的變化,當(dāng)屬性發(fā)?改變的時(shí)候,計(jì)算屬性??定義的?法就會觸發(fā),computed具有緩
存性,依賴屬性值的變化?變化.
?watch主要是?于監(jiān)聽,不具備被緩存性.依賴于數(shù)據(jù)變化?觸發(fā).
在項(xiàng)?中,?如我們獲取state的狀態(tài)的時(shí)候我們會把它放到computed??,或者在寫購物?數(shù)量計(jì)算的時(shí)候也會使?計(jì)算屬性.
?watch也在項(xiàng)?經(jīng)常使?,?如我們封裝編輯 和 新增彈窗組件的時(shí)候會通過watch來進(jìn)?id判斷我們要顯否要清空表單的數(shù)
據(jù).
以上就是我對computed和watch的理解。
只是規(guī)定，W3C這種組織固定的
!DOCTYPE HTML
html
這樣格式，每個(gè)html版本 都會有不同的聲明
重慶分公司
重慶分公司
