vue面试题

一、vue父子组件之间的传值:

简单来说,子组件通过props方法接受父组件传来的值,子组件通过$emit方法来向父组件发送数据。

二、vue生命周期函数:

  1.  beforeCreate
  2.  created
  3.  beforeMount
  4.  mounted
  5.  beforeUpdate
  6.  updated
  7.  beforeDestroy
  8.  destroyed

ajax操作是在monted生命周期中完成的。

 三、vue自定义指令:

1.创建局部指令

var app = new Vue({

    el: '#app',

    data: {    
    },

    // 创建指令(可以多个)

    directives: {

        // 指令名称

        dir1: {

            inserted(el) {

                // 指令中第一个参数是当前使用指令的DOM

                console.log(el);

                console.log(arguments);

                // 对DOM进行操作

                el.style.width = '200px';

                el.style.height = '200px';

                el.style.background = '#000';

            }

        }

    }
})

  

// 2 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
3.指令的使用
<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

四、vue动态路由传值:

1.

//   直接调用$router.push 实现携带参数的跳转
     this.$router.push({
          path: `/describe/${id}`,

需要对应路由配置如下:

{
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }
//获取参数方法 this.$route.params.id 

2.

this.$router.push({
          name: 'Describe',
          params: {
            id: id
          }
 })

路由配置:

//这里可以添加:/id 也可以不添加,不添加数据会在url后面显示,不添加数据就不会显示
  {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }
//获取参数
this.$route.params.id

3.

//query传递的参数会显示在url后面?id=?
  this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })

对应路由配置:

{
     path: '/describe',
     name: 'Describe',
     component: Describe
   }
//获取参数 this.$route.query.id 注意:在子组件中 获取参数的时候是$route.params 而不是$router 这很重要~~~

五、axios和ajax的区别:

1.区别 axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。 简单来说: ajax技术实现了网页的局部数据刷新,

axios实现了对ajax的封装。 axios是ajax ajax不止axios。

Ajax:
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

axios:
用于浏览器和node.js的基于Promise的HTTP客户端
1. 从浏览器制作XMLHttpRequests
2. 让HTTP从node.js的请求
3. 支持Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 取消请求
7. 自动转换为JSON数据
8. 客户端支持防止XSRF

2.优缺点: ajax: 本身是针对MVC的编程,不符合现在前端MVVM的浪潮 基于原生的XHR开发,XHR本身的架构不清晰,

已经有了fetch的替代方案 JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务

axios: 从 node.js 创建 http 请求 支持 Promise API 客户端支持防止CSRF。

 

posted @ 2020-06-16 10:56  两毛钱的月色  阅读(333)  评论(0编辑  收藏  举报