盲点

作用：用于缓存组件 应用于保存表单控件对应的信息 提供的属性 include 指明哪些被keepalive嵌套的组件有组件缓存功能 exclude 与上相反 使用步骤 1.给keepalive填写属性include/exclude 2.在路由规则中写明对应的name属性 3.在对应的单页面组件export default 中写上对应的name属性 提供的生命周期钩子 activated deactivated 路由异步加载 在路由规则中把组件引入写于对应的箭头函数中 { path: '/', name: 'index', component: () => import(/* webpackChunkName: "index" */ '@/pages/index'), meta: {} } 同一页面父子组件的生命周期执行顺序 父created-》子created-》子mounted-》父mounted h5有新建的指令用于快速创建页面 "tep": "node static/js/template", 用法 npm run tep “文件名” 实现效果 自动生成page文件夹的基本结构 git合并冲突 git在每一次修改文件都有对应的字串来记录所以的信息，如果在开发同一份分支下更改同一份的文件的同一个位置，在分支合并下会出现修改信息的合并，但是修改信息不知道以那一条修改信息为准，因为他们改的是同一个位置的数据，这个时候我们可以抉择以A为准还是以B为准，执行的方法就是删掉重复的代码然后push（当一个代码在远程一个在本地，通常的做法就是pull==>删除代码==>push） 路由传递参数params和query query的传值在刷新完页面后依旧存在 params的传值如果在to中来进行传递，刷新页面数据会依然存在，但是如果在router。push中来传递就会消失 scoped scoped是用来处理单页面的样式叠加情况，非单页面无需考虑 浏览器提供的打断点新工具debugger async和await async是异步的含义，async一般是添加在一个函数的声明前，await添加在函数的逻辑前，如果async函数被调用，await之前的逻辑是同步的，但是await之后的逻辑就是异步的，它会等await中的同步逻辑执行完再执行await往下的逻辑（总结：await相当于promise实例，都是同步的，await下一行的逻辑相当于promise实例调用的方法then，是异步的） https://tinypng.com/ 如果图片太大，这个图片可以用来压缩图片 在h5代码中，native文件内有不同平台的环境判断js文件 如何把img的路径通过data关联到src属性 通过import来导入图片就可以 图片路径后添加版本号 经常改动的图片为了解决缓存带来的图片错乱问题 http协议缓存机制 强缓存 浏览器第一次访问服务器，服务器返回对应的响应头，响应头有属性cache-control和expires，都是用来规定缓存的的时间，当浏览器再次发送请求则会判断cache-control和expires这两个属性，如果没问题则直接从缓存中获取数据 总结：状态码：200，不访问服务器 协商缓存 浏览器发送请求，核对上一次请求的响应属性cache-control和expires，如果请求时间过期，则访问服务器，进入服务器并不会立即获得数据，它要进行判断，判断当前的数据是不是同缓存内的一样，一样则返回到客户端读取缓存（这里就是协商缓存），否则就重新获取服务器数据 总结：状态码304，访问服务器 console.log因为eslint的原因在终端报错 在package.json中找到eslint的配置（"rules": { // 这一行代码就是允许console.log 设置 "no-console": "off" }） vuex的辅助属性mapState 用于遍历vuex中的state属性 这个属性都是写在计算属性内的 需要 引入mapState（import {mapState} from 'vuex'） Demo： computed: { ...mapState (["count"]) }//这里mapState是一个函数，参数有两种表现形式，一种是数组，一种是对象，这里的‘count’指的是state中的count，‘count’写在这里表示要把state中的属性遍历出来，通过调用计算属性{{count}}来获得vuex中state的属性‘count’的值 this.$set() / Vue.set() 不在data中的属性，如果在data外添加新的属性会出现data数据更改了，但是同步不到视图层，或者有时候data中的数据嵌套太多层，出现data中的数据无法响应到视图层，都可以用这个方法 this.$set中有三个参数--> target: 要更改的数据源（可以是一个对象或者数组） key 要更改的具体数据 （索引） value 重新赋的值 添加复制功能 /* 创建range对象 */ const range = document.createRange(); range.selectNode(element); // 设定range包含的节点对象 /* 窗口的selection对象，表示用户选择的文本 */ const selection = window.getSelection(); if (selection.rangeCount > 0) selection.removeAllRanges(); // 将已经包含的已选择的对象清除掉 selection.addRange(range); // 将要复制的区域的range对象添加到selection对象中 document.execCommand('copy'); // 执行copy命令，copy用户选择的文本 总结： 1.这里的range就相当于剪切板， 2.我们要把剪切板通过selectNode方法，将其定位到对应的对应的节点中 3.range对象通过selectNode圈中哪个对象，就复制哪个对象的节点 （这里的select对象只是range的一个促发器） input标签添加拍照功能 总结：accept="image/*;capture=camera" 直接调用相机 accept="image/*" 调用相机 图片或者相册 图片的预览问题 结构--》一个input标签---》一个img标签 如何获取图片的拓展名，和内存 通过input的onChange事件能监测到对应的选择文件e.target.files[0] onChange的e.target对象中有对应的图片文件，type属性有对应的文件扩展名，fileSize有对应的文件内存大小 如何获取图片的尺寸 onChange中的e.target对象没有文件对应的尺寸大小数据，通过window.URL.createURL（file）--》把文件转化成url形式，新建image对象（new Image（））image.src=url-->如此，通过获取这个image DOm元素就能访问到这个图片对应的尺寸 如何实现图片预览 1.通过onChange事件获取对应的图片文件 2.通过window.URL.createURL创建对应的文件url 3.把生成的url给img标签的src属性 利用form表单的请求实现导出效果 form表单提交相当于formData的请求，input标签中的name值相当于formData的属性，input的value值相当于formData的属性值，通过form标签的action属性访问对应的url，访问成功后会默认的导出对应的响应数据---》（那么如何触发这个机制呢，通过form标签的dom元素的submit方法，或者设置按钮 submit） 总结：文件之所以会导出跟用form表单发起请求没有关系，这完全是因为接口返回了二进制的数据，浏览器在解读二进制数据会默认的下载对应的二进制文件 实现图片和文字合成新的图片 运用canvas 注意：context.fillText如果y坐标设置为0时，会导致字体出现不在canvas标签中，这是由于坐标关联字体的关联点是字体的左下为坐标关联点 new image生成图片对象，在image。src定义时，图片的加载时异步的，需要在其下定义 image。onload事件 移动端测试环境调试按钮vconsole 1.npm install vconsole 2.在main.js

import Vconsole from ‘vconsole’
const vConsole = new Vconsole()
Vue.use(vConsole)
v-lazyload
图片懒加载属性preload
preLoad:类型Number,默认1.3. 表示lazyload的元素距离页面底部距离的百分比.计算值为(preload - 1).
图片的预加载
所谓的预加载是在切换到对应页面的跳转按钮的页面上做文章
1.通过css来加载图片
2.通过ajax请求来加载图片
3.通过js的src属性来加载图片
install方法注册插件
插件的生成
首先有一个单文件组件
其次在一个install函数中定义去注册单文件组件
通过调用vue.use()来调用install方法
步骤三也就是为什么axios这个插件不用通过vue.use()来注册
install方法的另一个妙用
能够在install方法中去定义vue的属性
再通过vue.use()来调用函数
如果不在install中去定义属性，浏览器读到定义属性位置就无法继续往下解析（报错）
高德地图引用（阿里巴巴）
1.
发送请求，获取全局变量
key这个参数的值是每个对应的高德开发平台用户的身份
2.创建一个id为container盒子
3.var map = new window.AMap.Map(‘container’, {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 11, //初始化地图层级
center: [116.397428, 39.90923] //初始化地图中心点
})
//实时路况图层
var trafficLayer = new window.AMap.TileLayer.Traffic({
zIndex: 10
})
map.add(trafficLayer) //添加图层到地图
}）
通过申明一个 Amap对象就可以引用对应的api了
作用域插槽
1.在子组件中写入slot标签
2.通过在slot标签中自定义一个属性（
:content=‘关联的数据’）
3.在父组件中，通过在子组件的标签中嵌套一个其他的标签，在这个被嵌套的标签定义属性slot-scope=‘scope’，然后就可以通过scope访问子组件中的数据来（scope.content–>查找到关联的数据）
总结：作用域插槽的作用就是能够访问子组件的作用域
路由router.push 和router.go(-1)的区别
1.路由的跳转会把对应的记录记在栈空间中，如果用push跳转页面，就会在栈中一直生成新的记录，如果使用go（-1）来跳转页面，这个方法会清空当前页面的记录
在正常开发中，一般同一个页面再次跳转我们一般很少用push方法，因为他会产生在栈中，如此我们的window.history就会有两条这个页面的信息，这样照成我们在做导航条回退的时候，不能直接跳到我们希望的页面
ios和android的兼容
input标签在ios聚焦时会偏移整个html往上，失焦后html复原不了
方法：在input标签离焦时，用scrollIntoView（true）来使页面的大盒子置顶
input标签的占位符在ios不能垂直居中
判断设备类型，通过padding来微调
伪元素active
在ios中active是失效的
解决办法：在对应的标签中注册ontouchstart=""
安卓正常
对象的合并Object.assign
Object.assign({a:1},{b:2})==={a:1,b:2}
注意：相同的属性会由后面的对象属性覆盖前面的属性
弹性布局flex和flex-grow的区别
flex:1
左右两个盒子，右边盒子用该属性自适应，当右边盒子压缩文本溢出时左边盒子会出现一起压缩
flex-grow：1
左右两个盒子，右边盒子用该属性自适应，当右边盒子压缩文本换行时，左边盒子会出现一起压缩
总结：flex：1相对于flex-grow：1更加当极限，所以正常开发中用flex：1更加合理
vue中的main.js
new Vue({
store,
router,
render: h => h(App)
}).KaTeX parse error: Expected 'EOF', got '#' at position 8: mount('#̲app') 知识点：这里的…mount把文件挂载到对应的#app这个盒子中
假数据插件（mock-myself）

总结

以上是生活随笔为你收集整理的盲点的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。