前端复习面试题清单

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……看官方文档。

原文地址:https://www.cnblogs.com/lvqiupingboke-2019/p/13042144.html