ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端复习面试题清单

2020-06-04 10:52:08  阅读:190  来源: 互联网

标签:el 面试题 复习 style value 组件 清单 数据 页面


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


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



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

7,

标签:el,面试题,复习,style,value,组件,清单,数据,页面
来源: https://www.cnblogs.com/lvqiupingboke-2019/p/13042144.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有