【面试】前端面试题

一、javaScript中如何检测一个变量是 String 类型：

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

二、用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)  // 缺点无法去掉中间的空格  

三、如何获取浏览器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']

四、js对字符串的操作函数

1.    concat()  将两个或者多个文本的字符串连接起来，返回一个新字符串。
2.    indexOf() 返回字符在字符串的匹配位置。如果没有匹配到返回 -1 。
3.    charAt()   返回指定位置的字符。
4.    lastIndexOf()  返回匹配到的字符最后一次出现的位置。
5.    match()  检查一个字符是否匹配到正则表达式。
6.    substr()  返回从字符串的 startPos 位置开始。长度为 length的字符串。
7.    substring()  返回字符串的一个子串。第一个参数是开始位置，第二个是结束位置。
8.    slince()   提取字符串的一部分，返回一个新字符串。
9.    replace() 用来查找匹配一个正则字符串，使用新字符串代替匹配字符串。
10.    search()  执行一个正则表达式，如果匹配成功返回索引位置，如果没有成功返回 -1 。
11.    split()     将一个字符串划分为一个字符串数组。
12.   toLowerCase()  将整个字符串转成小写。
13.   toUpperCase()  将整个字符串换成大写。

五、如何添加、移动、移除、复制、创建、查找节点？

       1、添加节点：

a:  createDocumentFragment()   // 创建一个DOM节点
b:  createElement()   // 创建一个具体元素
c：createTextNode()  // 创建一个文本节点

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

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

         3、查找

a： getElementsByTagName()   // 根据标签名称查找
b： getElementsByName()   // 根据标签元素的Name 属性
c：  getElementsById()    // 根据标签的 id查找   唯一性

六、 写出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)

   七、比较 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

八、如何理解闭包？

       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.  改变父元素的值，随意改变父元素的值会影响父元素的其他地方。

九、什么是跨域？跨域请求的资源方法有哪些？

       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. 请求是否失败很难判断。

十、谈谈垃圾回收机制的方式以及内存管理？

            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时，就准备回收。

 十一、开发中遇到内存泄漏是如何解决的？

            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
}

十二、面向对象继承的实现。

面向对象的基本特征是： 多态、继承、封闭

java中继承的方法： 

1.    prototype 原型链继承
2.    call/apply  继承
3.    混合方法  （prototype 和 call /applay ）
4.    对象冒充
5.   只继承原型链的继承
6.   完美组合继承
7. 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();

缺点： 两次调用的父元素的构造函数，子类继承父类的属性，一组在实例上面继承，一组在原型上面继承（原型上创建不多余的本该在实例的上的属性。内部函数被经常在子类的原型上。）

4.  对象冒充 (只能继承内部申明的函数，不能继承原型链上的方法)

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();

缺点： 原型链上的方法无法继承

5.   只继承原型链的继承(无法继承内部函数)

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()

缺点：无法继承构造函数的对象方法

6. 完美组合继承

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 的区别在于一个是在自己的原型里面生成另一个父元素一样的原型链，一个是将原型指向父元素的原型。

十二、构造函数的三种方法申明  

      1. 静态方法：  就是通过构造函数  XXX.test = function (){}  来申明的方法。实例化是无法继承的，通过继承也会是无法继承的，调用方式只有  XXX.test()  方式来调用。

      2. 对象方法一般是 在构造函数里面通过 this.test = function(){}  来申明的。实例化和继承都可以继承属性。

      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+'次');

十四、Array 对象属性

constructor 返回对创建此对象的数组函数的引用。

 

length 设置或返回数组中元素的数目。

 

prototype 使您有能力向对象添加属性和方法。

 

Array 对象方法

concat() 连接两个或更多的数组，并返回结果。

 

join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

 

pop() 删除并返回数组的最后一个元素。  

 

shift() 删除并返回数组的第一个元素

 

push() 向数组的末尾添加一个或更多元素，并返回新的长度。

 

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

 

reverse() 颠倒数组中元素的顺序。

 

slice() 从某个已有的数组返回选定的元素

 

sort() 对数组的元素进行排序

 

splice() 删除元素，并向数组添加新元素。

 

toSource() 返回该对象的源代码。

 

toString() 把数组转换为字符串，并返回结果。

 

toLocaleString() 把数组转换为本地数组，并返回结果。

 

valueOf() 返回数组对象的原始值

 

十五、编写一个方法 去掉一个数组的重复元素

 

方法一：

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:

一、什么是盒模型？

一个元素占空间大小的构成：border、padding、margin、content 组成。

二、什么是行内元素、块级元素、空元素。

行内元素： 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  

三、css的垂直居中5种方式： 

1.     父元素设置： 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   ；      

 

四、简述一下 src 和 href 的区别？

     src： 用于指向外部资源的位置，将内容嵌套到文档所在位置，将所引用的资源下载并应用到文档。在下此类文档的时候浏览器引擎会暂停其他资源的下载和处理。知道此类文件被下载、编译、执行完成，更像是嵌入到当前标签内。这也是js为什么需要在最后加载。

     href： 用于指向网络资源的位置，建立当前文档和当前连接的联系。用于超链接。  

五、简述同步和异步的区别：

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

同步是在当一个进程进行某个请求的时候，不在执行后面的代码，一直处于等待状态。直到受到返回信息。

异步是指当一个进程进行某个请求的时候，继续执行后面的代码，受到返回在执行返回的代码。效率高。

六、px 和 em 的区别

px和em 都是长度单位

px： 是一个固定大小的单位。

em:  值不是固定的。并且会继承父元素的font-size:的大小。

浏览器默认font-size： 是16px ； 所以 16px = 1em

七、浏览器内核分别是什么？

   IE: trident  内核

   Firfox: gecko  内核

   Safari： webkit 内核

   Opera : Blink 内核

   Chrome： Blink内核  

八、什么叫优雅降级和渐进增强？

    优雅降级：  一开始就构建完整功能，然后在兼容低版本的浏览器。

    渐进增强：   针对低版本的浏览器时先保证最基本的功能，然后在根据高版本的浏览器追加功能。

九、localstorage 、 sessionstorage 、 cookie 的区别？

   共同点:  存储浏览器的缓存数据

   区别：

     1.   存储内容是否发送到服务器：设置cookie后会将存储的数据自动发到服务器，造成宽带浪费。

web storage 会将数据缓存在本地。

     2.   数据储存的大小不同： cookie 是不能超过4K, web storage  可以大到5M  

     3.   数据储存的时间区别： cookie 在这支时间之前都有效。 sessionstorage 在关闭浏览器之前有效。

      localstorage 是永久有效的。

     4.  作用域不同： cookie 和 localstorage 是在同源窗口中共享的。sessionstorage不会在

十、 web storage 于 cookie的优势：

     1.  存储空间大 2. 不会向服务器发送内容，3.丰富易用的接口，4独立的存储空间。

十一、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.执行回调。   

十二、请指出document  load  和  document ready 的区别？

     相同点: 页面文档加载是触发。

    不同点： ready  表示文档已经加载完成，不包含图片和和非文字文件

                  load     表示文档加载完成，包含图片文件在内的所有元素

十三、正则表达

     1. 写一个function  清楚字符串前后的空格。

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

2.    邮箱校验

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

十四、开发以及性能的优化

    1、规避多人开发函数重名命名的问题？

           命名空间、封闭 空间、变量转化为对象变量、模块化、对象化

     2、请说出三种减低页面的加载时间的方法?

           (1)  压缩css，js 文件 

         （2）合并css，js 文件，减少http请求

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

           (4)  减少dom操作。尽可能的用变量替换不必要的dom操作。

    3、你所了解的web技术攻击

           （1）XSS 跨站脚本攻击： 通过存在安全漏洞的网站，使得注册用户用户的浏览器执行非法html或者jacascript代码。

            （2）SQL 注入攻击

            （3）SCRF 攻击：通过已经设置好的陷阱，对注册用户做一些信息更改。

   4、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。给图片上设置宽高。一面图片为加载不影响后面的加载。

    5、浏览器如何渲染页面？

            1. 解析html文件，创建dom树，遇到 link style 和 script 会阻塞。外部样式不会阻塞 script的加载。

            2. 解析css。优先级别： 浏览器默认样式< 用户设置对象 <  外部样式 < 内联样式  < html中的style 

            3.  将css于html结合。渲染dom树。

            4.  布局和重绘。重绘和重排。

   6.页面闪烁 --》 页面中先加载出html的结构，之后再加载我们的样式

 

vue.js 题目

1、v-model是什么？ vue中标签怎么绑定事件？

答：v-model这个指令只能用在表单元素上，可以用他进行双向数据绑定。绑定事件：<input @click=doLog() />

2、mvvm框架是什么？说说对双向数据绑定的理解？它和其它框架（jquery）的区别是什么？哪些场景适合？

答：mvvm的m模型就是用来定义驱动的数据、v经过数据改变后的html、vm就是连接数据和视图，用来实现双向绑定

双向绑定:一个变了另外一个跟着变了，例如：视图一个绑定了模型的节点有变化，模型对应的值会跟着变

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。

场景：数据操作比较多的场景，更加便捷

3、自定义指令的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

答：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令（局部定义指令）：directives

钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）、componentUpdated（被绑定元素所在模板完成一次更新周期时调用）、unbind（只调用一次，指令与元素解绑时调用）

钩子函数参数：el、binding

4、说出至少4种vue当中的指令和它的用法？

答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定

5、请详细说下你对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结构依然存在

6、请说下 vue 组件的优点，以及注册使用的过程？

答：首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。

使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。

7、Vue.js内置的指令，用什么开头？

v-开头的 

 

以上内容借鉴：

https://blog.csdn.net/wdlhao/article/details/79079660