汉得面试题

最新推荐文章于 2024-05-24 12:37:34 发布

努力学习的俊猫

最新推荐文章于 2024-05-24 12:37:34 发布

阅读量2.7k

点赞数 5

分类专栏： web前端开发文章标签： vue.js javascript jquery

本文链接：https://blog.youkuaiyun.com/happy0224/article/details/109306494

版权

web前端开发专栏收录该内容

20 篇文章

订阅专栏

记汉得面试题

盒子模型

盒子一共有四个属性：分别为外边距（margin)、边框（border)、内边距（padding)、内容（content).

注：如何计算宽度
盒子总大小的计算公式为：盒子的实际高度X盒子的实际宽度。

元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

元素实际宽度（盒子的高度）=上边界+上边框+上填充+内容高度+下填充+下边框+下边界。

意思就是内容本身的宽高以外还要加上的盒子增加的宽高

jQuery和vue的区别

jQuery是使用选择器( $ )选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$(“lable”).val();,它还是依赖DOM元素的值。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

ajax和axios的区别

代码

ajax:

　　$.ajax({

　　　　url: '接口地址',

　　　　type: 'get', //或者post　　 请求类型

　　　　dataType: 'json',

　　　　data: { // 要发送的请求参数

　　　　　　'username' : 'hermit',

　　　　　　'password' : 'a123'

　　　　},

　　　　success : function (response) {

　　　　　　console.log(response); // 请求返回的数据

　　　　}

　　})

　axios:

　　axios({

　　　　url: '接口地址',

　　　　method: 'get', //或者 post    请求类型

　　　　responseType: 'json', //默认格式，如果就是 json 格式可以不写

　　　　data: {

　　　　　　'username' : 'hermit',

　　　　　　'password' : 'a123'

　　　　}

　　}).then( function(response){ // 请求正确返回的数据

　　　　console.log(response);

　　　　console.log(response.data);

　　}).catch( function(error) { // 请求错误返回的数据

　　　　console.log(error);

　　})

看代码区别不大

Axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
2 . AJAX
AJAX 是与服务器交换数据并更新部分网页的，在不重新加载整个页面的情况下。

其实jQuery 将请求技术进行了封装变成了 ajax , 而通过 promise 又把 ajax 进行封装就成了 axios。
在现在的前端 mvvm 模式下 axios 更适合于数据请求。

mvvm

MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller（MVC）模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的最重要一环。
在这里插入图片描述

Vue的生命周期函数

什么是生命周期？
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期
生命周期钩子=生命周期函数=生命周期事件
主要的生命周期函数分类
- 创建期间
  1）beforeCreate:实例刚在内存中被创建出来，此时还没有初始化好data和methods属性。
  2）created:实例已经在内存中创建好了，此时data和methods已经创建好了，此时还没有开始编译模板
  3）beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面上
  4）mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中
- 运行期间
  1）beforeUpdate:状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
  2）updated:实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了
- 销毁期间
  1）beforeDestroy:实例销毁之前调用，在这一步，实例仍然完全可用
  2）destroyed:Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
  
  下面解释一一对应图中的数字