1，vue的生命周期：

--beforecreat（数据观测和初始化事件还没开始） --created（完成数据观测，属性和方法的运算，但是$el属性还没显示出来。）

--brforemount（已经把data里面的数据和模板生成html,但是还没有挂载到html页面上去，在挂载开始之前被调用） --mounted（完成了模板的html，渲染到html页面去）

--buforeupdate（）--updated（）

--beforedestroy（实例销毁之前调用，实例还可用）--destroyed（销毁之后调用，调用后，所有的事件监听会被移除，该钩子在服务器端渲染期间不被调用）。

总结：生命周期就是：创建实例-初始化数据-编译模板-挂载渲染--更新渲染-销毁。

第一次页面加载会触发哪几个钩子？beforeCreate, created, beforeMount, mounted。

dom渲染在哪个钩子完成的？mounted。

2，vue路由的两种模式：

--hash: 这种模式在地址栏会以“#”显示，#后面的字符就称之为“hash”,用window.location.hash读取。特点：虽然在地址栏中，但是不会被http请求，#之前的会请求，之后的不请求。只是用来指导浏览器动作，对服务端安全无用，也不会重加载页面。

--histroy:这种模式前端的地址必须和后端发起请求的地址一致，否则会报错。可以在后端设置如果地址栏匹配不到，就返回同一个index.html页面。这个页面就是app所控制的那个页面。

3，父子之间和兄弟之间的传值：

--父传子：父（import子组件， 注册子组件，用标签的形式展示子组件并且绑定数据给子组件，返回真实数据）。子（用props接收父组件的数据，展示）

--子传父：子（绑定一个事件传递值，在方法里面用$emit传递值上去（其中有两个参数，第一个是父组件的事件方法名称，第二个是子组件要传递的数据），返回要提交的数据）。

　　　　　父（触发方法：绑定子组件传来的方法名=本组件的自定义方法名，自定义的方法里面传“子组件传来的数据”作为参数，赋值）

4，vue-cli新增自定义指令：

--全局(main.js)：

Vue.directive('dir2',{
  inserted(el){
    el.style.width='200px';
    el.style.height='200px';
    el.style.background='pink';
  }
})
用法：<div v-dir2>全局指令</div>
--局部（组件内）：
 directives:{
    dir1:{
      inserted(el){
        el.style.width='200px';
        el.style.height='200px';
        el.style.background='red';
      }
    }
  }
用法：<div v-dir1>某个组件</div>
5，vue如何自定义过滤器(定义一个过滤器，绑定表单，展示)
<template>
    <div>    
        <p>制作输入框过滤器</p>
     <input type="text" v-model="msg" />
     {{ msg| capitalize }}
    </div>
</template>
<script>
 export default {
     name:"",
    data(){
      return{
        msg:''
      }
    },
     filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
 }
 </script>
全局：
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})
2，制作文字筛选过滤器
 <p>{{filmsg | change}}</p>
 return {
     filmsg:'别人都说我是一个“可爱”的人，但是我不想成为一个 “可爱”的人，“可爱”有什么好的？我要成为捣蛋鬼哈哈'
}
filters: {
    change: function(filmsg) {
      return filmsg.replace(/可爱/g, '可恨')
    }
  }


6.什么是vue的计算属性？
答：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。
好处：①使得数据处理结构清晰；
②依赖于数据，数据更新，处理结果自动更新；
③计算属性内部this指向vm实例；
④在template调用时，直接写计算属性名即可；
⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；
⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

6，keep-alive 一个可以设置缓存的组件。

7，插槽

 vue.component('myslot',{template:'<div><slot>这是插槽默认信息，如果应用的地方有具体信息，此处被覆盖</slot></div>'})

用法：在需要的组件：<myslot></myslot>以标签的形式展示即可

如何设置多个插槽？具名即可

 vue.component('myslot',{template:'<div><slot name="header">这是插槽默认信息，如果应用的地方有具体信息，此处被覆盖

</slot><slot name="main">这是插槽默认信息，如果应用的地方有具体信息，此处被覆盖</slot><slot name="foot">这是插槽默认信息，如果应用的地方有具体信息，此处被覆盖</slot></div>'})

用法：在需要的组件：

 <myslot>
     <template v-slot:header><p>应用头部</p></template>
 </myslot>　　
 总结：跟注册新组件是一样的用法，先注册插槽、组件，再以标签的形式应用！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<runoob></runoob>
</div>

<script>
// 注册
Vue.component('runoob', {
template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
</body>
</html>

8，从浏览器地址栏输入url到显示页面的步骤：

url----交给dns 解析找到真正的ip地址--------向服务器提交请求-----服务器交给后台处理完成后返回数据------浏览器接收文件对文件进行语法解析，建立相应的内部数据结构dom---载入渲染页面，完成。

9，如何进行网站的性能优化：

项目到页面去考虑：对于整个项目，文件要简化，减少多余的文件，css放在同一个样式表。减少http请求，减少dns查询。对于vue项目，可以按需引入，不用全局引入，减少包的体积。

对于具体页面，结构要清晰，不要一直用div,可以用：header nva foot等标签语义化提高SEO。样式表在头部引入，脚本在底部引入。头部关键词的使用，每个页面的描述不要一样。图片可以用精灵图，img设置alt。最后，不要使用兼容性不好的标签，比如iframe 等。
10，jq与js

1， 插入元素：.after .before 与 .prepend .append 的区别：.after .before是在元素的之前后者之后插入， 而 .prepend .append 是在内容的之前或之后插入

     

2，移除元素：.remove 与 .empty

                                                            

 

3, $(document).ready() 是个什么函数？为什么要用它？

这个问题很重要，并且常常被问到。 ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器，jQuery帮你解决了跨浏览器的难题。

11，elemnet-ui:

安装：全局安装或者局部安装，局部安装的话就类似一个一个插件使用，安装babel……看官方文档。