前端——面试(东华软件)

1.自我介绍
2.Vue组件间传值

  • 父—子:props
    • 父组件:绑定一个属性: v-bind:mag (缩写:mag)
    • 子组件:props:[‘mag’]
  • 子—父:子组件通过事件向父组件传递数据
    • 父组件:自定义一个事件 @trans = getUser;
    • 子组件:input v-model=’username’ @change = setUser
    methods{
    	setUser:function() {
    	     this.$emit(‘trans’,this.username)
    	     // 父组件的事件  子组件的数据
    	}
    }
    
  • 兄弟之间:通过中央事件总线传值,bus.js文件
    import Vue from 'vue'
    export default new Vue()
    import Bus from 'bus.js'
    Bus.$on(‘val’,数据)
    Bus.$emit(‘val’,数据)
    
  • 非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。
    • 在工程src目录下新建一个Pub.js文件
      import Vue from "vue"
      export default new Vue()
    • 在各组件中引入Pub.js文件import Pub from "../Pub.js"
    • 在A组件中通过$emit 调用自定义函数并且传参
      Pub.$emit('namefn',"str1","str2",……)
    • 在B组件中通过$on响应事件并接受参数
      Pub.$on('namefn',(str1,str2,……) =>{ console.log(str1+"就是A组件中定义的数据") })
    • Vuex:
      • 如果想要把数据映射过来就用到 mapState
      • 如果想要把方法映射过来就是用mapMutations

3.v-if和v-show的区别

  • 区别
    • v-if: 相当于真正的条件渲染,当条件为假,元素不会被渲染。不是使用CSS来改变元素,而是操作DOM,动态的删除和添加元素
    • v-show :不管初始条件是什么,第一次的时候元素总被渲染。之后的切换相当于 display:none 和 display:block 的切换。
  • 适用场景
    • v-if : 适用于在运行时很少改变条件,不需要频繁切换条件的场景
    • v-show : v-show 则适用于需要非常频繁切换条件的场景。

4.Vue页面之间传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <!--    1.引入包-->
    <script src="./lib/vue-router-3.0.1.js"></script>
    <style>
        /*路由高亮显示:
        1.默认给的类名
        2.自己修改类名
        */
        .router-link-active, .myActive {
            color: #0f0f0f;
            font-weight: 800;
            font-style: italic;
            font-size: 20px;
            text-decoration: underline;
            background-color: lightblue;
        }
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(80px);
        }
        .v-enter-active,
        .v-leave-active {
            transition: all 0.8s ease;
        }
    </style>
</head>
<body>
<div id="app">
    <!--vue-router提供的标签,专门用来当做占位符,匹配到的组件就会展示在router-view中-->
    <!--<a href="#/login">登录</a>
    <a href="#/register">注册</a>-->
    <!-- 默认渲染a标签,改变就是使用tag='标签名' 改变-->

    <!-- 传参第一种:如果在路由中,使用查询字符串,给路由传递参数,不需要修改path   -->
    <!--<router-link to="/login?id=10">登录</router-link>
    <router-link to="/register">注册</router-link>-->
    <!--传参第二种:    -->
    <router-link to="/login/10">登录</router-link>
    <router-link to="/register">注册</router-link>

    <transition mode="out-in">
        <router-view></router-view>
    </transition>
</div>
<script>
    //组件的模板对象
    var login = {
        //第一种传参:this.$route.query.id
        // template:'<h1>登录组件---{{$route.query.id}}</h1>',
        //第二种传参:this.$route.params.id
        template:'<h1>登录组件---{{$route.params.id}}</h1>',
        created(){
            console.log(this.$route);
            //第一种传参
           // console.log(this.$route.query.id);
            //第二种传参
            console.log(this.$route.params.id);
        },
    };
    var register = {
        template:'<h1>注册组件</h1>'
    };
    //2.创建路由规则对象
    //当引入vue-router包之后,在window全局对象中就有一个路由构造函数VueRouter
    var routerObj = new VueRouter({
        // 路由匹配规则
        routes:[
            //每个路由规则都是一个对象,必须有两个属性:
            //path:监听的路由地址
            //component:匹配到对应路由,则展示对应component的组件
            //component的属性中必须是一个属性模板对象,不能是组件的引用名
            //可以使用,但是不推荐,不同路径对应相同组件
            // { path: '/', component: login},
            //客户端重定向,与Node中的redirect完全不一样
            { path: '/', redirect: '/login'},
            //第一种:不需要修改参数,直接传入即可
            /*{ path: '/login', component: login},
            { path: '/register', component: register},*/

            //第二种:可以传递多个参数
            { path: '/login/:id/:name', component: login},
            { path: '/register', component: register},
        ],
        //修改类为自己的
        linkActiveClass:'myActive'
    });
    var vm = new Vue({
        el:'#app',
        data:{
        },
        methods:{
        },
        //3.将路由规则对象注册到VM实例对象上,用来监听url地址的变化
        router: routerObj
    });
</script>
</body>
</html>

5.Vue自定义指令

  • 全局
    • 参数一:指令名称(定义时不需要加v-,调用时需要加v-)
    • 参数二:是对象
    Vue.directive('focus',{
        //以下三个函数的第一个参数永远是:el
        //1.指令绑定到此元素上时,会立即执行函数bind,只执行一次
        //注意:在元素刚绑定了指令的时候,还没有插入到DOM中,调用focus函数没有作用
        bind:function(el,binding){
            // el.focus();
            // el.style.color=binding.value;
        },
        //2.元素插入到DOM中时,会立即执行函数inserted,只执行一次
        inserted:function (el) {
            //focus的使用必须是元素插入DOM中才可以起作用
            el.focus();
        },
        //3.当VNode更新时,会立即执行updated函数,可以触发多次
        updated:function (el) {
    
        }
    });
    
  • 局部
    directives:{
        'color':{
            //以下三个函数的第一个参数永远是:el
            //1.指令绑定到此元素上时,会立即执行函数bind,只执行一次
            //注意:在元素刚绑定了指令的时候,还没有插入到DOM中,调用focus函数没有作用
            bind:function(el,binding){
                // el.focus();
                el.style.color=binding.value;
            }
        },
        //一般使用最多的是bind和update,以下的使用同时使用这两个函数
        'fontsize':function (el,binding) {
            el.style.fontSize=parseInt(binding.value)+'px';
        }
    }
    

6.Vue如何实现页面无刷新更新

  • Hash模式
  • 路由重定向

7.Vue页面跳转子路由

  • 全局
//当引入vue-router包之后,在window全局对象中就有一个路由构造函数VueRouter
var routerObj = new VueRouter({
    // 路由匹配规则
    routes:[
        //每个路由规则都是一个对象,必须有两个属性:
        //path:监听的路由地址
        //component:匹配到对应路由,则展示对应component的组件
        //component的属性中必须是一个属性模板对象,不能是组件的引用名
        //可以使用,但是不推荐,不同路径对应相同组件
        // { path: '/', component: login},
        //客户端重定向,与Node中的redirect完全不一样
        { path: '/', redirect: '/login'},
        { path: '/login', component: login},
        { path: '/register', component: register},
    ],
    //修改类为自己的
    linkActiveClass:'myActive'
});
//将路由规则对象注册到VM实例对象上,用来监听url地址的变化
router: routerObj,
  • 子路由
var router = new VueRouter({
    routes:[
        {
            path: '/account',
            component: account,
            //设置子路由,path前面不需要'/' 根路径
            children:[
                {path:'login',component:login},
                {path:'register',component:register},
            ]
        },

    ]
});

8.MVVM模式

  • MVVM分为Model、View、ViewModel三者。
  • Model:代表数据模型,数据和业务逻辑都在Model层中定义;
  • View:代表UI视图,负责数据的展示;
  • ViewModel:负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作;
  • 解释:Model和View并无直接关联,而是通过ViewModel来进行联系的,Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新,View中由于用户交互操作而改变的数据也会在Model中同步。这种模式实现了Model和View的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作dom。

9.Vue的双向数据绑定

  • vue.js是采用数据劫持结合发布者 - 订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

10.使用JS如何实现数据的双向数据绑定

  • Object对象的defineProperty属性,重写data的set和get函数来实现的
<body>
    <input type="text" id="a">
    <div id="b"></div>  
    <script>
        var obj = {};
        Object.defineProperty(obj,'hello',{
            set:function (newVal) {
                document.getElementById('a').value = newVal;
                document.getElementById('b').innerHTML = newVal;
            },
        });
        document.addEventListener('keyup',function (e) {
            obj.hello = e.target.value;
        })
    </script>
</body>
  • 作用:定义对象的属性和赋值,修改已经存在的属性
  • 语法:Object.defineProperty(需要定义属性的当前对象, 当前需要定义的属性名, 属性描述符)
  • eg
    const user = {}
    Object.defineProperty(user, 'name', {
      value: 'cc',
      enumerable: true  // 该属性是否可枚举
    })
    console.log(user);	// {name: "cc"}
    
  • 属性描述符:
    configrable 描述属性是否配置,以及可否删除
    enumerable 描述属性是否会出现在for in 或者 Object.keys()的遍历中
  • 数据描述符:writable是否可修改,默认false
    属性名 默认值
    value undefined
    get undefined
    set undefined
    writable false
    enumerable false
    configurable false
  • 存取描述符:getter setter
  • 扩展
    • Object.preventExtensions(…):如果你想禁止一个对象添加新属性并且保留已有属性,就可以使用
    • Object.seal():会创建一个密封的对象,这个方法实际上会在一个现有对象上调用object.preventExtensions(…)并把所有现有属性标记为configurable:false。不可以添加新属性,不可以冲洗配置或删除任何原有属性,可以修改属性
    • Object.freeze()会创建一个冻结对象,这个方法实际上会在一个现有对象上调用Object.seal(),并把所有现有属性标记为writable: false,这样就无法修改它们的值。

11.什么场景下使用vuex

  • 涉及非父子组件之间跨组件共享数据
  • 组件基于数据创建,多个组件使用这个数据,各组件之间的联系不可预料
  • 同一个数据在不同页面控制某个属性,且多个页面都能修改这个数据
  • 组件被销毁:组件是一个弹框,输入后数据要保存
    • 可以直接通过$store.state来调用,通过commit()来修改值;
    • 也可以在created的时候,读取存在state里面的值,在destroyed的时候,写回 state;一般处理需要数据和组件分离的项目时使用Vuex

12.axios中如何设置拦截器

  • 请求拦截器
axios.interceptors.request.use(config=>{
    //发送请求前做的事
    return config
},err=>{
    //请求错误时做的事
    return Promise.reject(err)
})
  • 响应拦截器
axios.interceptors.response.use(res=>{
    //请求成功对响应数据做处理
    return res
},err=>{
    //响应错误时做的事
    return Promise.reject(err)
})
  • 取消拦截器
 let interceptor = axios.interceptors.request.use(config=>{
   return config
 });
 axios.interceptors.request.eject(interceptor)   
  • 拦截器不会给axios绑定,直接给实例绑定,不使用catch,进行统一错误处理
let instance = axios.create({});
instance.interceptors.request.use(config=>{
  return config
},err=>{
  //统一错误处理
  $("#err").show();
  setTimeout(()=>{
    $("#err").hide();
  },1000);
  return Promise.reject(err)
});
instance.interceptors.response.use(res=>{
  return res
},err=>{
   //统一错误处理
   $("#err").show();
   setTimeout(()=>{
     $("#err").hide();
   },1000);
   return Promise.reject(err)
});
  • 并发请求
import axios from 'axios'
 export default {
   created() {
     //请求多个请求
     axios.all([
       axios.get('/a.json'),
       axios.get('/b.json')
     ]).then(
       //分割不同请求的返回值
       axios.spread((aRes,bRes)=>{
         console.log(aRes);
         console.log(bRes);
       })
     )
   }
 }
  • 取消请求
    import axios from 'axios'
    let source = axios.CancelToken.source();
    axios.get('/db.json',config=>{
      cancelToken:source.token
    }).then(res=>{
      console.log(res)
    }).catch(err=>{
      console.log(err)
    });
    //取消请求(message可选)
    source.cancel('cancel')

13.如何优化vue项目

14.http中hash和history的区别

  • Hash :地址栏URL中的#符号 #/index window.location.hash
  • History:在host之后直接添加斜线和路径请求 /index,window.location.pathname
  • 区别
    • 是否向后端传参 :Hash的#后面的内容不会包含在请求中,只是被前端浏览器利用刷新网页;History是看到请求的url为完整的url,请求后端
    • 是否刷新页面:Hash不刷新;History刷新
    • 方法:Hash:onhashchange History:pushState replaceState

15.http的请求方法以及含义

  • GET:获取资源
  • POST:提交信息
  • PUT:传输文件
  • DELETE:删除文件
  • CONNECT:用隧道协议建立连接
  • TRACK:跟踪路径
  • OPTIONS:询问支持的方法
  • HEAD:和GET方法类似,只不过只返回请求头部

16.Get和Post的区别

  • get方法的参数在url中,post方法参数在request body中
  • get方法参数是裸露的,相比较而言,post更安全
  • get方法的参数有长度限制,post方法的参数没有限制。
  • get方法一次将header和data发送,返回200,只产生一个TCP数据包。post方法先发送header,返回100,再发送data,返回200,产生二个TCP数据包。但是post方法有特例,Firefox就只发送一次。
  • get方法支持一种url编码,post支持多种编码格式,json,text/application
  • get请求会主动缓存,post请求不会
  • GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。

17.Get请求有body吗?

  • 在http规范任何方法都能发送请求实体。他们报文时没有任何区别的,但是在浏览器中,因为XMLHttpRequest规范的限制,浏览器中ajax发送的http请求,get,delete请求不能携带实体。

18.http常用请求头

  • Accept 能正确接收的媒体类型
  • Accept-Charset 能正确接收的字符集
  • Accept-Encoding 能正确接收的编码格式列表
  • Accept-Language 能正确接收的语言列表
  • Expect 期待服务端的指定行为
  • From 请求方邮箱地址
  • Host 服务器的域名
  • If-Match 两端资源标记比较
  • If-Modified-Since 本地资源未修改返回304(比较时间)
  • If-None-Match 本地资源未修改返回304(比较标记)
  • User-Agent 客户端信息
  • Max-Forwards 限制可被代理及网关转发的次数
  • Proxy-Authorization 向代理服务器发送验证信息
  • Range 请求某个内容的一部分,范围请求
  • Referer 表示浏览器所访问的前一个页面
  • TE 传输编码方式

19.http请求报文和响应报文

  1. HTTP请求报文由3部分组成(请求行+请求头+请求体)
  • 请求行
    • 请求方法,如GET和POST。
    • 请求对应的URL地址,它和报文头的Host属性组成完整的请求URL。
    • 是协议名称及版本号。
  • 请求头
    • 是HTTP的报文头,包含若干个属性,格式为“属性名:属性值”,服务端据此获取客户端的信息。与缓存相关的规则信息,均包含在header中
  • 请求体
    • 是报文体,它将一个页面表单中的组件值通过param1=value1&param2= value2的键值对形式编码成一个格式化串,它承载多个请求参数的数据。报文体可以传递请求参数,同样请求URL也可以通过类似于“/chapter15/user.html?param1=value1&param2=value2”的方式传递参数。
  • HTTP请求报文头属性说明
    • Accept:请求报文告诉服务端,客户端接受什么类型的响应。如Accept:text/plain报文头告诉服务端,客户端能够接受的响应类型仅为纯文本数据。
    • Referer: 表示这个请求是从哪个URL过来的。
    • Accept-Language:告知服务器客户端能够处理的语言集(指中文或英文等),以及语言集的相对优先级。
    • User-Agent:用户代理,告知服务器客户端浏览器的类型、版本等信息,以便服务器更好的提供服务。
    • Content-Type:表明发送数据流的类型,服务器根据编码类型使用特定的解析方式获取数据。
    • Host: 用于区分同一IP上的不同虚拟主机。
    • Content-Length: 标识HTTP消息实体的传输长度,单位字节。
    • Connection: 用于管理持久连接,HTTP/1.1, 版本的默认连接都是持久连接,想明确断开连接时,则指定Connection 的值为 Close。
    • Cache-Control:缓存控制,比如是否需要缓存或要缓存多久等。
    • Cookie:客户端Cookie通过这个报文头属性传给服务端。服务端如何确定客户端的多个请求隶属哪个Session?通过请求报文头Cookie属性的jsessionid的值来确定。(也可以通过重写URL将ID附带在URL的后面)。
  1. HTTP的响应报文也由三部分组成(响应行+响应头+响应体)
  • 响应行: HTTP/1.1 200 OK
    • 报文协议及版本;
    • 状态码及状态描述;
  • 响应头
    • 响应报文头,也是由多个属性组成;
  • 响应体
    • 响应报文体,真正需要的数据。
  • HTTP响应报文头一些属性说明
    • Server:告知客户端当前服务器上安装的 HTTP 服务器应用程序的信息。
    • Transfer-Encoding:规定了传输报文主体时采用的编码方式。HTTP/1.1 的传输编码方式仅对分块传输编码有效。
    • Date:创建 HTTP 报文的日期和时间。

19.HTTP常见的状态码:

  • 301:永久重定向;
  • 302:临时重定向;
  • 400:请求报文中有语法错误;
  • 401:发送的请求要有http的验证信息;
  • 403:无权访问;拒绝访问
  • 404:没有对应的资源;
  • 500:服务器执行请求时发生错误;
  • 503:服务器停机或正在维护。

20.Link和@import的区别

  • link 属于 html 标签,而@import 是 css 提供的
  • 页面被加载时,link 会同时被加载,而@import 引用的 css 会等到页面加载结束后加载。
  • link 是 html 标签,因此没有兼容性,而@import 只有 IE5 以上才能识别。
  • link 方式样式的权重高于@import 的。

21.CSS动画的使用

  • Animation:动画名称 动画时间 动画曲线 何时开始
    @keyframes 名字 { }
  • transition:过渡动画

22.CSS中的伪类有哪些?

  • 链接伪类:link visited hover active
  • 结构伪类:first-child last-child nth-child(n) nth-last-child(n)
    N: even odd n 2n等
  • 目标伪类::target { }

23.Position的属性值以及区别

  • 固定定位 fixed:元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。 Fixed 定位使元素的位置与文档流无关,因此不占据空间。 Fixed 定位的元素和其他元素重叠。
  • 相对定位 relative:如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
  • 绝对定位 absolute: 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于。 absolute 定位使元素的位置与文档流无关,因此不占据空间。 absolute 定位的元素和其他元素重叠。
  • 粘性定位 sticky: 元素先按照普通文档流定位,然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。而后,元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
  • 默认定位 Static: 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
  • inherit: 规定应该从父元素继承 position 属性的值

24.JS中箭头函数和普通函数的区别

  • 箭头函数中没有this
  • 箭头函数中不可以使用arguments
  • 箭头函数不能new,没有自己的prototype
  • 箭头函数不可使用yield,不能用作Generator函数异步编程

25.ES6新特性

  • let var const
  • 数组扩展:includes
  • 函数扩展:箭头函数和rest参数
  • 字符串扩展:repeat(number)平铺函数,一个字符输出number次
  • 数据类型:symbol,声明独一无二的值
  • 数据结构:
    • Set:类似数组,但是元素是唯一的,不允许重复的
    • Map:类似对象,之前对象的键只能是字符串,map类型的对象对键没有要求
  • class的概念引入=
  • promise

26.cookies和session的区别,都是会话技术

  • cookie数据存放在客户的浏览器上,session数据放在服务器上。
  • cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
    考虑到安全应当使用session。
  • session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能,考虑到减轻服务器性能方面,应当使用COOKIE。
  • 单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie

27.如何保存用户的信息,下次不用登陆

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值