技術標籤：vue

自我介紹:
我是來面試公司web前段開發的
你好，我叫xxx，來自xxxx
在此期間就職過兩家公司，中科yi倚天和光合公司 都有過1年多的工作經驗，
在我河南鄭州的光和公司我們做專案主要用到的技術棧 就是
html,css，javaScript原生，
,jQuery，bootstrap第三方ui框架來開發專案

在中科倚天公司 做專案主要用到 技術 Vue全家桶Vue-Cli、Vue、Vue-Router、Axios、Vuex，Vant-UI ， Element-UI，Webpack 等。
做過，電商專案，移動端的專案 ，PC端等行業的專案。
負責過 匠心小鎮app專案

一家民宿專案 覓食蜂app、專案，微信小程式入藝，，好物匠後臺管理系統，
使用Git進行專案版本控制協助開發
以上是我的自我介紹 謝謝 你還有什麼要問的嗎？

匠心小鎮 移動端

這個匠心小鎮是一款家庭的生活用品
專案裡面功能的實現？

搜尋功能的實現

在搜尋這塊我是調了一個後臺搜尋的介面，通過v-model雙向資料繫結
把頁面中使用者在input框中輸入的值作為引數傳遞給介面，
可以實現字母搜尋或著拼音搜尋
然後介面會返回我通過關鍵字（或者拼音字母）作為引數而指定的一些資料返回給使用者，
最後把這些資料進行排版渲染到頁面上即可

二級分類切換

二級分類切換我就是使用第三方的vant-ui 的Sidebar側邊欄實現切換

，通過資料介面將對應的title渲染出來，綁定了點選事件通過id傳參，每次點選的時候對應id下的內容顯示

收藏的功能

首先要得到當前收藏資料id 請求收藏的介面 返回資料 讓收藏圖示變成已收藏
取消收藏，就在取消收藏的介面上拼接上當前收藏的資料 請求取消收藏的介面 返回資料 讓收藏圖示變成取消收藏
然後在我的頁面 收藏裡面渲染收藏的資料
收藏 直接請求收藏介面 返回資料，渲染頁面
取消收藏 傳當前資料的id 請求取消收藏的介面，判斷data裡面的data如果是1 就取消收藏

瀑布流佈局的原理實現

瀑布流又稱瀑布流式佈局，視覺表現為參差不齊的多欄佈局
後面的元素依次新增到其後，等寬不等
高，根據圖片原比例縮放直至寬度達到我們的要求，依次按照規則放入指定位置。

當第一排排滿足夠多的等寬圖片時之後
放置的圖片會往下面排放。

到底載入 在外面加一個大盒子 不設定高 提示裡面的元素撐起了的

實現 ：我用的是css3的特性以及彈性盒子佈局 實現的

購物車功能 的 加減 全選 總價 刪除

這裡功能都是調取後端介面來實現的
全選的實現：先雙向資料繫結flag
通過 change點選事件
在return裡面定義一個flag 為false 在定義一個空陣列
通過all 這個方法 把arr的方法新增到str裡面他為true方法他就全選了 取消呢就是把str這個陣列為空
//全選
all(){
// alert(this.flag)
if(this.flag){
for(var i in this.arr){
this.aa.push(this.arr[i].id)
}
}else{
this.aa=[]
}
}
},

總價的實現：

後臺會返回資料，用到了計算屬性，具體定義一個變數為零，迴圈遍歷被選中的陣列，變數加等於商品數量乘以商品單價，最後返回變數就是總價
computed:{
// 總價
// count(){
// var sum =0 ;
// for(var i in this.arr){
// sum+=this.arr[i].number*this.arr[i].price
// }
// return sum
// }

刪除的實現

首先後臺會返回介面，然後呼叫後臺返回的介面，通過delete屬性進行刪除；如果後臺沒有返回資料介面的話，就通過Splice實現的刪除。
del(key){
this.arr.splice(key,1)
},

加減 的實現

首先在vuex裡面定義一個狀態count,
然後在非同步操作裡面呼叫加減的介面，在同步操作裡面讓count++,和count–,在執行count–的時候會判斷count不能為0，或者為0的時候進行刪除

add(key){
this.arr[key].number ++
},
jan(key){
if(this.arr[key].number>1){
this.arr[key].number –

        }else{
         alert("請不能少於1哦！")
        }
       
    },

封裝 的實現 思路

我封裝過彈出框 星星評分 taost輕提示
封裝
點選botton 按鈕 確定和取消 他彈出的內容那塊的框 在封裝的元件 寫好多種樣式 在子元件中用$emit()暴露（派發）事件，父元件中用繫結的事件去監聽 然後掛載上傳遞的資料 在子元件 props 來接受這個資料

Get和post的區別 ？

get引數通過url傳遞，post放在 body中。

get請求在url中傳遞的引數是有長度限制的，而post沒有。

get比post更不安全，因為引數直接暴露在url中，所以不能用來傳遞敏感資訊。

get請求只能進行url編碼，而post支援多種編碼方式

get請求引數會被完整保留在瀏覽歷史記錄裡，而post中的引數不會被保留。

GET和POST本質上就是TCP連結，並無差別。但是由於HTTP的規定和瀏覽器/伺服器的限制，導致他們在應用過程中體現出一些不同。

GET產生一個TCP資料包；POST產生兩個TCP資料包。

對於GET方式的請求，瀏覽器會把http header和data一併傳送出去，伺服器響應200（返回資料）；

而對於POST，瀏覽器先發送header，伺服器響應100 continue，瀏覽器再發送data，伺服器響應200 ok（返回資料）。

state 的儲存和localstorage 儲存的區別？

1.最重要的區別：vuex儲存在記憶體，localstorage則以檔案的方式儲存在本地
2.應用場景：vuex用於元件之間的傳值，localstorage則主要用於不同頁面之間的傳值。
3.永久性：當重新整理頁面時vuex儲存的值會丟失，localstorage不會。

、使用vant來實現上拉重新整理，下拉載入功能模組；

思路：這個地方我是使用了vant-ui裡面的PullRefresh- 下拉重新整理和Loading 載入，把接口裡面的資料使用拓展運算子進行拼接，拼接的時候使用Loading 載入

Animate。Css的使用

animate裡面包含了許多常用的css動畫，我們要使用的它的話需要把它加到自己的頁面中，接著就可以在需要動畫的元素標籤上直接呼叫裡面的動畫，然後調節動畫次數延遲等達到自己需要的效果就可以了。
完成路由攔截，app的登入，註冊以及驗證碼功能；
思路：路由攔截我們使用的是全域性的路由攔截，如果點選到了需要登入之後才能進入的頁面之後，如果資料裡面沒有儲存到token，那麼就會重定向到登入頁面，以及登入獲取token

公司專案開發流程

1第一呢我們是公司呢是開一個需求討論會
然後大家對這個專案的這個功能 進行一個分析和
和確定一下專案的一個週期 大家認領一下任 務
2 產品經理 用一些藍湖 的之類的軟體進行原型圖的設計
3 就是公司我們的 UI 設計師 把效果圖設計出來
4 ul效果圖設計好給我 和後臺資料
給我 我拿到效果圖 就要高度還原頁面
把特效和業務邏輯給實現
5 後端 封裝介面
6專案 就是提測模組然後如果有bug就要打回
給我然後進行修改 最後測試沒有問題
7 部署
8 釋出上線
前端簡稱 ：FE
後端 ：BE
QA ：測試

進公司主要問的 相容 優化 封裝 你開發遇到的 問題怎麼解決的

1vue瀏覽器相容問題？

• 瀏覽器預設的margin和padding不同。解決方案是加一個全域性的*{margin:0;padding:0;}來統一。
  2優化 ？

1. 載入方面

1、路由懶載入

載入的資源過多，頁面會出現白屏的情況，不利於使用者體驗。被訪問的時候才載入對應的元件，這樣就更加高效了。
路由懶載入：

. 快取方面
利用keep-alive結合導航守衛實現頁面快取
效能考慮避免多次重複渲染降低效能。keep-alive元件。
專案實踐
1.更改App.vue

3 防抖和節流 防抖 在固定的時間內沒有觸發事件，會在固定時間結束後觸發，如果固定時間內觸發事件了，會在延長固定時間再觸發 節流： 無論在固定時間內是否有事件觸發，都會按照固定時間規律觸發

圖片懶載入–使用vue-lazyload外掛

外掛下載：https://github.com/hilongjw/vue-lazyload
1
使用步驟：其實這個外掛做簡單使用的話是很簡單的，按下邊的例項即可。

（1） 安裝外掛：

npm install vue-lazyload --save-dev
（2） main.js引入外掛(需要將error.png、loading.png放到static/img目錄下)

import VueLazyLoad from ‘vue-lazyload’
Vue.use(VueLazyLoad,{
error:’./static/img/error.png’, // 圖片載入失敗時顯示的圖片
loading:’./static/img/loading.png’ // 圖片載入中顯示的圖片
})

（3） vue檔案中將需要懶載入的圖片繫結v-bind:src 修改為v-lazy

1 # 第三方外掛的按需引入 我們在專案中經常會需要引入第三方外掛，如果我們直接引入整個外掛，會導致專案的體積太大，我們可以藉助 babel-plugin-component ，然後可以只引入需要的元件，以達到減小專案體積的目的。以下為專案中引入 element-ui 元件庫為例：

（1）首先，安裝 babel-plugin-component ：

npm install babel-plugin-component -D
1
（2）然後，將 .babelrc 修改為：

{
“presets”: [[“es2015”, { “modules”: false }]],
總結
優化是可以解決部分效能問題，實際開發細節很多，總之按著規範寫程式碼，團隊的編碼風格儘量統一，處理細節上多加思考，大部分效能問題都能迎刃而解。
3封裝說幾條？
4你開發遇到的 問題怎麼解決的？
Hr經常問的問題？

什麼是前端 ？

它的工作領域是瀏覽器主要的是把美工的圖合成完成的網頁 呈現在使用者面前，需要實現網頁的互動效果。

上家公司離職的原因

因為我們是外包公司 要排我去上海去做一個專案 哪個專案時間停長的
然後呢 我的大部分這朋友 都在北京這裡 所以我就離職了

近期規劃和未來的？

我近期的職業規劃是把咱們公司的專案做好另外把我的這個技術呢得以提升
充實我的技術多學一些元件外掛 多學一款到兩款框架這是我近期的
對於 中長期的這個規劃呢我打算呢將來我在研究一門後臺語言 比如java php python這些呢 我研究一門掙去呢研究明白以後呢 為 咱們公司更好的去服務
這個呢就是我的 近期和長期的一個規劃

3.如果我們錄用你入職之後你如何開展工作

1.如果公司錄用我我會帶著我以前的技術和經驗把這些東西帶到我們的專案中讓咱們的專案呢更好更人性化
2.我會快速的掌握咱們公司現在所寫的專案包括他的路由是怎麼架構的，包括他裡面介面的請求是怎麼來處理的
3.你如何提高咱們工作中的效率
做專案前有一個充分的規劃以及籌備
規劃 和專案經理要詳細的瞭解工作需求把每一個細節點都要理解到位，這個是為了避免後期的翻工
籌備：我在開發專案之前我就把我以前用到的常用的功能模組都打包好
比如是分頁的元件上拉重新整理下拉載入的

Javascript資料型別

基本型別+引用型別=資料型別
Es6之前 6種
Es6之後 7種
Number數值型 String 字串 Boolean 布林型 Null 空 Undefined 未定義 Symbol 符合型 是ES6新增
引用型別 只有一種 object 物件 function ，array 都是繼承與object
可以使用instanceof 檢測一下

1.Vue 的雙向資料繫結原理

資料繫結簡單來說，就是當資料發生變化時，相應的檢視會進行更新，當檢視更新時，資料也會跟著變化。
是通過資料劫持以及結合釋出者-訂閱者來實現的，資料劫持是利用ES5的Object.defineProperty(obj, key, val)來劫持各個屬性的的setter以及getter，在資料變動時釋出訊息給訂閱者，從而觸發相應的回撥來更新檢視。

輸入的值為：{{text}}
text: ‘hello world’

懶載入

.1什麼是懶載入?
介紹？： 懶載入的主要目的是作為伺服器前端的優化，緩解伺服器前端壓力，一次性請求次數減少或延遲請求。

原理：懶載入又稱延遲載入。當訪問一個頁面的時候，需要先把img元素或者其他元素的背景圖先用一張預設的圖片代替（佔位圖），這樣子
瀏覽器渲染頁面的時候就只需請求一次。當圖片出現在瀏覽器可視區域的時候，才設定圖片的真實路徑，把圖片顯示出來。
3 懶載入具體實現原理
頁面中的img元素之所以會發送http請求的原因是設定了src屬性，否則瀏覽器就不會發送請求去下載這個圖片。首先在頁面中把所有
的圖片用一張佔位圖進行佔位，並且在元素下設定data-src自定義屬性，存放圖片的真實路徑，當需要用到的時候取出該真實路徑動
態新增給src。

2.Vue的虛擬DOM的原理?

1.用JavaScript模擬DOM樹，並渲染這個DOM樹
2.比較新老DOM樹，得到比較的差異物件
3.把差異物件應用到渲染的DOM樹

3.Pomise 的原理？

Promise 是非同步程式設計的一種解決方案
Promise物件是一個非同步操作，有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。只有非同步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態

5.閉包的原理

函式巢狀函式 內部的函式 可以 訪問外部函式的變數
就形成了一個閉包
優點：可以隔離作用域，不造成全域性汙染
缺點：由於閉包長期駐留記憶體，則長期這樣會導致記憶體洩露
如何解決記憶體洩露：將暴露全外部的閉包變數設定為null
適用場景：封裝元件，for迴圈和定時器結合使用，for迴圈和dom事件結合，可以在效能優化的過程中，節流防抖函式的使用，導航欄獲取下標的使用

v-if和v-show的區別

v-if和v-show都可以顯示和隱藏一個元素，但有本質區別
v-if是惰性的，只是值為false 就不會載入對應元素，為true才會動態載入對應元素，

v-show：是無論為true和false都會載入對應html程式碼，但為false時用display：none隱藏不在頁面顯示，但為true是頁面上用display：block顯示其效果，
使用場景：切換頻繁的場合用v-show,切換不頻繁的場合用v-if

Call，apply ，bind的區別？

call，apply，bind 主要作用都是改變this指向的，但使用上有區別。
call和apply的主要區別啊在傳遞引數上不同，call後面傳遞的引數是以逗號的形式分開的。apply傳遞的引數是陣列形式，
bond返回的是一個函式形式。如果要執行，則後面要再加一個小括號，
例如：bind（obj，引數1，引數2，）（） bind只能以逗號形式，不能是陣列形式，

6.兄弟通訊

元件通訊：
父傳子
1、在父元件上的子元件標籤上繫結一個屬性，將要傳輸的變數掛載到這個屬性上
：屬性名=“要傳輸的變數”

	2、在子元件上通過props來接受這個資料，接受的資料可以直接使用
		接受格式 props:["屬性名"]
	
			
子傳父：
	1、在父元件上定義一個方法，在父元件的子元件標籤上繫結一個自定義事件，掛載剛才定義的方法

	2、在子元件上定義一個方法，來通過this.$emit("自定義事件",要傳輸的資料)來呼叫這個方法，通過引數的形式傳遞資料	

兄弟：
1、如果有共同的父元件，我們就可以採用先子傳父，然後在父傳子
2、bus匯流排傳值（採用的是事件派發和事件監聽的方式）
	1、在src目錄中新建一個bus.js,在這個檔案中要匯出一個空的vue例項
	2、在傳輸資料的元件中引入bus.js,通過Bus.$emit("事件名",要傳輸的資料)來派發事件
	3、在接受資料的元件中引入bus.js,通過bus.$on("自定義事件"，（res）=>{
	res就是要接受的資料
})來監聽事件

1.原型

每個函式物件下都有一個prototype屬性。這個屬性就是原型

原型鏈

原型鏈是JS特有的一種繼承機制
原型鏈會涉及到___proto___,prototype
物件的__proto__指向建構函式的prototype
建構函式prototype的__proto__指向Object.prototype
Object.prototype的__proto__指向null
原型鏈的頂端就是null
應用場景：繼承

async/await

Async 和 await 是一種同步的寫法，但還是非同步的操作，兩個內容還是必須
同時去寫才會生效不然的話也是不會好使，而且 await 的話有一個不錯的作用就
是可以等到你的資料載入過來以後才會去執行下邊的 js 內容，而且 await 接收的
物件必須還是個 promise 物件，所以這個 async await 我的主要應用是在資料的接收，和非同步問題的
處理，主要是還是解決不同執行時機下的非同步問題！

路由導航守衛有幾種，如何實現s

Vue路由鉤子是在路由跳轉過程中攔截當前路由和要跳轉的路由的資訊

全域性守衛 元件內部守衛 元件獨享守衛
beforeEach beforeRouteEnter beforeEnter
(1)beforeRouteEnter（路由之前呼叫）
(2)beforeRouteUpdate（複用時呼叫）
(3)beforeRouteLeave（離開路由時呼叫）
每個守衛方法接受三個引數：
to 到哪裡去
from 從哪來
next(true)繼續往下走 (false)終止條狀 next(path)跳轉到目標路徑

使用場景：判斷使用者沒有登入 路由導航守衛可以讓我們對使用者要跳轉的路由做一次檢查，符合條件後放行，不符合條件則強制使用者跳轉登入頁面。

Vuex

vuex
是vue提供給我們的一個狀態管理工具，可以集中的儲存和管理元件中資料
好處：
可以方便實現元件之間的資料通訊
弊端：
佔用資源太多，不是萬不得已的情況下不推薦使用
state：儲存狀態（變數）
getters： state 的計算屬性。
mutations ： 修 改 狀 態 ，
actions：非同步操作
modules：模組，為了開發大型專案，方便狀態管理而使用的。
plugins ：是一個外掛 是為了資料持久化

vuex的執行機制：

在vue的元件中通過dispatch來呼叫actions中的方法，actions中通過commit來呼叫mutactions中的方法，在mutactions可以直接操作state中的資料，state中的資料只要發生改變就會立即響應給元件

使用方法：
1、下載 vuex
cnpm install vuex -s

2、配置
a.在src目錄中新建一個store目錄，在store目錄中新建一個index.js
1、引入vuex和vue
3、vue、use(vuex)
4、新建倉庫並且匯出
export default new Vuex.Store({
//儲存和管理資料就行
})
b.在main.js中，引入store模組，並且掛載到vue的例項上
c、在元件中讀取或者操作資料就行

在元件內部讀取state中的資料
this.$store.state.鍵

操作state中的資料

在元件中使用mutations中的方法
this.$store.commit("方法名",引數)、
state中的資料只能由mutations中的方法來操作
在元件中使用getter中的資料

this.$store.getters.名
actions:非同步的操作vuex中資料
在元件中呼叫action中的方法，action中mutations中方法，mutations操作state中的資料
vuex的actions和mutations的區別
mutations是對狀態的直接修改，是一個同步修改狀態的函式
actions是對狀態的批量修改，通常是非同步操作，包含一組mutations，在非同步操作的前後，失敗，成功等處修改元件狀態
也可以是同步操作，但是需要執行多次mutations

vue常用修飾符

.stop 阻止事件冒泡
.prevent 阻止事件預設行為
.capture 觸發事件捕獲
.self 事件在該元素本身觸發回撥
.once 只執行一次
.delete (捕獲 “刪除” 和 “退格” 鍵)
.up 滑鼠抬起
.down 滑鼠按下
.left 向左
.right 向右
@keyup/
@keydown.修飾符=“方法名

10sessionStoragelocalStorage cookie的區別

什麼事本地儲存？
本地儲存是H5新增的API，用來在本地儲存資料，在不影響伺服器效能的情況下來在本地儲存大量的資料

	本地儲存分為localStorage和sessionStorage
	localStorage和sessionStorage有著一樣的API，但是localStorage可以實現資料永久儲存，sessionStorage瀏覽器關閉資料消失
設定資料
	localStorage.setItem("key")
	讀取資料
	localStorage.getItem("key")
	//清除當前資料
	localStorage.removeItem("key")		

	cookie每次請求伺服器都會攜帶cookie請求頭，如果

資料儲存的多會影響伺服器的效能

11let、const

1.const 和 let是在塊級作用域上使用的方法，const宣告的時候必須要賦值。
2.let和const宣告的變數不會掛載window上：
3.let和const不存在變數提升

12.es6中有哪些拓展

1. 新增了塊級作用域(let,const)
2. 提供了定義類的語法糖(class)
3. 新增了一種基本資料型別(Symbol)
4. 新增了變數的解構賦值
5. 函式引數允許設定預設值，引入了 res 引數，新增了箭頭函式
6. 物件和陣列新增了擴充套件運算子

13.es6中陣列方法有哪些拓展

	Push                       向陣列的末尾新增資料元素

Unshift 向陣列的前頭新增資料元素
Pop 陣列末尾刪除一個數據元素
Shift 刪除並返回第一個元素
indexOf 查詢第一個出現的下標
lastIndexOf 查詢最後一個痴線的下標
Splice 刪除元素，並向陣列新增新元素
Slice 擷取陣列中部分形成新陣列
Join 把陣列轉換為字串
Split 把字串轉換為陣列
Concat 連線兩個或多個數組
Sort 排序
Reverse 顛倒陣列中的元素

14.Ajax是什麼?以及如何建立Ajax?

非同步javascript和XML，是指一種建立互動式網頁應用
的網頁開發技術。通過後臺與伺服器進行少量資料交換
，AJAX可以使用網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。
1、建立XMLHttpRequest物件,也就是建立一個非同步呼叫物件.
2、建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證資訊.
3、設定響應HTTP請求狀態變化的函式.
4、傳送HTTP請求.
5、獲取非同步呼叫返回的資料.
6、使用JavaScript和DOM實現區域性重新整理

15.HTTP狀態嗎都有哪些?

200 – 請求成功
301 – 資源(網頁等)被永久轉移到其它URL
404 – 請求的資源(網頁等)不存在
500 – 內部伺服器錯誤

16.計算屬性和watch的區別

methods是沒有快取性，只要呼叫就會執行
computed具有快取性，依賴於關聯的屬性，屬性的值發生改變才會執行
watch沒有快取性，也是依賴於監聽的屬性，只要屬性值發生改變就會執行

17.從輸入URL到頁面載入完成期間經歷了什麼？

1.DNS 解析
2.TCP連線
3.傳送HTTP請求
4.伺服器處理請求並返回需要的資料
5.瀏覽器解析渲染頁面

6.連線結束

19生命週期函式：

1、beforeCreate()在這個生命週期函式上只有一些例項本身的事件，在這個鉤子上自定義的一系列東西都是不可用的 undefined

2、created()在這個生命週期函式上自定義的屬性和事件都是可以用的了，也就是說它最早可以操作data中資料的函數了
zhangshan

3、beforeMount()在這個生命週期鉤子中已經在記憶體中編譯好dom樹，但是還沒有渲染到頁面上 此時指令已經被解析
null

4、mounted()已經將記憶體中的dom樹渲染到頁面上，最早操作dom元素

ssssss

執行階段（會被執行0次到n次 0次 data沒有改變）
5、beforeUpdate() 記憶體中的資料已經改了 頁面沒有改
還是zhangshan
6、updated() 頁面和記憶體已經同步了
lisy
7、beforeDestroy() 當物件或者元件被銷燬的時候呼叫，這個鉤子上data和其他的事件還是可以用 清楚定時器 釋放記憶體
8、destroyed() 當元件已經被銷燬完畢的時候被呼叫 什麼都用不了了

h5和css3的新特性

Css3新特性
1.顏色：新增RGBA，HSLA模式
2. 文字陰影（text-shadow、）
3.邊框： 圓角（border-radius）邊框陰影： box-shadow
4. 盒子模型：box-sizing
5.背景：background-size 設定背景圖片的尺寸 background-origin 設定背景圖片的原點
6.漸變：linear-gradient、radial-gradient
7. 過渡：transition，可實現動畫
8. 自定義動畫
9. 在CSS3中唯一引入的偽元素是 ：：selection.
10. 媒體查詢，多欄佈局

H5新特性

1. 拖拽釋放(Drag and drop) API
2. 語義化標籤（header,nav,footer,section）
3. 音訊、視訊API(audio,video)
4. 畫布(Canvas) API
5. 地理(Geolocation) API
6. 本地離線儲存 localStorage 長期儲存資料，瀏覽 器關閉後資料不丟失；
7. sessionStorage 的資料在瀏覽器關閉後自動刪除
8. 表單控制元件，calendar、date、time、email、url、 search
9. 新的技術webworker, websocket, Geolocation

promise如何使用

promise是一個建構函式，所以可以 new 出一個Promise的例項
在Promise上有兩個函式 resolve(成功之後的回撥函式)和 reject(失敗後的回撥函式)
在Promise建構函式的prototype屬性上，有一個 .then() 方法。所以只要是Promise建構函式建立的例項，都可以訪問到 .then()方法

什麼是跨域 解釋jsonp的原理,?

二、什麼是跨域
當一個請求url的協議、域名、埠三者之間任意一個與當前頁面url不同即為跨域

、 跨域解決方法
【1】設定document.domain解決無法讀取非同源網頁的 Cookie問題
因為瀏覽器是通過document.domain屬性來檢查兩個頁面是否同源，因此只要 通過 設定相同的document.domain，兩個頁面就可以共享Cookie

jsonp並不是一種資料格式，而json是一種資料格式，jsonp是用來解決跨域獲取資料的一種解決方案，具體是通過動態建立script標籤，然後通過標籤的src屬性獲取js檔案中的js指令碼，該指令碼的內容是一個函式呼叫，引數就是伺服器返回的資料，為了處理這些返回的資料，需要事先在頁面定義好回撥函式，本質上使用的並不是ajax技術。
vue路由傳引數如何實現

ps:主要通過 query 和 params 來實現

query 傳參：通過this. r o u t e r . p u s h ( ) 傳 遞 u r l 地 址 並 且 拼 接 ? t h i s . router.push()傳遞 url 地址並且拼接? this. router.push()傳遞url地址並且拼接?this.route.query.id 來接收
優點：通用性比較好，重新整理資料不會丟失

params 傳參：通過 this. r o u t e r . p u s h ( ) 傳 遞 u r l 地 址 並 且 拼 t h i s . router.push()傳遞 url 地址並且拼 this. router.push()傳遞url地址並且拼this.route.params.id
來接收
優點：傳遞資料量在，優雅
缺點：重新整理資料會丟失

vue自定義指令如何使用

vue中除了內建的指令（v-show,v-model）還允許我們自定義指令
// 全域性自定義指令封裝
Vue.directive(“block”,{ }

區域性自定義指令
directives:{ } 鉤子引數：
bind: 只調用一次，指令第一次繫結到元素時呼叫，
inserted: 被繫結元素插入父節點時呼叫
update: 被繫結元素所在的模板更新時呼叫
componentUpdated: 被繫結元素所在模板完成一次更新 週期時呼叫。

unbind: 只調用一次， 指令與元素解綁時呼叫。

vue中key的作用

key的作用是為了在diff演算法執行時更快的找到對應的節點，提高diff速度
key具有唯一性
vue中迴圈需加 :key=“唯一標識” ，唯一標識可以使item裡面id index 等，因為vue元件高度複用增加key可以標識元件的唯一性，為了更好地區別各個元件key的作用主要是為了高效的更新虛擬DOM

1、keep-alive的作用

keep-alive：主要用於保留元件狀態或避免重新渲染。
比如： 有一個列表頁面和一個 詳情頁面，那麼使用者就會經常執行開啟詳情=>返回列表=>開啟詳情這樣的話 列表 和 詳情 都是一個頻率很高的頁面，那麼就可以對列表元件使用進行快取，這樣使用者每次返回列表的時候，都能從快取中快速渲染，而不是重新渲染。
include - 字串或正則表達，只有匹配的元件會被快取
exclude - 字串或正則表示式，任何匹配的元件都不會被快取

vue路由有幾種模式
路由分為Hash路由和History路由
Hash路由的特點根據hash值的切換顯示不同的內容
hash ：雖然出現URL中，但不會被包含在HTTP請求中，對後端完全沒有影響，因此改變hash不會重新載入頁面。
History：利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。需要特定瀏覽器支援

vue提供給我們的常用的內建指令

v-text 給元素繫結變數
v-html 給元素繫結變數 可以解析html
v-bind:屬性=“變數”  給標籤繫結動態的屬性  簡寫 ：屬	性=“變數”
v-for 迴圈遍歷陣列或者物件 <標籤 v-for="(item,key) in 	變數"></標籤>
v-on:事件名="方法"  簡寫 @事件名=“方法”
v-show 控制元素或者元件的顯示和隱藏
v-if  控制元素或者元件的顯示和刪除

v-show和v-if的區別：
當條件為真的情況下，都是顯示元素，當條件為假的時候v-show是給元素新增	display:none,v-if是直接刪除元素
v-show有更高的渲染成本  v-if有更高的切換成本 所以頻繁的切換需要v-show

v-model繫結表單元素實現資料的雙向繫結
v-clock 解決差值表示式的閃爍問題
	
給標籤新增屬性 然後新增樣式
[v-clock]{
	display:none
}

Js的增刪改查

DOM方法：
(1)獲取（訪問）元素
getElementById()
返回對擁有指定 ID 的第一個物件的引用
getElementsByName()
：返回帶有指定名稱的物件的集合。
getElementsByTagName()： 返回帶有指定標籤名的物件的集合
getElementsByClassName
： 返回文件中所有指定類名的元素
(2)建立標籤方法
document.createElement() //建立一個元素節點
document.createTextNode() //建立一個文字節點
parentNode.appendChild(newChild) //newChild 被新增到孩子列表中的末端。
-------------------下面預習---------------------
(1)插入節點：insertBefore()
(2)刪除節點：removeChild()
(3)替換節點：replaceChild()
1.js執行機制
js作為瀏覽器指令碼語言，它的主要用途是與使用者互動，以及操作DOM，因此js是單執行緒，也避免了同時操作同一個DOM的矛盾問題；

選擇器
Js選擇器總結

一、原生JS選擇器#

JS選擇器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()
A： getElementById(ID): 返回對指定ID的第一個物件的引用，如果在文件中查詢一個特定的元素，最有效的方法是getElementById()
B: getElementsByName(name): 返回文件中name屬性為name值的元素，因為name屬性值不是唯一的，所以查詢到的結果有可能返回的是一個數組，而不是一個元素。
C: getElementsByTagName(tagname): 返回文件中指定標籤的元素
D: getElementsByClassName():返回文件中所有指定類名的元素
E: querySelector():返回文件中匹配指定css選擇器的第一個元素
F: querySelectorAll():返回文件中匹配指定css選擇器的第一個元素

二、jQuery選擇器#

內容
基本選擇器有ID選擇器、類選擇器、標籤選擇器、通用選擇器，事件的新增方法如下：
$(#wei).事件名(function() { }); id
Jqery選擇器
基本選擇器有ID選擇器、類選擇器、標籤選擇器、通用選擇器，

微信小程式 的

生命週期函式

onLoad: 頁面載入
一個頁面只會呼叫一次，可以在 onLoad 中獲取開啟當前頁面所呼叫的 query 引數。
onShow: 頁面顯示
每次開啟頁面都會呼叫一次。
onReady: 頁面初次渲染完成
一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和檢視層進行互動。
對介面的設定如wx.setNavigationBarTitle請在onReady之後設定。詳見生命週期
onHide: 頁面隱藏
當navigateTo或底部tab切換時呼叫。
onUnload: 頁面解除安裝
當redirectTo或navigateBack的時候呼叫。
微信小程式的常用命令

wx:for=""//for:迴圈指令，同volist 同wx:key一起使用
wx:if=""//同其他if使用
wx-show
bindtap=“aa”//點選事件：
//跳轉傳參，跳轉到aaa目錄下的aaa.wxml