A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

[学习交流] 前端vue面试总结

© 老旭谈IT 黑马粉丝团   /  2017-12-22 16:56  /  5621 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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() 方法,监控对数据的操作,从而可以自动触发数据同步。并且,由于是在不同的数据上触发同步,可以精确的将变更发送给绑定的视图,而不是对所有的数据都执行一次检测。
2vue表单元素双向绑定总结:
---注意,v-model设置input标签的时候有些坑存在=------面试被问过(自己百度对比答案)
l  Mockjs  和es6语法
开发文档相关:
1.文档开发技能学习资料
(1)vuejs框架 https://cn.vuejs.org/
(4)mockjs  http://mockjs.com/
备注说明:
前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文档
学习:
(1)Vue2 后台管理系统解决方案  https://segmentfault.com/a/1190000008582706
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
5Timeline-X 本例子涉及一些nodejs相关,大家只关注前端即可

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马