【面試】前端面試題

時間 2019-12-02

原文原文鏈接

1、javaScript中如何檢測一個變量是 String 類型：

1.  typeto（obj） ===  "srting"
2.  typeTo obj === "string"  
3.  obj.constructor === string

2、用js去除字符串空格的方法？

1. 使用正則匹配的方式：

     a:    str = str.replace(/\s*/g,"")    //去掉全部空格  
     b:    str = str.replace(/^\s|\s$/g,"")  // 去掉兩邊的空格
     c：   str = str.replace(/^\s/,"")   // 去掉左邊的空格
     d：   str = str.replace(/\s$/g,"")  // 去掉後面的空格

2：使用 str.trim() 方法

 a:  str = str.trim(str) // 缺點沒法去掉中間的空格
 b:  str.trimLeft()  str.trimRight()  // 去除左右的空格

3. 使用jquery的 $.strim() 方法

 a: str = $.trim(str)  // 缺點沒法去掉中間的空格

3、如何獲取瀏覽器url查詢字符串的參數值？

function showWindowHref(){
    var shHref = window.location.href
    var args = shHref.split('?')
    if(args[0] === shHref){
        return ""
    }
    var arr = args[1].split('&')
    var obj = {}
    for(var i = 0 ; i < arr.length; i++){
        var stg = arr[i].split('=')
        obj[stg[0]] = stg[1];
    }
    return obj;
}
var href = showWindowHref();
var value = href['name']

4、js對字符串的操做函數

concat() 將兩個或者多個文本的字符串鏈接起來，返回一個新字符串。
indexOf() 返回字符在字符串的匹配位置。若是沒有匹配到返回 -1 。
charAt() 返回指定位置的字符。
lastIndexOf() 返回匹配到的字符最後一次出現的位置。
match() 檢查一個字符是否匹配到正則表達式。
substr() 返回從字符串的 startPos 位置開始。長度爲 length的字符串。
substring() 返回字符串的一個子串。第一個參數是開始位置，第二個是結束位置。
slince() 提取字符串的一部分，返回一個新字符串。
replace() 用來查找匹配一個正則字符串，使用新字符串代替匹配字符串。
search() 執行一個正則表達式，若是匹配成功返回索引位置，若是沒有成功返回 -1 。
split() 將一個字符串劃分爲一個字符串數組。
toLowerCase() 將整個字符串轉成小寫。
toUpperCase() 將整個字符串換成大寫。

5、如何添加、移動、移除、複製、建立、查找節點？

一、添加節點：

a:  createDocumentFragment()   // 建立一個DOM節點
b:  createElement()   // 建立一個具體元素
c：createTextNode()  // 建立一個文本節點

2 、添加、移除、替換、插入

a： appendChild()   // 添加
b:  removeChild()  // 移除
c：  replaceChild()   // 替換
d：  insertBefore()   // 插入

三、查找

a： getElementsByTagName()   // 根據標籤名稱查找
b： getElementsByName()   // 根據標籤元素的Name 屬性
c：  getElementsById()    // 根據標籤的 id查找   惟一性

6、寫出3個關於this的經典應用

1. 在html中的應用

<input type="button" onclick=「showInfo(this);」  value="點擊一下"  />

2. 在構造函數中的應用

function Animal(name,color){
    this.name = name;
    this.color = color;
}

3. 在 input點擊後獲取值

var sBtn = getElementById('#botton')
sBtn.onclick = function(){
        console.log(this.value)
    }

4. 在 apply 和 call 求數組最值時的應用

var number = [22,44,55,66,33,88,99]
var applyNumber = Math.max.apply(this,number)
console.log(applyNumber)
var callNumber = Math.min.call(this,22,44,55,66,33,88,99)
console.log(callNumber)

7、比較 typeof 和 instancefo 區別？

相同點：都是用來判斷一個變量是否爲空，或者是什麼類型。

不一樣點： typeof 是返回數據類型。而instanceof是返回一個boolean 值。

詳細區別：

1. typeof 通常只能返回這幾種：number、boolean、undefined、fucntion、object、string

2. typeof 用於判斷一個變量是否存在 if(typeof a!=undefined)

3. typeof 對於 Array ，null 等特殊對線都會判斷爲 object

instanceof 用於判斷一個變量是不是於一個對象。

a instanceof b  ? "true" : "false"      
var array = new Array()
console.log(array instanceof Array);
console.log(array instanceof Object);

2. 判斷構造函數的類型

function test(){}
var a = new test()
console.log(a instanceof test)

3. instanceof 判斷的 object 只是js 語法中的對象，不是dom模型對像

 if (window instanceof Object){ alert('Y')} else {  alert('N');}   // 個人到的是true

8、如何理解閉包？

1.定義：一個函數的返回值是另外一個函數，而且另外一個函數應用了其父函數的內部變量，而且在外部被執行了，就造成了閉包。

2.使函數外部能夠調用內部申明的變量。

3. 實例：根據做用域鏈的規則，底層做用域沒有申明的變量會向上一級查到。知道找到window的變量，若是沒有就返回 undefined , 有就返回。

var count = 10
 
function add(){
    var count = 0 ;
    return function(){
        console.log( count += 1);
    }
    
}
var s = add();
s();
s();

4. 變量的做用域：全局做用域和局部做用域

a. 函數書內部能夠讀取函數外部的變量，外部不能夠讀取內部的變量。

b. 內部申明變量的時候要用var 。

5. 閉包須要注意的地方：

a. 濫用閉包，會的形成內存泄露，因爲閉包中的變量是存儲在內存中的，內存消耗過大會影響網頁性能，解決辦法是在函數退出以前刪除局部變量。

b. 改變父元素的值，隨意改變父元素的值會影響父元素的其餘地方。

9、什麼是跨域？跨域請求的資源方法有哪些？

1.什麼是跨域？

瀏覽器的同源策略致使的，方式發送請求url的協儀、域名、端口三者有一個與當前頁面地址不一樣即爲跨域。

2. 方法？

a. porxy 代理

定義：用於將請求先發送給後臺服務器，後臺服務器在發送請求，而後將結果返回給前端。

實現方法： nginx 方向代理。

注意點： 1.若是代理是請求的 https協議。那麼porxy須要先新人改證書。不然請求失敗。

3. CORS

定義：如今瀏覽器自身支持跨域的一種方法。

用法：通常須要後端工做人員在請求數據的時候容許跨域的操做。

res.writeHead(200, {
    "Content-Type": "text/html; charset=UTF-8",
    "Access-Control-Allow-Origin":'http://localhost',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});

4. jsonp 跨域

定義：動態插入一個script 標籤。緣由爲瀏覽器對script資源的請求沒有同源策略的限時。資源請求到就會執行沒有阻塞。

實現方式：

1. 首先在客戶端註冊一個callback, 而後把callback的名字傳給服務器。此時，服務器先生成JSON數據。而後以JavaScript 語法的方式，生成一個function,function名字就是傳遞上來的參數jsonp.

2.而後，將JSON數據直接以入參的方式，放置到function中，這樣就生成了一段 js 語法的文檔，返回給客戶端。

3。最後，在客戶端瀏覽器中解析script標籤，並執行返回的JavaScript文檔，此時數據做爲參數，傳入到了客戶端預先定義好的回調函數裏(動態執行回調函數)。

特色：經過動態的建立script標籤來請求其它域的數據，數據爲 json 格式。

缺點： 1. 沒法實現post請求。2. 請求是否失敗很難判斷。

10、談談垃圾回收機制的方式以及內存管理？

1. 回收機制方式？

a：垃圾回收機制：執行環境負責管理的代碼執行過程當中的的內存。

b: 垃圾收集器會按期（週期性）的找出那些不在繼續使用的變量，而後釋放內存，可是這個不是真實的，開銷比較大，實際垃圾回收機制會按期的執行。

c: 示例以下

var fn1 = function(){
    var obj = { name: "張三" }
}
var fn2 = function(){
    var obj = {name: "張三"}
    return obj
}
var a = fn1();
var b = fn2();

fn1 中申明的變量是局部變量，在執行fn1 後，該內存會被js引擎中的垃圾回收機制釋放。而fn2 中返回的變量被全局變量b所指因此改內存並不會被釋放。

d: 回收策略：標記清理和引用計數

標記清理：當變量進入環境是被標記爲「進入環境」離開環境是「離開環境」某時候當即回收器會過濾掉所環境中全部的變量，以及進入的變量。剩下的就是準備回收的變量。

引用標記：就是變量的應用次數，當變量引用次數爲0時，就準備回收。

11、開發中遇到內存泄漏是如何解決的？

1：定義：內存泄漏是指一塊被分配的內存，既不能使用，也不能回收。知道瀏覽器進程結束。c#和java中使用自動垃圾回收方法管理內存，幾乎不會發生泄漏。瀏覽器也是自動垃圾回收方法，可是瀏覽器方法有bug會產生內存泄露。

2：內存泄漏的幾種狀況：

（1）：當頁面中的元素被移除替換而綁定的事件沒有被移除，IE中沒有作出恰當處理。須要手工移除事件。

（2）：因爲函數裏面定義函數，內部函數或者事件回調外爆了。就造成了閉包。閉包會使得函數內局部變量得不到釋放。

function bindEvent(){
    var obj = document.getElementById('test')
    obj.onclick = function(){
 
    }
}
                            
function bindEvent(){
    var obj = document.getElementById('test')
    obj.onclick = function(){
 
    }
    obj = null
}

12、面向對象繼承的實現。

面向對象的基本特徵是：多態、繼承、封閉

java中繼承的方法：

prototype 原型鏈繼承
call/apply 繼承
混合方法（prototype 和 call /applay ）
對象冒充
只繼承原型鏈的繼承
完美組合繼承
Object.create 繼承

1: 原型鏈繼承（內部函數和原型鏈上均可以繼承）

function teacher(name){
    this.name = name
}
teacher.prototype.sayName = function(){
    console.log('name' + this.name)
}
var teacher1 = new teacher('張三')
 
function student(name){
    this.name = name
}
 
student.prototype = new teacher()
 
var student1 = new student('李四')
 
teacher1.sayName()
student1.sayName()

缺點： 1. 子類的原型是父類的實例化，父類的內部申明的方法被繼承在子類原型鏈上。

2. 在建立子類實例時不能向父類構造函數傳遞參數。

2： call()和apply()方法（只能繼承內部申明的函數，不能繼承原型連上）

function teacher(name,age){
    this.name = name ;
    this.age = age;
    this.sayAge = function(){
        console.log('內部方法')
    }
}
teacher.prototype.sayName = function(){
    console.log('name' + this.name , "age" + this.age)
}
 
function student(){
    var args = arguments
    teacher.call(this,args[0] ,args[1]);
}
var teacher1 = new teacher('張三' ,'25');
var student1 = new student('王五','26');
console.log(teacher1)
console.log(student1)
teacher1.sayName();
teacher1.sayAge();
//student1.sayName();           // 報錯
student1.sayAge();

缺點：沒法繼承原型鏈上的方法

3：混合適用法（原型和內部申明的方法均可繼承）

function teacher(name,age){
    this.name = name ;
    this.age = age;
    this.sayAge = function(){
        console.log('內部方法')
    }
}
teacher.prototype.sayName = function(){
    console.log('name' + this.name , "age" + this.age)
}
 
function student(){
    var args = arguments
    teacher.call(this,args[0] ,args[1]);
}
student.prototype =  new teacher() 
var teacher1 = new teacher('張三' ,'25');
var student1 = new student('王五','26');
console.log(teacher1)
console.log(student1)
teacher1.sayName();
teacher1.sayAge();
student1.sayName();             // 不報錯   因爲繼承下來了。
student1.sayAge();

缺點：兩次調用的父元素的構造函數，子類繼承父類的屬性，一組在實例上面繼承，一組在原型上面繼承（原型上建立很少餘的本該在實例的上的屬性。內部函數被常常在子類的原型上。）

對象冒充 (只能繼承內部申明的函數，不能繼承原型鏈上的方法)

function Teacher(name,age){
    this.name = name;
    this.age = age;
    this.sayAge = function(){
        console.log('對象方法')
    }
}
Teacher.name = "牛逼"
Teacher.sayName = function(){
    console.log('name'+ this.name + '靜態方法' )
}
Teacher.prototype.sayAAA = function(){
    console.log('prototype -- teacher')
}
function Student(name,age){
    this.student = Teacher ;
    this.student(name,age);
    delete this.student ;
}
// Student.prototype.sayAAA = function(){
//  console.log('student')
// }
 
var teacher1 = new Teacher('張三','17');
var student1 = new Student('李四','25');
// console.log(teacher1)
teacher1.sayAAA();
student1.sayAAA();

缺點：原型鏈上的方法沒法繼承

只繼承原型鏈的繼承(沒法繼承內部函數)

function teacher(name){
    this.name = name
}
teacher.prototype.sayName = function(){
    console.log('name' + this.name)
}
var teacher1 = new teacher('張三')
 
function student(name){
    this.name = name
}
 
student.prototype = teacher.prototype
 
var student1 = new student('李四')
 
teacher1.sayName()
student1.sayName()

缺點：沒法繼承構造函數的對象方法

完美組合繼承

function teacher(name,age){
    this.name = name ;
    this.age = age;
    this.sayAge = function(){
        console.log('內部方法')
    }
}
teacher.prototype.sayName = function(){
    console.log('name' + this.name , "age" + this.age)
}
 
function student(){
    var args = arguments
    teacher.call(this,args[0] ,args[1]);
}
student.prototype =  teacher.prototype
var teacher1 = new teacher('張三' ,'25');
var student1 = new student('王五','26');
console.log(teacher1)
console.log(student1)
teacher1.sayName();
teacher1.sayAge();
student1.sayName();             // 不報錯   因爲繼承下來了。
student1.sayAge();

缺點：=========

7. Object.create 繼承

function teacher(name){
    this.name = name
    this.sayAge = function(){
        console.log('內部方法')
    }
}
teacher.prototype.sayName = function(){
    console.log('prototype')
}
function student(name){
    this.name = name
}
 
student.prototype = Object.create(teacher.prototype)
 
var student1 = new student('張三')
console.log(student1)
student1.sayAge();            // 報錯
student1.sayName();         // prototype

缺點：沒法繼承內部申明的方法。與student.prototype = teacher.prototype 的區別在於一個是在本身的原型裏面生成另外一個父元素同樣的原型鏈，一個是將原型指向父元素的原型。

12、構造函數的三種方法申明

1. 靜態方法：就是經過構造函數 XXX.test = function (){} 來申明的方法。實例化是沒法繼承的，經過繼承也會是沒法繼承的，調用方式只有 XXX.test() 方式來調用。

2. 對象方法通常是在構造函數裏面經過 this.test = function(){} 來申明的。實例化和繼承均可以繼承屬性。

3. 對象的原型方法，經過實例化和繼承均可以被繼承。

十3、判斷一個字符串中出現次數最多的的字母？

var str = 'asdfssaaasasasasaa'
var json = {}
for(var i = 0 ; i < str.length ; i++){
    if(!json[str[i]]){
        json[str[i]] = 1
    }else{
        json[str[i]]++
    }
    
}
var iMax = 0;
var iIndex = ""
for( key in json){
    if(json[key] > iIndex){
        iIndex = json[key];
        iMax = key
    }
}
console.log('出現次數最多的是:'+iMax+'出現'+iIndex+'次');

十4、Array 對象屬性

constructor 返回對建立此對象的數組函數的引用。

length 設置或返回數組中元素的數目。

prototype 使您有能力向對象添加屬性和方法。

Array 對象方法

concat() 鏈接兩個或更多的數組，並返回結果。

join() 把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。

pop() 刪除並返回數組的最後一個元素。

shift() 刪除並返回數組的第一個元素

push() 向數組的末尾添加一個或更多元素，並返回新的長度。

unshift() 向數組的開頭添加一個或更多元素，並返回新的長度。

reverse() 顛倒數組中元素的順序。

slice() 從某個已有的數組返回選定的元素

sort() 對數組的元素進行排序

splice() 刪除元素，並向數組添加新元素。

toSource() 返回該對象的源代碼。

toString() 把數組轉換爲字符串，並返回結果。

toLocaleString() 把數組轉換爲本地數組，並返回結果。

valueOf() 返回數組對象的原始值

十5、編寫一個方法去掉一個數組的重複元素

方法一：

var arr = [0,2,3,4,4,0,2];
var obj = {};
var tmp = [];
for(var i = 0 ;i< arr.length;i++){
   if( !obj[arr[i]] ){
      obj[arr[i]] = 1;
      tmp.push(arr[i]);
   }
}
console.log(tmp);
結果以下： [0, 2, 3, 4]

方法二：

var arr = [2,3,4,4,5,2,3,6],
   arr2 = [];
for(var i = 0;i< arr.length;i++){
    if(arr2.indexOf(arr[i]) < 0){
        arr2.push(arr[i]);
    }
}
console.log(arr2);
結果爲：[2, 3, 4, 5, 6]

HTML & CSS:

1、什麼是盒模型？

一個元素佔空間大小的構成：border、padding、margin、content 組成。

2、什麼是行內元素、塊級元素、空元素。

行內元素： span i em img a b strong input button textarea label select

塊級元素： div ui li p h1-h6 dl dd dt blockquote

空元素：（系沒有內容的元素）： img input br link mate hr

3、css的垂直居中5種方式：

父元素設置： position：relative ；

子元素設置爲： position： absolute; top:0; left:0; right:0; bottom:0; margin: auto;

2. 父元素設置爲： position： relative ；

子元素設置爲： position： absolute：top：50%；left：50%；margin-top: 高度一半；margin- left：寬度的一半

3. 父元素設置爲： poistion： relative；

子元素設置爲：position： absolute；top: 50%; left: 50%; trasform: translate(-50%,-50%);

4. 父元素設置爲: display: felx ; align-items: conter ; justify-content: conter ;

子元素不設置：

5. 文本的垂直和水平居中： text-align： conter ； line-height： height ；

4、簡述一下 src 和 href 的區別？

src：用於指向外部資源的位置，將內容嵌套到文檔所在位置，將所引用的資源下載並應用到文檔。在下此類文檔的時候瀏覽器引擎會暫停其餘資源的下載和處理。知道此類文件被下載、編譯、執行完成，更像是嵌入到當前標籤內。這也是js爲何須要在最後加載。

href：用於指向網絡資源的位置，創建當前文檔和當前鏈接的聯繫。用於超連接。

5、簡述同步和異步的區別：

同步是阻塞模式，異步是不阻塞模式

同步是在當一個進程進行某個請求的時候，不在執行後面的代碼，一直處於等待狀態。直到受到返回信息。

異步是指當一個進程進行某個請求的時候，繼續執行後面的代碼，受到返回在執行返回的代碼。效率高。

6、px 和 em 的區別

px和em 都是長度單位

px：是一個固定大小的單位。

em: 值不是固定的。而且會繼承父元素的font-size:的大小。

瀏覽器默認font-size：是16px ；因此 16px = 1em

7、瀏覽器內核分別是什麼？

IE: trident 內核

Firfox: gecko 內核

Safari： webkit 內核

Opera : Blink 內核

Chrome： Blink內核

8、什麼叫優雅降級和漸進加強？

優雅降級：一開始就構建完整功能，而後在兼容低版本的瀏覽器。

漸進加強：針對低版本的瀏覽器時先保證最基本的功能，而後在根據高版本的瀏覽器追加功能。

9、localstorage 、 sessionstorage 、 cookie 的區別？

共同點: 存儲瀏覽器的緩存數據

區別：

1. 存儲內容是否發送到服務器：設置cookie後會將存儲的數據自動發到服務器，形成寬帶浪費。

web storage 會將數據緩存在本地。

2. 數據儲存的大小不一樣： cookie 是不能超過4K, web storage 能夠大到5M

3. 數據儲存的時間區別： cookie 在這支時間以前都有效。 sessionstorage 在關閉瀏覽器以前有效。

localstorage 是永久有效的。

4. 做用域不一樣： cookie 和 localstorage 是在同源窗口中共享的。sessionstorage不會在

10、 web storage 於 cookie的優點：

1. 存儲空間大 2. 不會向服務器發送內容，3.豐富易用的接口，4獨立的存儲空間。

11、ajax的優缺點以及工做原理？

定義和用法： asynchronous javascript and xml ；。是一種快速建立動態網頁的技術，無需從新加載真個頁面，只須要部分刷新的技術。

優勢： 1.減小了服務器端壓力，按需請求，最大程度的減小了冗餘請求。

2. 局部刷新。

3. 基於XML的標準。普遍應用。

缺點： 1.大量的ajax情求，在編輯的時候須要考錄瀏覽器兼容。

2. 只是局部刷新，對後退沒有用。

3.對流媒體的和移動設備的支持不太好。

ajax 實現步驟：

1.建立ajax對象。（XMLHttpRequest）

2.判斷傳輸方式（GET/POST）

3.打開鏈接（open）

4.發送請求（send）

5.完成前四步。onreadystatechange 判斷響應碼在200-300.或者 304.執行回調。

12、請指出document load 和 document ready 的區別？

相同點: 頁面文檔加載是觸發。

不一樣點： ready 表示文檔已經加載完成，不包含圖片和和非文字文件

load 表示文檔加載完成，包含圖片文件在內的全部元素

十3、正則表達

1. 寫一個function 清楚字符串先後的空格。

function trim(str){
    if(str && typeof str === "string"){
        return str.replace(/(\^s*)| (s*)$ /g ,"");
    }
 
}

郵箱校驗

var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
var email = "example@qq.com";
console.log(reg.test(email));    // true

十4、開發以及性能的優化

一、規避多人開發函數重名命名的問題？

命名空間、封閉空間、變量轉化爲對象變量、模塊化、對象化

二、請說出三種減低頁面的加載時間的方法?

(1) 壓縮css，js 文件

（2）合併css，js 文件，減小http請求

（3）外部引入的js、css放在最底部

(4) 減小dom操做。儘量的用變量替換沒必要要的dom操做。

三、你所瞭解的web技術攻擊

（1）XSS 跨站腳本攻擊：經過存在安全漏洞的網站，使得註冊用戶用戶的瀏覽器執行非法html或者jacascript代碼。

（2）SQL 注入攻擊

（3）SCRF 攻擊：經過已經設置好的陷阱，對註冊用戶作一些信息更改。

四、web前端如何提升性能的優化？

內容方面：

1. 減小HTTP請求 2. 減小dom 3. 使用ajax請求，（可緩存）

針對css：

1.將css代碼放在上端。 2.從頁面中剝離js、css 3. 精簡css。4 避免css表達式、

針對jacascript：

1. 腳本放在底部。 2.從頁面剝離js代碼。3. 精簡代碼。4.移除重複

針對圖片：

1. 優化圖片。2不要在html中使用縮放圖。3。給圖片上設置寬高。一面圖片爲加載不影響後面的加載。

五、瀏覽器如何渲染頁面？

1. 解析html文件，建立dom樹，遇到 link style 和 script 會阻塞。外部樣式不會阻塞 script的加載。

2. 解析css。優先級別：瀏覽器默認樣式< 用戶設置對象 < 外部樣式 < 內聯樣式 < html中的style

3. 將css於html結合。渲染dom樹。

4. 佈局和重繪。重繪和重排。

6.頁面閃爍 --》頁面中先加載出html的結構，以後再加載咱們的樣式

vue.js 題目

一、v-model是什麼？ vue中標籤怎麼綁定事件？

答：v-model這個指令只能用在表單元素上，能夠用他進行雙向數據綁定。綁定事件：<input @click=doLog() />

二、mvvm框架是什麼？說說對雙向數據綁定的理解？它和其它框架（jquery）的區別是什麼？哪些場景適合？

答：mvvm的m模型就是用來定義驅動的數據、v通過數據改變後的html、vm就是鏈接數據和視圖，用來實現雙向綁定

雙向綁定:一個變了另一個跟着變了，例如：視圖一個綁定了模型的節點有變化，模型對應的值會跟着變

區別：vue數據驅動，經過數據來顯示視圖層而不是節點操做。

場景：數據操做比較多的場景，更加便捷

三、自定義指令的方法有哪些？它有哪些鉤子函數？還有哪些鉤子函數參數？

答：全局定義指令：在vue對象的directive方法裏面有兩個參數，一個是指令名稱，另一個是函數。組件內定義指令（局部定義指令）：directives

鉤子函數：bind（綁定事件觸發）、inserted(節點插入的時候觸發)、update（組件內相關更新）、componentUpdated（被綁定元素所在模板完成一次更新週期時調用）、unbind（只調用一次，指令與元素解綁時調用）

鉤子函數參數：el、binding

四、說出至少4種vue當中的指令和它的用法？

答：v-if：判斷是否隱藏；v-for：數據循環出來；v-bind:class：綁定一個屬性；v-model：實現雙向綁定

五、請詳細說下你對vue生命週期的理解？

總共分爲8個階段建立前/後，載入前/後，更新前/後，銷燬前/後。

建立前/後：在beforeCreated階段，vue實例的掛載元素$el和數據對象data都爲undefined，還未初始化。在created階段，vue實例的數據對象data有了，$el尚未。

載入前/後：在beforeMount階段，vue實例的$el和data都初始化了，但仍是掛載以前爲虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。

更新前/後：當data變化時，會觸發beforeUpdate和updated方法。

銷燬前/後：在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，可是dom結構依然存在

六、請說下 vue 組件的優勢，以及註冊使用的過程？

答：首先，組件能夠提高整個項目的開發效率。可以把頁面抽象成多個相對獨立的模塊，解決了咱們傳統項目開發：效率低、難維護、複用性等問題。

使用Vue.component方法註冊組件。子組件須要數據，能夠在props中接受定義。而子組件修改好數據後，想把數據傳遞給父組件。能夠採用emit方法。

七、Vue.js內置的指令，用什麼開頭？

v-開頭的

以上內容借鑑：

http://www.javashuo.com/article/p-ywdgjcoy-z.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。