HTML
1、语义化标签
- 结构清晰、代码可读性较好、无障碍阅读、更利于搜索引擎抓取和维护
2、video
- poster 带有预览图的视频播放器 poster="/images/logo.png"
CSS
1、CSS的选择器
类选择器 .p1{}
ID选择器 #p1{}
标签选择器 p{}
分组选择器 p,a,li{}
后代选择器 div ul li{}
属性选择器 [name=“p1”]{}
通用选择器 *{}
兄弟选择器 p+a{}
父子选取器 div>p{}
2、水平垂直居中
方法一:绝对定位+ transition: translate(-50%,-50%)
div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
方法二:绝对定位+margin值减去盒子的一半
div{
width: 100px;
height: 100px;
postion: absolute;
top: 50%;
margin:auto;
margin-top: -50px;
}
方法三:绝对定位 上下左右都设置为0 + margin: auto;
div{
postion: absolute;
top: 0;
right: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
方法四:flex布局 给当前div的父级添加flex
div{
display: flex;
align-item: center;
justify-content: center;
}
方法五:display: table-cell 实现水平垂直居中:table-cell middle center组合使用
div{
display: table-cell;
vertical-align: middle;
text-align: center;
}
3、flex布局
-
容器属性
主轴方向 flex-direction
侧轴方向对齐 justify-content
项目超出是否换行 flex-wrap
侧轴对齐(单行) align-items
侧轴对齐(多行) align-content
flex-direction和flex-wrap的属性 -
项目属性
flex: 数值 项目具体占多少比例
flex-grow 设置或者检索盒子的扩展比率
flex-shrink 默认值1,如果没有显示定义该属性,将自动按照默认值1,所以因子相加之后计算比率来进行空间收缩
order 设置或者检索索引子元素出现的顺序
align-self 定义flex子项单独在侧轴上方对齐
JavaScript
1、引用数据类型
对象、数组、函数
2、cookie、sessionStorage和localStorage
- cookie 即可以从客户端也可以从服务端访问数据,有大小限制和时间期限
- sessionStorage 一次缓存会话,关闭浏览器自动释放
- localStorage 以文件形式永久储存,只能手动清除
3、JS数组和对象的遍历方式,以及几种方式的比较
for in、for、forEach
- (1)for-in 需要分析出array的每个属性,这个操作性能开销很大。用在key已知的数组上是不划算的。
- (2)for 循环每一次,就要检查数组的长度。读取属性要比读局部变量慢,尤其是当array里存放的都是DOM元素,因为每次读取都会扫描一遍页面上的选择器相关元素,速度大大降低
- (3)forEach 无法遍历对象,IE不支持
4、vue和原生js开发的区别
-
JS是运行在浏览器端的脚本语言,JS主要解决的是前端与用户交互的问题,JS是浏览器解释执行的。
-
vue可以作为一个JS库来使用,也可以用它全套的工具来构建系统界面,这些可以根据项目的需要灵活选择,所以说,vue是一套构建用户界面的渐进式JS框架。vue的核心库只关注视图层,vue的目标是通过尽可能简单的API响应式的数据绑定,在这一点上vue类似于后台的模板语言。其本质上来说也是js代码
-
总结:
1. js首先都要获取到DOM对象,然后对DOM对象进行值的修改等操作
2. vue是首先把值和 js 对象进行绑定,然后修改js对象的值,vue框架就会自动把DOM的值进行更新
5、同步和异步
- 同步:浏览器访问服务器请求,用户看得到页面刷新,重新发送请求,等请求网,页面刷新,新内容出现,用户看到新内容,进行下一步操作
- 异步:浏览器访问服务器,用户正常操作,浏览器后端进行请求。等请求完,页面不刷新,新内容也会出现,用户看到新内容
ES6
1、箭头函数
- this指向固定不变,一直指向的是定义函数的环境
- 不可以定义构造函数
- var所定义的变量不能得到变量提升,所以箭头函数一定要定义于调用之前
- 什么时候不该使用箭头函数
1、在对象上定义函数
2、在原型上定义函数
3、动态上下文中的回调函数
4、构造函数中
2、let、var和const
var 可以重复定义,let不可以
var有变量提升,let没有
var没有块级作用域,let有块级作用域
const 定义常量,即值不会改变的量
const定义常量必须赋值
适用场景:引用一些npm包,或者定义项目固定不变的值
3、ES6新增语法
- let const
- 数组、对象、函数的解构
- set 和 map
- 箭头函数
- promsie
- 字符串拼接
4、Promise
作用:ajax是异步请求,多层嵌套会造成回调地狱,promise模拟同步,将异步回调类似于同步处理业务逻辑
sass和less
相同点:混入、参数混入、嵌套规则、运算、颜色功能、命名空间、作用域、JS赋值
不同点:
- 使用less比sass简单
- less的环境比sass简单
- sass的功能比less略强大些
- 声明变量 less用@ sass用$
VUE
1、$ router和$ route的区别
- $router 为实例对象,里面包含很多属性和子对象 传参
- $route 相对于当前正在跳转的路由对象 接收
2、vueRouter 的懒加载
为什么:为了给用户更好的体验,首屏组件加载速度更快,解决白屏问题
定义:懒加载简单来说就是延迟加载或者按需加载,即使在需要时的时候进行加载
常用的懒加载方法有两种:就是用vue异步组件 和 ES中的import
方法一:vue 异步组件实现懒加载
component: resolve=>(require([‘需要加载的路由地址’]),resolve)
方法二:ES 提出的import方法(----最常用----)
const HelloWorld = () =>import(‘需要加载的模块地址’)
组件懒加载 与路由懒加载相同
1、原来组件中写法
import one form './one'
exprot default{
components:{
one;
}
}
2、const 方法
const one = ()=>import('./one')
exprot default{
components:{
one;
}
}
3、异步方法
exprot default{
components:{
one: resolve =>(['./one'].resolve)
}
}
2、vue生命周期
Vue的生命周期总共分成8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后。
-
beforeCreate(创建前)
表示实例完全被创建出来之前,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。
-
created(创建后)
数据对象data已存在,可以调用methods中的方法,操作data中的数据,但dom未生成,$el未存在。 -
beforeMount(挂载前)
vue实例的$el和data都已初始化,挂载之前为虚拟的DOM节点,模板已经在内存中编辑完成了,但是尚未把模板渲染到页面中。data.message 未替换 -
mounted(挂载后)
vue实例挂载完成,data.message成功渲染。内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数,当执行完mounted就表示,实例已经被完全创建好了,DOM渲染在mounted中就已经完成了;加载第三方组件 -
beforeUpdate(更新前)
当data变化时,会触发beforeUpdate方法。data数据尚未和最新的数据保持同步
-
updated(更新后)
当data变化,会触发updated方法。页面和data数据已经保持同步。 -
beforeDestory(销毁前)
组件销毁之前调用,在这个一步,实例仍然完全可用 -
destoryed(销毁后)
组件销毁之后调用,对data的改变不会再触发周期函数,vue实例已解除事件监听和dom绑定,但dom结构依然存在
3、路由守卫(三个参数)
路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。
守卫方法接收三个参数
to:即将要进入的目标路由对象
from:当前导航正要离开的路由
next:执行下一步
-
全局前置守卫beforEach
-
全局后置钩子afterEach(少用)
全局后置钩子与全局前置守卫类似,然而和守卫不同的是,这些钩子不会接受nex函数也不会改变导航本身
router.afterEach(to,from)=>{ } -
路由独享的守卫beforeEnter
使用方法全局守卫相同
不同的是:全局守卫可以作用于全局,路由独享守卫只作用于被设置守卫的路由 -
组件内的守卫
可以在路由组件内直接定义以下路由导航守卫
1、beforeRouterEnter
在渲染前该组件的对应路由被confirm前调用
不能获取组件实例this,因为当守卫执行前,组件实例还没被创建
可以通过next获取data中的数据2、beforeRouteUpdata
如果一个在两个子路由之间跳转,是不触发beforeRouteLeave的。这会导致某些重置操作,没地方触发。在之前我们都是用watch的。
4、vuex
一个5个核心属性,分别是:state、getters、mutation、action、module
- state 唯一数据源
- getter 可以认为是store的计算属性,getter的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算
- mutation 更改vuex的store中的状态的唯一方法 同步操作
- action 类似于mutation,不同在于action提交的是mutation,可以是异步操作
- module 由于使用单一状态数,应用的所有状态都会集中到一个比较大的对象。当应用变得非常复杂时,store对象就有可能变得很臃肿。所有vuex允许我们将store分割成模块
5、v-if和v-show的区别?在什么场景下使用?
- v-if 会对标签进行适当的创建和销毁,而v-show则仅在初始化时加载一次,因此v-if开销比较大
- v-if 是惰性的,只有条件成立才会渲染。v-show则无论条件是否成立,都会渲染标签,它仅仅是简单的CSS切换
6、父子兄弟传参
-
父传子
通过props传递
父组件<child value='传递的数据'>
子组件:props['value']
,接收数据,接收后使用和data中定义数据使用方式一样 -
子传父
父组件<child @receive='recevie'>
子组件:this.$emit('recevie',传递的数据)
-
兄弟组件传值
通过中央通信let bus = new Vue()
A:methods:{函数{bus.$emit('自定义事件名',数据)}}
发送
B:created() {bus.$on('A发送过来的自定义事件名',函数)}
接收数据 -
祖父孙组件传参
子传父或父传子一层层传、vuex,可以越级但不建议
7、MVVM、MVC
- MVVM特点:各部分之间的通信,都是双向的;采用双向数据绑定:view的变动,自动反映在ViewModel
- MVC特点:view传送指令到Controller;Controller完成业务逻辑后,要求Model改变状态;Model将新的数据发送到view,用户的到反馈
8、axios 和 ajax 的区别
-
axios 是通过 promise 实现对ajax技术的一种封装,就像jquery实现axios封装一样。
-
简单来说:ajax 技术实现页面的局部数据刷新,axios实现了对ajax的封装,axios是ajax,ajax不止axios
-
优缺点:
- ajax 本身是针对MVC的编程,不符合现在前端MVVM的浪潮;基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的代替方案;jquery整个项目太大,单纯使用ajax却要引入整个jQuery非常的不合理;
- axios 从node.js 创建http请求;支持PromiseAPI;客户端支持防止CSRT;提供了一些并发请求的接口(重要,方便了很多的操作)
8、computed 和 watch 的区别?
-
computed
是依赖数据变化才去计算;
没法处理异步的数据 -
watch
主动处理数据变化
可以直接处理异步
异步的派生数据 -
使用场景
watch
适合处理一个数据影响多个数据;
更适合处理相互独立的场景;
主动监听;computed
适合处理一个数据受多个数据的影响 或者 多个数据影响一个数据;
数据相互不独立的场景;
微信小程序
1、小程序的生命周期
页面生命周期
data 页面初始数据
onLoad 监听页面加载
onReady 监听页面初次渲染完成
onShow 监听页面显示
onHide 监听页面隐藏
onUnload 监听页面卸载
1、小程序注册完成后,加载页面,触发onLoad方法。
2、页面载入后触发onShow方法,显示页面。
3、首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次
4、当小程序后台运行或者跳转到其他页面时,触发onHide方法
5、当小程序有后台进入到前台运行或者重新进入页面时,触发onShow方法
6、当使用重定向方法 wx.redirectTo(object)或者关闭当前页返回上一页 wx.navigateBack(),触发onUnload
总结:
1、onLoad:页面加载
一个页面只会调用一次
参数可以获取wx.navigateTo及中放入query
2、onShow:页面显示
每次打开页面都会调用一次
3、onReady:页面初次渲染完成
一个页面只会调用一次,代表页面已经准备妥当,可以和视图进行交互
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置
4、onHide:页面隐藏
当navigateTo或底部tab切换是调用
5、onUnload:页面卸载
当redirectTo或者navigateBack的时候调用
网络
1、get 和 post
-
get 用于从指定资源请求数据
可被缓存
保留在浏览器历史记录中
可被收藏为书签
不应该在处理敏感数据时使用
有长度限制 -
post用于将数据发送到服务器来创建/更新资源
不会被缓存
不会保留在历史记录中
不能被收藏为书签
没有长度限制
uni-app
- uni-app 优点:
uni-app是一套适用于多端的开源框架
扩展能力强适用HbuildX开发,丰富的语法提示,开发速度较快
学习成本低,语法是vue的,组件和api是小程序的
突破了系统对原生H5调用的功能的限制 - 缺点:
问世时间短,很多地方不完善
对于使用中的一些bug和问题,官方回应不太及时
文件命名受限
兼容性,在Android平台比微信小程序和IOS差
社区不大