黑马程序员技术交流社区
标题: 前端vue面试总结 [打印本页]
作者: 老旭谈IT 时间: 2017-12-22 16:56
标题: 前端vue面试总结
Vue基础知识总结：基础：l MVVM模式，实际上是三个单词，view视图，view-model相当于是模拟器，model数据值；
l 创建一个vue
vue var vm = new Vue({
el:”#app”,
data:{
……
}
})；
l V-text/v-html，后者常用，用来渲染带标签的数据信息；
l V-on用来绑定事件 v-on:click =”change()”; 简写方式 @click=”change”;
l V-bind 绑定可变的属性值，src,style,link,class等；简写方式 ：src = “..”;
l V-model监听文本输入框的双向绑定值变化（注意，在使用v-model的时候有一个坑）
l V-if/v-else 处理显示和隐藏，使用变量来判断控制；
l V-for 动态循环生成数据值
<liv-for="item in list">{{item}}</li>
<tr v-for="(item,index) inpersons">
<td>{{index}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
创建vue的时候，el对应id值，data中用来写声明数据值，methods中用来处理自定义方法，created生命周期钩子中用来初始化自定义方法；
l 过滤器的实现有两种方式：
l 私有化的方式：
var vm1 = new Vue({
el:'#app1',
data:{
msg1 : "I AM A Good MAN"
},
filters:{
toLC:function(input){
return input.toLowerCase()
}
}
})
<div id='app2'>
<template>
{{msg2 | toLC}}
</template>
</div>
========
l 共有的实现方式：
//全局，公共过滤器
Vue.filter('toLC',function(input){
return input.toLowerCase()
})
//
//组件1对应的Vue实例
var vm1 = new Vue({
el:'#app1',
data:{
msg1 : "I AM A Good MAN"
}
})
路由：Vue-router
1,创建一个子组件 <template> html代码</template>
使用exports default{
……
} 输出子组件；
2,引包，引入组件；
3,创建路由并注册号组件及跳转配置
var router = new VueRouter({
routes : [ //这个routes是固定写法，表示，可以配置很多个路由
{path:'/newsList/:newsId',component:newsListComponent},带参数值的
{path:'/goodsList',component:goodsListComponent}
})
----页面部分的设置：
页面路由跳转以及传值：（如果传值变化的值，to前面需要加：---表示绑定变化值）
<router-link to='/newsList/15'>新闻列表</router-link>
模板占位替换：
<router-view></router-view>
Vue-resource请求：这里有三种方式：
Get:
new Vue({
el:'#app',
methods : {
getLogin:function(){
//利用vue-resource发送请求
var url ='http://127.0.0.1:3000/login?username=zhangsan&password=123';
this.$http.get(url).then(function(response){
console.log(response.body)
},function(error){
})
}
}
})
post：---POST请求最特别的，参数写在括号里面，还需要设置emulateJSON:true
new Vue({
el:'#app',
methods : {
getLogin:function(){
//利用vue-resource发送请求
var url ='http://127.0.0.1:3000/login?username=zhangsan&password=123';
this.$http.post(url,{….},{…}).then(function(response){
console.log(response.body)
},function(error){
})
}
}
})
JsonP :------和get请求一样，只需要修改请求方法：this.$http.jsonp(url);
Webpack的介绍：详见链接：---重要
MUI Mint-UI 移动端的组件库（swipe，九宫格，指示器indicator）l ElementUI PC端的组件库
VUE常用的开源项目库汇总：(面试会问你用过哪些插件)
复用抽取子组件：1，创建子组件，
<template> html代码</template>
2，输出exports default{
//设置一个props属性：props:”commentid”;=====是需要传值的时候才设置这个
}
3,-------在父组件中
01，引入子组件 import subcomment from ‘./…..’;
02, 在 js代码中设置components:{subcomment};
03,在html页面中使用 <subcomment :commented=”…..”></subcomment>
(需要传值的时候才设置，可以设置id值，也可以是设置传递的对象数组)
=======这里的传值是父组件向子组件传值；
Vue路由的跳转有两种方式：
1，第一种是声明式的：
<router-link to='/newsList/15'>新闻列表</router-link>
2，第二种是使用的编程式的跳转：push
第一种方式/goods/goodscomment/参数
goodsinfo.vue
this.$router.push({ name: 'goodscomment', params: { goodsId:this.$route.params.goodsId }})
main.js中
{name:'goodscomment',path:'/goods/goodscomment/:goodsId',component:goodscomment}
最终传值:/goods/goodscomment/88
接收值(goodscomment.vue)
```
{{this.$route.params.goodsId}}
```
第二种方式 /goods/goodscomment?goodsId=88
goodsinfo.vue
```
this.$router.push({path: '/goods/goodscomment',query: { goodsId: this.$route.params.goodsId }})
```
main.js
```
{name:'goodscomment',path:'/goods/goodscomment',component:goodscomment}
```
最终传值:/goods/goodscomment?goodsId=88
接收值(goodscomment.vue)
```
{{this.$route.query.goodsId}}
```
路由中的返回按钮：this.$router.go(-1) created(){
//console.log(this.$route.path)
//this.$route.path 只会打印当前正在展示的组件的路由
if (this.$route.path.includes('home')||
this.$route.path.includes('member')||
this.$route.path.includes('shopcart')||
this.$route.path.includes('settings')){
this.isShow=false
}else{
this.isShow=true
}
},
methods:{
//返回
goback(){
this.$router.go(-1)
}
},
watch:{
'$route':function (newValue,oldValue) {
//console.log(newValue)
if(newValue.path.includes('home')||
newValue.path.includes('member')||
newValue.path.includes('shopcart')||
newValue.path.includes('settings')){
this.isShow=false
}else{
this.isShow=true
}
}
}
子组件向父组件传值：1，子组件做的事件： 声明事件并传值this.$emit（“numberchange”,this.count）;
参数：事件名称，要传的值；
2，父组件中要做的事情：注册与声明中同名的方法，写好对应的回调函数来接收传递过来的值；（自己手动在回调函数中写形参来接收值）
非父子组件传值：1，传值一个公共的vue中央调度对象;
2,发送方，利用vue对象声明$emit事件并传值 bus.$emit(“numberchange”,data);
3,接收方，利用vue对象来执行$.on来注册与声明中同名的方法，并使用对调方式来接收传递的数据值（自己在回调函数中加形参来接收值）
公共的子组件有：轮播，评论列表，导航，商品购物车部分等；
购物车部分---自己研究1，执行点击事件购物车的加减；
2，执行点击事件的时候，本地化localstorage的数据存储
3，购物车页面的数据展示：---调用接口
读取本地数据---合并数据，重新生成参数，最后发请求；
4，删除每一行商品的时候：
01，购物车数量减少；
02，本地存储的数据删除掉；
03，列表中的哪一行清除；
04，重新统计价格变化和数量----重新调用方法；
Vue的生命周期：
跳转页面的时候干掉当前的，回退的时候再次获得重生；
生命周期的完整流程：
vueX 入门：面试有被问到
VUE进阶学习：https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html
vue中的坑：1，如何监控双向绑定的数据值变化：watch方法
VueJS 则使用 ES5 提供的Object.defineProperty() 方法，监控对数据的操作，从而可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。
2，vue表单元素双向绑定总结：
---注意，v-model设置input标签的时候有些坑存在=------面试被问过（自己百度对比答案）
l Mockjs 和es6语法
开发文档相关：1.文档开发技能学习资料
备注说明：
前5项必须要掌握，第6项熟悉和会使用就好了，但后期复杂业务，若需要用到的时候，还是需要去掌握的！
面试常问问题：l Vue问的最多的是组件传值，webpack,gulp工具 ，生命周期，双向绑定VueX等；
l 什么是闭包，闭包的作用，闭包的坏处，什么是内存泄露；
l 原型链，作用域链；
l 单例，工厂模式，继承的实现方式
l IE的兼容性写法；
l 移动端，针对ios,安卓系统，不同机型如何做适配；
l 网站的高并发如何优化处理；
l 冒泡排序，查找字符串中出现最多的那个，数组的倒序，数组去重；
l 工作流程，如何和其他同事做配合，部门人员组成情况；
l 简历中第一个项目情况介绍，一般简历上有什么内容面试官就会问什么
l 手机端多出来的1px像素怎么处理；
l Cookie和localstorage的区别---（主要是后者不会向服务器发送请求；
l H5,css3的常用属性。
l ES6箭头函数和ES5普通函数的最大区别？
l 用到过哪些jquery插件，怎么封装
l Iframe的使用
l Jsonp的原理
l Jquery事件绑定的几种方式，有哪些区别；
l Bootstarp栅格系统的原理
l Bootstrap单独功能怎么进行分割，以及什么是定制；
l Mvc mvvm的解释；
l Call,apply有什么区别
l JQuery基础知识，选择器，方法等；
l Ajax 相关的；
l 项目中遇到什么问题---怎么解决的，比如说vue项目
l Git和svn的使用以及区别
拓展知识：
扩展阅读：
2.Assp前端开发目录和开发知识点
3.视频类学习资料
（1）vuejs2视频开发
备注说明：
请工作之外时间，去看看视频里面的东西，视频中请自己看vuejs2相关的，不要去看vuejs1的
（2）慕课网
备注说明：
请工作之外时间，去看看视频里面的东西，视频中选择自己需要加强和完善的视频去看看，这个里面的资源很优质，值的去看！
其它：1.前端项目开发进度文档的自我管理
备注：要求每日必须对自己的工作做整理和归纳，同时这也体现表现自己的开发进度，也方便未来日后的绩效卡的填写，作为参考资料。
2.Vue 2.0 的建议学习顺序
3.前端资源统计整理
其他demo文档
学习：
file:////Users/chenjian/Library/Group%20Containers/UBF8T346G9.Office/msoclip1/01/clip_image002.gif
file:////Users/chenjian/Library/Group%20Containers/UBF8T346G9.Office/msoclip1/01/clip_image004.gif（3）低仿饿了么H5-纯前端Vue版+手把手教学
file:////Users/chenjian/Library/Group%20Containers/UBF8T346G9.Office/msoclip1/01/clip_image006.gif
（4）模仿猫眼电影制作的webapp
file:////Users/chenjian/Library/Group%20Containers/UBF8T346G9.Office/msoclip1/01/clip_image008.gif
（5）Timeline-X 本例子涉及一些nodejs相关，大家只关注前端即可
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |