1.HTML5有哪些新特性家淤？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題乎莉？如何區(qū)分HTML和HTML5？
1）用于繪畫 canvas 元素死宣。(canvas 元素用于在網(wǎng)頁(yè)上繪制圖形伟恶，畫布是一個(gè)矩形區(qū)域，您可以控制其每一像素毅该。canvas 擁有多種繪制路徑博秫、矩形、圓形眶掌、字符以及添加圖像的方法挡育。)
2） 用于媒介回放的 video 和 audio 元素。
4）語(yǔ)意化更好的內(nèi)容元素朴爬，比如 article即寒、footer、header寝殴、nav蒿叠、section3）
5）表單控件<calendar> <date> <time> <email> <url> <search>
html5 也新增以下表單元素：
<datalist>：元素規(guī)定輸入域的選項(xiàng)列表，使用 <input> 元素的 list 屬性與 <datalist> 元素的 id 綁定蚣常。
<keygen>：提供一種驗(yàn)證用戶的可靠方法市咽，標(biāo)簽規(guī)定用于表單的密鑰對(duì)生成器字段。
<output>：用于不同類型的輸出抵蚊，比如計(jì)算或腳本輸出施绎。
HTML5 新增的表單屬性：
placehoder 屬性：簡(jiǎn)短的提示在用戶輸入值前會(huì)顯示在輸入域上溯革。即我們常見的輸入框默認(rèn)提示，在用戶輸入后消失谷醉。
required 屬性：是一個(gè) boolean 屬性致稀。要求填寫的輸入域不能為空
pattern 屬性：描述了一個(gè)正則表達(dá)式用于驗(yàn)證<input> 元素的值。
min 和 max 屬性：設(shè)置元素最小值與最大值俱尼。
step 屬性：為輸入域規(guī)定合法的數(shù)字間隔抖单。
height 和 width 屬性：用于 image 類型的 <input> 標(biāo)簽的圖像高度和寬度。
autofocus 屬性：是一個(gè) boolean 屬性遇八。規(guī)定在頁(yè)面加載時(shí)矛绘，域自動(dòng)地獲得焦點(diǎn)。
multiple 屬性：是一個(gè) boolean 屬性刃永。規(guī)定<input> 元素中可選擇多個(gè)值货矮。
6）本地離線存儲(chǔ) （HTML5的離線儲(chǔ)存）
localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失斯够；能維持在多個(gè)會(huì)話范圍內(nèi)
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除囚玫。客戶端數(shù)據(jù)存儲(chǔ)读规，只能維持在當(dāng)前會(huì)話范圍內(nèi)抓督。
- HTML5 Geolocation（地理定位）用于定位用戶的位置。
- html5拖放
兼容：
當(dāng)在頁(yè)面中使用HTML5新標(biāo)簽時(shí)掖桦，可能會(huì)得到三種不同的結(jié)果：
1)結(jié)果1：新標(biāo)簽被當(dāng)作錯(cuò)誤處理并被忽略本昏，在DOM構(gòu)建時(shí)會(huì)當(dāng)作這個(gè)標(biāo)簽不存在。
2)結(jié)果2：新標(biāo)簽被當(dāng)作錯(cuò)誤處理枪汪，并在DOM構(gòu)建時(shí)涌穆，這個(gè)新標(biāo)簽會(huì)被構(gòu)造成行內(nèi)元素。
3)結(jié)果3：新標(biāo)簽被識(shí)別為HTML5標(biāo)簽雀久，然后用DOM節(jié)點(diǎn)對(duì)其進(jìn)行替換宿稀。
不能識(shí)別HTML5新標(biāo)簽而不能使用，解決辦法有兩種：
1)方法1：實(shí)現(xiàn)標(biāo)簽被識(shí)別
通過(guò)document.createElement（tagName）方法即可讓瀏覽器識(shí)別新標(biāo)簽赖捌，瀏覽器支持新標(biāo)簽后祝沸，還可以為新標(biāo)簽添加CSS樣式。
2)方法2：JavaScript解決方案
a)使用html5shim：
在<head>中調(diào)用以下代碼：
當(dāng)然也可以直接把這個(gè)文件下載到自己的網(wǎng)站上越庇，但這個(gè)文件必須在head標(biāo)簽中調(diào)用罩锐。
b)使用kill IE6
在</body>之前調(diào)用以下代碼：
區(qū)分HTML和HTML5：
1)DOCTYPE聲明
2)新增的元素
2.css3中的transform有哪些屬性？分別用來(lái)實(shí)現(xiàn)什么效果卤唉？
transform的屬性：
單位：deg
1)translate位移,基于 X 和 Y 坐標(biāo)重新定位元素涩惑，當(dāng)使用一個(gè)參數(shù)時(shí)表示 X 軸和 Y 軸的參數(shù)相 同，效果類似 position:relative 桑驱。
2)scale 縮放：可以讓任一元素變大竭恬、變小跛蛋。它使用一個(gè)或者兩個(gè)正數(shù)和負(fù)數(shù)以及小數(shù)作為參數(shù)，當(dāng)使用一個(gè)參數(shù)時(shí)表示 X 軸和 Y 軸的縮放相同痊硕。
3)rotate 旋轉(zhuǎn)：通過(guò)傳遞一個(gè)度數(shù)值來(lái)轉(zhuǎn)動(dòng)一個(gè)對(duì)象赊级。
4)skew 傾斜：參數(shù)是度數(shù)，當(dāng)使用一個(gè)參數(shù)時(shí)表示 X 軸和 Y 軸的參數(shù)相同岔绸。
5)matrix 矩陣變換：基于 X 和 Y 坐標(biāo)重新定位元素理逊，它使用 6 個(gè)參數(shù)
rotate(<angle>) ：通過(guò)指定的角度參數(shù)對(duì)原元素指定一個(gè) 2D rotation （2D 旋轉(zhuǎn)），需先有transform-origin屬性的定義亭螟。transform-origin定義的是旋轉(zhuǎn)的基點(diǎn)挡鞍，其中angle是指旋轉(zhuǎn)角度，如果設(shè) 置的值為正數(shù)表示順時(shí)針旋轉(zhuǎn)预烙，如果設(shè)置的值為負(fù)數(shù)，則表示逆時(shí)針旋轉(zhuǎn)道媚。如：transform:rotate(30deg):
3.localStorage扁掸、sessionStorage、cookie有什么區(qū)別最域？
共同點(diǎn)：都是保存在瀏覽器端谴分，且同源的。
區(qū)別：
1.cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要）镀脂，即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞牺蹄；cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下薄翅。存儲(chǔ)大小限制也不同沙兰，cookie數(shù)據(jù)不能超過(guò)4k，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie翘魄，所以cookie只適合保存很小的數(shù)據(jù)鼎天，如會(huì)話標(biāo)識(shí)。
2.而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器暑竟，僅在本地保存斋射。sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多但荤，可以達(dá)到5M或更大罗岖。
3.數(shù)據(jù)有效期不同，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效腹躁，自然也就不可能持久保持桑包；localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存潜慎，因此用作持久數(shù)據(jù)捡多；cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效蓖康，即使窗口或?yàn)g覽器關(guān)閉。
4.作用域不同垒手，sessionStorage不在不同的瀏覽器窗口中共享蒜焊，即使是同一個(gè)頁(yè)面；localStorage 在所有同源窗口中都是共享的科贬；cookie也是在所有同源窗口中都是共享的泳梆。Web Storage 支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者榜掌。Web Storage 的 api 接口使用更方便优妙。
1、什么是同源策略憎账？你都知道哪些解決跨域的方法套硼？
同源策略是一種約定，他是瀏覽器最核心也是最基本的功能胞皱，如果缺少同源策略邪意，則瀏覽器的正常的功能可能會(huì)受到影響，可能說(shuō)web是構(gòu)建在同源策略基礎(chǔ)之上反砌，
瀏覽器針對(duì)同源策略的一種實(shí)現(xiàn)雾鬼。
所謂同源就是:域名、協(xié)議宴树、端口相同策菜。
同源策略分為兩種：
1）Dom同源策略：禁止對(duì)不同的源頁(yè)面Dom進(jìn)行操作，這里主要是iframe跨域 的情況酒贬，不同域名的iframe是限制互相訪問(wèn)的又憨。
2）xmlhttpRequest同源策略：禁止使用XHR對(duì)象向不同源的服務(wù)器地址發(fā)起 HTTP請(qǐng)求。
解決跨域的方法：
1）proxy代理跨域
2）通過(guò)cors后臺(tái)設(shè)置允許跨域的請(qǐng)求臺(tái) Access-Control-Origin:"*"
3）Jsonp跨域：
因?yàn)閟cript標(biāo)簽不受瀏覽器同源策略的影響同衣，允許跨域引用資源竟块，所以
可以動(dòng)態(tài)的創(chuàng)建script標(biāo)簽，然后利用src屬性進(jìn)行跨域耐齐。
優(yōu)點(diǎn)：使用簡(jiǎn)便無(wú)兼容性問(wèn)題（目前最流行的跨域方法）
缺點(diǎn)：兄接受GET請(qǐng)求
如果其他域不安全的話浪秘，很可能會(huì)在響應(yīng)中夾帶一些惡意的代碼
確定JSONP請(qǐng)求是否失敗并不容容易，HTML給Script標(biāo)簽新增一個(gè) onerror事件處理程序埠况，但是存在兼容問(wèn)題耸携。
2、列舉JavaScript的基本數(shù)據(jù)類型和引用數(shù)據(jù)類型
基本數(shù)據(jù)類型：number null underfined boolean string
引用數(shù)據(jù)來(lái)類型：object function array
js基本數(shù)據(jù)類型的變量存放的是基本數(shù)據(jù)類型.數(shù)據(jù)的實(shí)際值
而引用數(shù)據(jù)類型的變量保存在對(duì)它的引用辕翰，即指針
3夺衍、Vue2.0的生命周期有哪些？分別解釋其意思
創(chuàng)建喜命、掛載沟沙、更新河劝、銷毀
beforeCreate：實(shí)例組件new Vue()創(chuàng)建出來(lái)之后會(huì)初始化事件和生命周期，然后就會(huì)執(zhí)行beforecreate此時(shí)數(shù)據(jù)還沒(méi)有掛載矛紫，無(wú)法訪問(wèn)到數(shù)據(jù)的真是Dom赎瞎。
created：掛載數(shù)據(jù)綁定事件，然后執(zhí)行created函數(shù)颊咬，這是可以使用數(shù)據(jù)务甥，
也可以更改數(shù)據(jù)，此時(shí)更改數(shù)據(jù)不會(huì)觸發(fā)updated函數(shù)喳篇，不會(huì)觸發(fā)其他鉤子函數(shù)敞临，一般可以在處理初始數(shù)據(jù)的獲取。
beforeMount：實(shí)例或組件對(duì)應(yīng)的模板麸澜，編譯為虛擬dom放在render函數(shù)中準(zhǔn)備渲染執(zhí)行挺尿，此時(shí)虛擬dom已創(chuàng)建完成，馬上要渲染炊邦，在這里可以更改數(shù)據(jù)票髓，不會(huì)觸發(fā)update，一般做初始數(shù)據(jù)的獲取铣耘。
mounted：開始render渲染真實(shí)dom執(zhí)行Mounted函數(shù)，此時(shí)組件已出現(xiàn)在頁(yè)面中以故，數(shù)據(jù)蜗细、真是dom已處理好、事件已掛載好可以在這里獲取真實(shí)dom怒详。
beforeUpdate：組件或?qū)嵗臄?shù)據(jù)更改后炉媒，立即執(zhí)行beforeupdate，然后vue的虛擬dom機(jī)制會(huì)重新構(gòu)建dom與上一次的虛擬dom樹進(jìn)行diff算法進(jìn)行對(duì)比后重新渲染
update：數(shù)據(jù)已更新完成昆烁，dom也重新render完成可操作更新后的的虛擬dom吊骤。
beforeDestory：調(diào)用￥destory方法后執(zhí)行beforeDestory，一般在這里做善后工作静尼，如：清除定時(shí)器白粉、清除非指定綁定的事件...
destory：組件的數(shù)據(jù)綁定監(jiān)口后...去掉后只剩dom空殼，這時(shí)執(zhí)行destory鼠渺。
4鸭巴、詳述組件通信
5、詳述導(dǎo)航守衛(wèi)
vue-router提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航
全局守衛(wèi)：
beforeEach=>全局前置守衛(wèi) router.beforeEach((to,from,next)={})注冊(cè)
當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)拦盹，全局前置守衛(wèi)已按照創(chuàng)建順序調(diào)用鹃祖，守衛(wèi)是異步解析執(zhí)行，此時(shí)導(dǎo)航在所有的守衛(wèi)resolve完之前一直處于等待中
to：route即將要進(jìn)入的目標(biāo)路由對(duì)象
from：route當(dāng)前導(dǎo)航正要離開的路由
next：進(jìn)入管道中的下一個(gè)鉤子,next(false)中斷當(dāng)前的導(dǎo)航
afterEach:全局后置鉤子 不會(huì)接受next函數(shù)普舆，也不會(huì)改變導(dǎo)航本身
路由獨(dú)享守衛(wèi)：beforeEnter
組件內(nèi)的守衛(wèi)：beforeRouteEnter 在渲染該組件的對(duì)應(yīng)路由被confirm之前調(diào)用恬口，不可以獲取組件實(shí)例this校读，因?yàn)槭匦l(wèi)之前執(zhí)行前組件實(shí)例剛還沒(méi)有創(chuàng)建。
beforeRouteUpdate 在當(dāng)前路由改變祖能，但是該組件被復(fù)用時(shí)調(diào)用歉秫，可訪問(wèn)組件實(shí)例this。
beforeRouteLeave 導(dǎo)航離開組件的對(duì)應(yīng)路由時(shí)調(diào)用芯杀，可訪問(wèn)組件實(shí)例this
6端考、v-show和v-if有什么區(qū)別？及使用場(chǎng)景
共同點(diǎn) ：都是動(dòng)態(tài)顯示DOM元素
不同點(diǎn)：
v-if:
v-if 是動(dòng)態(tài)的向DOM樹內(nèi)添加或刪除DOM元素揭厚；
v-if切換一個(gè)局部編譯/卸載的過(guò)程却特，切換時(shí)合適銷毀和重建內(nèi)部事件監(jiān)聽和子組件；
v-if是惰性的筛圆，初始條件=假裂明，什么也不做。只有在條件第一次變=真太援，才開始局部編譯闽晦；
v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存提岔，而且DOM元素保留仙蛉；
v-if有更高的切換消耗；
使用場(chǎng)景：v-if適合運(yùn)營(yíng)條件不大可能改變碱蒙；
v-show:
v-show有更高的初始渲染消耗荠瘪；
v-show只是簡(jiǎn)單的基于css切換；
v-show是通過(guò)設(shè)置DOM元素的display屬性控制顯隱赛惩；
使用場(chǎng)景：v-show適合頻繁切換哀墓。
7、v-for和v-if的優(yōu)先級(jí)
v-for比v-if具有有更高的優(yōu)先級(jí)
當(dāng)vue處理指令時(shí)喷兼，v-for比v-if具有更高的優(yōu)先級(jí)
每次都要表里這個(gè)數(shù)組會(huì)影響速度篮绰，尤其是當(dāng)渲染一小部分
我們可以將便利的數(shù)組替換為計(jì)算屬性，讓其放回過(guò)濾后的列表季惯。
第三天
1吠各、Vue常用的指令
v-text 主要用來(lái)更新textContent，可以等同于JS的text屬性星瘾。
<span v-text="msg"></span>
等價(jià)于
<span>{{msg}}</span>
v-html 雙大括號(hào)的方式會(huì)將數(shù)據(jù)解釋為純文本走孽，而非HTML。為了輸出真正的HTML琳状，可以用v-html指令磕瓷。它等同于JS的innerHtml屬性。
這個(gè)div的內(nèi)容將會(huì)替換成屬性值rawHtml，直接作為HTML進(jìn)行渲染困食。
v-text边翁、{{}}、v-html的區(qū)別：
1硕盹、插值表達(dá)式存在閃爍的問(wèn)題符匾；
2、v-text和v-html是全部替換瘩例，{{}}是可以進(jìn)行部分替換啊胶；
3、v-html可以解析HTML標(biāo)簽垛贤，v-text和{{}}不可以焰坪；
v-if 可以實(shí)現(xiàn)條件渲染，Vue會(huì)根據(jù)表達(dá)式的值的真假條件來(lái)渲染元素聘惦。
v-else 是搭配v-if使用的某饰，它必須緊跟在v-if或者v-else-if后面，否則不起作用善绎。
v-else-if充當(dāng)v-if的else-if塊黔漂，可以鏈?zhǔn)降氖褂枚啻巍禀酱？梢愿臃奖愕膶?shí)現(xiàn)switch語(yǔ)句炬守。
v-show 也是用于根據(jù)條件展示元素。和v-if不同的是剂跟，如果v-if的值是false劳较，則這個(gè)元素被銷毀，不在dom中浩聋。但是v-show的元素會(huì)始終被渲染并保存在dom中，它只是簡(jiǎn)單的切換css的dispaly屬性臊恋。
v-show衣洁、v-if的區(qū)別：
v-if有更高的切換開銷
v-show有更高的初始渲染開銷。
因此抖仅，如果要非常頻繁的切換坊夫，則使用v-show較好；如果在運(yùn)行時(shí)條件不太可能改變撤卢，則v-if較好
v-for 用v-for指令根據(jù)遍歷數(shù)組來(lái)進(jìn)行渲染
當(dāng)v-for和v-if同處于一個(gè)節(jié)點(diǎn)時(shí)环凿，v-for的優(yōu)先級(jí)比v-if更高。這意味著v-if將運(yùn)行在每個(gè)v-for循環(huán)中
v-bind 用來(lái)動(dòng)態(tài)的綁定一個(gè)或者多個(gè)屬性放吩。沒(méi)有參數(shù)時(shí)智听，可以綁定到一個(gè)包含鍵值對(duì)的對(duì)象。常用于動(dòng)態(tài)綁定class和style。以及href等到推。
簡(jiǎn)寫為一個(gè)冒號(hào)【 ：】
v-model 這個(gè)指令用于在表單上創(chuàng)建雙向數(shù)據(jù)綁定考赛。
v-model會(huì)忽略所有表單元素的value、checked莉测、selected特性的初始值颜骤。因?yàn)樗x擇Vue實(shí)例數(shù)據(jù)做為具體的值。
v-on 主要用來(lái)監(jiān)聽dom事件捣卤，以便執(zhí)行一些代碼塊忍抽。表達(dá)式可以是一個(gè)方法名。
簡(jiǎn)寫為：【 @ 】
2董朝、Vue常用修飾符
stop 阻止事件繼續(xù)傳播
prevent 事件不再重載頁(yè)面
capture 使用事件捕獲模式,即元素自身觸發(fā)的事件先在此處處理鸠项，然后才交由內(nèi)部元素進(jìn)行處理
self 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù)
once 事件將只會(huì)觸發(fā)一次
passive 告訴瀏覽器你不想阻止事件的默認(rèn)行為
使用修飾符時(shí)，順序很重要益涧；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生锈锤。因此，用v-on:click.prevent.self會(huì)阻止所有的點(diǎn)擊闲询，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊久免。
3、v-on可以監(jiān)聽多個(gè)方法嗎扭弧？
可以
<button v-on='{click:show,mouseleave:hide}'>點(diǎn)擊</button>
4阎姥、Vue中key值的作用
用于管理可復(fù)用的元素。因?yàn)閂ue 會(huì)盡可能高效地渲染元素鸽捻，通常會(huì)復(fù)用已有元素而不是從頭開始渲染呼巴。這么做使 Vue 編譯變得非常快
Vue會(huì)盡可能的復(fù)用當(dāng)前頁(yè)面上所有的元素御蒲，如果元素沒(méi)有獨(dú)立的key值的話衣赶，如果我們只修改了元素的屬性，那Vue會(huì)重復(fù)使用頁(yè)面上的元素厚满，只是給它修改一個(gè)屬性
在diff算法中府瞄，Vue使用 key 值來(lái)判斷元素是否發(fā)生更改，以達(dá)到重復(fù)使用頁(yè)面上所有可復(fù)用元素碘箍，特別是在列表渲染中遵馆，Vue通過(guò)key值來(lái)判斷元素是否需要更新，如果元素只是更換位置的話丰榴，就不需要重新渲染货邓，這也是為什么我們?cè)诹斜礓秩镜臅r(shí)候?yàn)槭裁词冀K不建議使用元素的索引值來(lái)作為 key 值，因?yàn)樗饕凳冀K會(huì)發(fā)生改變四濒，會(huì)增加Vue的渲染成本
5换况、Vue組件中的data為什么必須是函數(shù)
兩個(gè)實(shí)例引用同一個(gè)對(duì)象职辨，其中一個(gè)改變的時(shí)候，另一個(gè)也發(fā)生改變复隆。
每個(gè)vue組件都是一個(gè)vue實(shí)例拨匆，通過(guò)new Vue()實(shí)例化，引用同一個(gè)對(duì)象挽拂，如果data直接時(shí)一個(gè)組
件的數(shù)據(jù)惭每，其他組件相同數(shù)據(jù)就會(huì)改變。
而data是函數(shù)的話亏栈，每個(gè)vue組件的data都因?yàn)楹瘮?shù)有了自己的作用域台腥，互不干擾。
vue的全局組件會(huì)被引用渲染绒北，js中引用對(duì)象的而復(fù)制不是真是的"復(fù)制"黎侈，而是在棧中復(fù)制了指針。
當(dāng)組件被多出引用時(shí)闷游，如果引用類型數(shù)據(jù)(這里指的是data)只被復(fù)制了指針峻汉，會(huì)導(dǎo)致多處組件只用 了同一個(gè)"數(shù)據(jù)源"，會(huì)導(dǎo)致一處數(shù)據(jù)改變脐往，是所有的組件數(shù)據(jù)都改變休吠，所以用函數(shù)返回一個(gè)新的數(shù) 據(jù)，避免數(shù)組在多出引用的情況發(fā)生业簿。
