前端面试
和面试有关的
香菜xc
这个作者很懒,什么都没留下…
展开
-
盒子水平垂直居中
1、flex布局 给其父盒子加上以下样式 display: flex; justify-content: center; align-items: center;2、绝对定位 给该盒子加上以下样式,如果是相对父盒子居中,给父盒子添加相对定位样式 position: absolute; left: 50%; top: 50%; transform: translate(-50%,...原创 2021-12-26 19:59:05 · 177 阅读 · 0 评论 -
响应式布局
响应式布局是指同一页面在不同屏幕尺寸下有不同的布局优点:面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题缺点:仅适用布局、信息、框架并不复杂的部门类型网站 兼容各种设备工作量大,效率低下 代码累赘,会出现隐藏无用的元素,加载时间加长 其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构,会出现用户混淆的情况...原创 2021-12-26 19:49:02 · 174 阅读 · 0 评论 -
new操作符干了啥
创建一个新的空对象 让这个空对象的__proto__指向其构造函数的原型prototype 将创建的对象和this进行绑定,如果构造函数没有显式的返回值,隐式返回this对象原创 2021-12-20 12:07:51 · 183 阅读 · 0 评论 -
构造函数与原型---原型链
function Star(name, age) { this.name = name; this.age = age; this.sing = function () { console.log(this.name + '会唱歌'); } } var ht = new Star('河图', 3); //每一个构...原创 2021-09-19 20:54:27 · 322 阅读 · 0 评论 -
watch和computed
watch:一个数据影响多个数据,当监听的数据发生变化时都会执行回调进行后续操作。需要深度监听对象里的属性需要打开deep:truecomputed:多个数据影响一个数据,是计算属性,依赖其他属性,有缓存,只有它以来的属性发生变化才会重新计算在数据变化时执行异步或者开销大的操作时,使用watch...原创 2021-12-19 19:20:36 · 112 阅读 · 0 评论 -
Vue内置指令
v-once 只渲染一次,包括该元素或组件下的所有子节点,首次渲染后,不会再因数据变化重新渲染,视为静态内容 v-cloak 该指令保持在元素上直到关联实例结束编译--解决初始化慢导致页面闪动的最佳实践 v-bind 绑定属性,动态更新html元素上的属性 v-on 监听dom事件 v-html 相当于innerHTML v-text 相当于innerText v-model value和input的语法糖 v-if/v-原创 2021-12-19 18:55:31 · 87 阅读 · 0 评论 -
display、visibility和opacity
diplay:none visibility:hidden opacity:1 占位 不占 占 占 子元素是否继承 不会,父元素不存在,子元素也不会显示 会,可以通过visibility:visible来显示子元素 会,但不能设置子元素opacity:0来显示 事件绑定 在页面不存在了,无法触发 不会 可以触发 过渡动画 无效 无效 有效 ...原创 2021-12-19 18:38:36 · 96 阅读 · 0 评论 -
生命周期--钩子函数
<template> <div> <p>学习生命周期 - 看控制台打印</p> <p id="myP">{{ msg }}</p> <ul id="myUL"> <li v-for="(val, index) in arr" :key="index">{{ val }}</li> </ul> <button @click="a.原创 2021-11-18 20:09:22 · 483 阅读 · 0 评论 -
MVC和MVVM
MVC:Controller负责将Model的数据用View显示出来,即将Model的数据赋值给ViewMVVM:数据绑定:将数据转化为视图 DOM事件监听:将视图转化为数据区别:MVVM实现了View和Model的自动同步,当Model的属性发生变化时,不用手动操作DOM元素来改变View,改变Model的属性后,相对应的视图也会发生改变。 MVVM比MVC精简,简化了业务与界面的依赖,解决了数据频繁更新的问题,不需要用选择器操作DOM元素。在MVVM中,...原创 2021-12-19 14:42:41 · 308 阅读 · 0 评论 -
vue和jQuery的区别
jquery是使用选择器$选取dom对象,对其进行赋值取值事件绑定等操作,数据和界面是在一起的 jquery频繁操作dom,vue直接操作数据 vue支持双向绑定MVVM,vm能感知到view变化通知数据改变,反之model发生改变也会影响view vue支持组件化,提高了开发效率...原创 2021-12-19 10:41:28 · 1301 阅读 · 0 评论 -
flex布局--骰子
<div class="box box1"> <span></span> </div> <div class="box box2"> <span></span> <span></span> </div> <div class="box box3"> <span><.原创 2021-08-01 15:04:35 · 134 阅读 · 0 评论 -
组件的动态切换和组件缓存
组件动态切换<template> <div> <button @click="comName = 'UserName'">账号密码填写</button> <button @click="comName = 'UserInfo'">个人信息填写</button> <p>下main显示注册组件-动态切换</p> <div style="border: 1px solid原创 2021-12-19 08:38:48 · 335 阅读 · 0 评论 -
vue插槽
匿名插槽:当组件内一幅幅标签不确定时,在组件内使用<slot><slot/>占位,当使用组件在标签内放入什么内容,在组件内就会替换掉slot标签并显示,在slot标签内放置内容,就会作为默认显示内容显示子组件:<template> <div> <h1>子组件---演示组件插槽</h1> <slot></slot> </div></template>父原创 2021-12-17 19:04:23 · 216 阅读 · 0 评论 -
vue-router原理
vue-router通过hash和history两种方式实现路由hash模式在浏览器地址栏中会有一个#号分隔根路径和地址,#号后的地址改变时,不会导致浏览器向服务器发起请求,路由跳转时是无刷新的 用window.location.hash读取URL地址数据,监听hashchange事件history模式的地址和真实的地址是一样的,会向服务器发起请求,所以history模式需要后端支持 history采用html5的新特性;且提供了两个新方法:pushS...原创 2021-12-16 18:59:11 · 355 阅读 · 0 评论 -
前端面试一
$nextTick的使用 vue中的数据和dom渲染由于是异步的,要想dom结构随数据改变,都应放进this.$nextTick()的回调函数中。在视图更新之后会自动调用$nextTick的回调函数。 created()中使用方法时,dom还没有被渲染,所以,created()钩子函数进行DOM操作一定要放在this.$nextTick()的回调函数中。 this.$nextTick()起到一个等待数据的作用,将一些回...原创 2021-11-28 21:30:36 · 91 阅读 · 0 评论