- 博客(22)
- 收藏
- 关注
RSS订阅原创 关于this指向问题
this的情况：1,普通函数this指向全局对象window,在严格模式‘use strict’,this的指向是undefined如图：1,function fn() { console.log(this); // window } fn(); // window.fn（),此处默认省略window2,function fn() { “use strict” console.log(this); // unde
2021-09-15 18:44:47
129
原创 Vuex持久化
一，持久化原因：Vuex的数据储存在本地，页面一刷新数据就会存在丢失二，我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化npm i vuex-persistedstate三，最后：使用vuex-persistedstate插件来进行持久化import { createStore } from 'vuex'+import createPersistedstate from 'vuex-persistedstate'import use
2021-09-15 17:16:40
210
原创 v-show 和v-if指令的共同点和不同点
一，相同点：两者都是控制元素的显示和隐藏，初始值都是false二，不同点：1，实现本质方法本质不同v-show本质就是通过设置css中的display设置为none,控制隐藏v-if是动态向DOM树添加和删除DOM元素2，编译的区别v-show 就是控制CSSv-if 切换有一个局部编译和卸载的过程，切换过程中合适地销毁和重建内部事件3，编译的条件v-show 会编译，但是只编译一次，后面其实就是控制css，注意点：当css本身就有dislpay：none时，v.
2021-09-15 15:50:51
1072
原创 如何实现一个盒子水平垂直居中
一，利用定位法（推荐）.parent{ width:500px heigth:500px border:1px soild #000 position:relative}.child{ width:100px heigth:100px border:1px soild #000 position:absolute top:50% left:50% margin-top:-50px margin-left:-50
2021-09-15 15:06:24
167
原创 关于浮动方面的相关知识点
第一，为什么会出现浮动浮动定位将元素排除到普通流之外，例如脱离文档流，不占据空间。第二，为什么要清除浮动1，父元素的高度无法被撑开，影响父元素同级的元素，2，与浮动元素同级的非浮动元素，影响页面结构第三，清除浮动的方法1，添加样式：.clearfix:after{ content: ""; display: block; height: 0; visibility: hidden; clear: both;} .clearfix { zoom
2021-09-14 21:54:37
68
原创 Vue2与Vue3生命周期函数
1.Vue2生命周期钩子函数 beforeCreate 组件实例刚被创建，组件属性计算之前，如：data属性等 created 组件实例创建完成，属性已绑定，但是DOM还没生成 $el属性还不存在 beforeMount 挂载之前 mounted 挂载之后 beforeUpdate 组件更新之前 updated 组件更新之后 activated 组件被激活调用 deac...
2021-09-11 21:17:20
206
1
原创 Vue2与Vue3项目ESLint脚手架通用配置
第一步：设置路径第二部：设置位置第三步：设置内容{ "eslint.enable": true, "eslint.run": "onType", "eslint.options": { "extensions": [ ".js", ".vue", ".jsx", ".tsx" ] }, "editor.codeA...
2021-09-11 17:43:31
329
原创 Vue2与Vue3脚手架项目创建流程
第一步:安装脚手架(之前如果安装过不用重复安装,一个电脑安装一次就够)安装命令:npm i @vue/cli -g第二步:创建vue项目（如果是v2的话选项中选择v2版本，如果是v3的话选项中选择v3版本）安装命令:vue create 项目名称流程如下图:注意:如果是v2的话选项中选择v2版本，如果是v3的话选项中选择v3版本...
2021-09-10 19:58:44
396
转载 路由的四种跳转方式
1. router-link1. 不带参数<router-link :to="{name:'home'}"><router-link :to="{path:'/home'}"> //name,path都行, 建议用name// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。2.带参数<router-link :to="{name:'home', params: {id:1}}">// params.
2021-09-04 19:28:27
1213
原创 数组转Tree结构,利用递归的方法
const data = [{ id: 1, pid: 0, name: 'body'}, { id: 2, pid: 1, name: 'title'}, { id: 3, pid: 2, name: 'div'}]转换为: [{ id: 1, pid: 0, name: 'body', children: [{ id: 2, pid: 1, .
2021-08-28 22:01:19
105
原创 Vue中ref的使用
一.获取DOM元素<template> <div id="app"> <div ref="testDom">11111</div> <button @click="getTest">获取test节点</button> </div></template><script>export default { methods: { getTest() {
2021-08-16 22:13:36
114
原创 数组转Tree结构,利用非递归的方法
const arr=[ { id: '01', pid: '', name: '老王', children: [] }, { id: '02', pid: '01', name: '小王', children: [] }, { id: '03', pid: '02', name: '小小王', children: [] }, { id: '04', pid: '', name: '小张', children: [] }, { id: '05', pid: '04', name:...
2021-08-14 21:57:05
87
原创 浅谈.sync与v-model
1.实现父子组件数据之间的双向绑定，与v-model类似.2.类别在于：一个组件上只能有一个v-model，.sync修饰符可以有多个。
2021-08-14 13:22:31
58
原创 如何计算数组中每个元素出现的次数
constarr=["b","c","b","c","a","b","c"] =>{ b: 3, c: 3, a: 1 }方法一:forEach方法const obj = {}arr.forEach((item)=>{ let i=0 arr.forEach(item1=>{ if(item===item1){ i++ } }) return obj[item]=i})c...
2021-08-13 19:14:12
544
原创 如何解决图片403问题
有时候报错403状态码, 发现都是图片路径请求问题原因:1.http请求头中有一个referrer字段，用来表示发起http请求的源地址信息2. 服务器端在拿到这个referrer值后判断请求是否来自本站若不是则返回403，从而实现图片的防盗链。上面出现403就是因为，请求的是别人服务器上的资源，但把自己的referrer信息带过去了，被对方服务器拦截返回了403解决办法:在前端可以通过meta来设置referrer policy(来源策略)，referrer设置成no-r.
2021-08-11 21:52:06
3103
原创 如何实现文字高亮封装方法
/** * 转换高亮文字的方法 * @param {*} str 要被处理的字符串 * @param {*} target 要匹配关键字 * @return 处理后带标签高亮的方法 */const lightFn=(str,target)=>{//利用正则进行匹配,i和g是正则表达式的修饰符,i是不区分大小写,全局匹配 const reg = new RegExp(target, 'ig')str.replace(reg,(match)=>{// match是关键字匹配的值.
2021-08-11 21:09:40
97
原创 Vue项目中如何使用svg-icon组件及理解其工作原理
一,怎样使用svg-icon组件1,安装依赖npm i svg-sprite-loader@4.1.32,配置 vue.config.jsconst path = require('path')function resolve (dir) { return path.join(__dirname, dir)}补充一个配置{ }{ // 省略其他... chainWebpack (config) { // set svg-sprite-loader co
2021-08-11 20:37:39
317
原创 常见数组array（API）
一.将数组转化为对象(String)1.var arr=[1,2,3];2.var str=String(arr);3.console.log(str); //1,2,34.console.log(arr); //[1,2,3]二.将数组中的所有元素拼接成字符串中(join)1.var arr=[1,2,3];2.var str=arr.join();//默认是逗号，也可以自定义拼接符3.console.log(str); //1,2,34.console.log(arr); /
2021-08-09 16:39:09
115
原创 for in 与Object.keys()的区别
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言 一、for in 和Object.keys()的含义？ 二、使用步骤 1.文字阐述 2.代码展示 总结前言一、for in 和Object.keys()的共性？for in和Object.keys()都是对象的循环遍历的方法二、for in 和Object.keys()的区别? 问题:取出下面对象的所有键var person = { name: '张三',
2021-08-05 18:03:33
3429
原创 如何将对象转化成数组
const obj = { 0: '男', 1:'女'}// 解题思路:利用for循环对对象进行遍历function f(obj) { const arr = [] for (let key in obj) { const newobj = {} newobj['label'] = obj[key] newobj['value'] = key arr.push(newobj) }}const arr = f(...
2021-08-04 20:52:45
171
1
原创 如何将数组转化成对象
const arr = [{label: '男', value: 0},{label: '女', value: 1}]解题思路一:利用forEach方法function f(arr) { arr.forEach(item => { const label = item.label const value = item.value obj[value] = label })}const obj = f(arr) /.
2021-08-04 20:47:03
1595
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人