- 博客(39)
- 收藏
- 关注
RSS订阅原创 vue2文件导入
el-button type="primary" @click="handelClick" v-show="btnShow">导入</el-button>
2023-04-22 10:16:59
282
原创 vue2中配置sass loader
3.vue.config.js中配置sass loader解析sass文件。/* 改变 icon 字体路径变量，必需 */4.main.js中使用这个全局配置文件。2.style文件下面新建sass文件。// module.exports里面。1.下载sass loader。/* 改变主题色变量 */
2023-04-19 22:41:15
978
原创 选项API写法和组合API写法
vue2是用的选项API语法（）：数据和方法相分离vue3使用的是组合式写法（）：一个功能逻辑的代码组织在一起组合api之setup函数： 是一个新的组件选项，作为组件中使用组合API的起点。在模版中需要使用的数据和函数，需要在 返回，所以一定要有return。vue3中没有this组件初始化之前执行，它返回的数据和函数可在模版使用。认识vue3.0生命周期钩子函数（7个） 创建实例前 挂载DOM前 挂载DOM后 更新组件前 更新组件后 卸载销毁前 卸载销毁后.........
2022-06-27 20:06:25
1055
原创 vue3中入口文件main.js组成部分分析
// 创建一个vue应用// 1. 导入createApp函数// 2. 编写一个根组件App.vue，导入进来// 3. 基于根组件创建应用实例// 4. 挂载到index.html的#app容器import {createApp} from 'vue'import App from './App.vue'const app = createApp(App)app.mount('#app')...
2022-06-27 19:49:14
421
原创 var let 和const的区别
1. ES5声明变量 var1.1 有变量预解析1.2 没有块级作用域(for循环里面的)2.ES6声明变量 let const1.1 没有变量预解析1.2 有块级作用域3. let与const区别let : 变量。 可以修改const : 常量。 不可以修改* 实际开发中, 只要不修改的变量都用const,需要改的时候用let...
2022-06-21 17:00:59
53
原创 使用递归完成深拷贝
1.浅拷贝： 拷贝的是地址 * 特点：修改拷贝后的数据，原数据也会随之修改 2.深拷贝：拷贝的是数据 * 特点：修改拷贝后的数据，对原数据没有影响
2022-06-21 16:50:27
59
原创 单行文本和多行文本溢出省略号实现
white-space: nowrap; /* 使文本溢出不换行*/overflow: hidden; /* 溢出部分砍断隐藏 */text-overflow: ellipsis; /* 溢出部分打点展示*/显示效果如图:
2022-06-21 15:23:16
46
原创 Promise构造函数的一些理解
promise实例有三种状态:pending等待,fulfilled成功,rejected失败let p1 = new Promise(function(resolve,reject){ //一段异步代码异步代码成功时调用resolve(obj1)异步代码失败时调用reject(obj2)});p1.then(function(rs){ // 如果p1的状态是fulfilled，则then中的函数会执行，且obj1的值会传给rs}).catch(function(rs){...
2022-05-26 09:43:59
229
原创 vue路由使用全流程
1.下载vue-router模块到当前工程;2.在main.js中引入VueRouter函数3.把VueRouter添加到Vue.use(VueRouter)身上,下载VueRouter插件,并注册全局的RouterLink和RouterView组件;4.配置路由规则数组:路径和组件名一一对应;5.把路由规则数组赋值一个变量,创建路由对象6.把路由对象注入到new Vue实例中;7.用router-view作为挂载点,切换不同的路由组件相当于是占位符,当用户请求一个路径时,将对应
2022-05-15 22:03:09
459
原创 vue计算属性computed使用注意事项(有缓存)
当我们在模板中来显示一份经过对数据项进行复杂计算之后的结果时，我们有两种解决方案：(1)计算属性(2)函数应该如何选择？(1)methods定义函数，如果在模板中使用，每使用一次，就相当于调用了一次，处理逻辑会重新执行。(2)computed定义计算属性，如果在模板中使用，使用多次，但是如果依赖的数据不发生改变，计算属性对应的函数不会重新执行。(3)计算属性会做缓存，提高渲染的性能。结论:计算属性有缓存，提高渲染性能。 如果在页面上需要用到 对现有的数据进行加工得到新数据，
2022-05-14 21:27:45
1476
原创 vue知识点碎碎念(强化记忆)
1.vue组件封装四步走:(1)创建组件设置组件的结构样式和行为(2)导入组件import xxxx from './xxx.vue'(3)注册组件components:{XXX}(4)使用组件<XXX/>
2022-05-07 17:36:13
195
原创 Vue初始化项目步骤
一.查看并设置镜像地址(提高下载速度)npm config get registry #查看镜像地址如果镜像地址不是淘宝镜像地址,为了提高下载速度,就需要输入如下命令设置为淘宝镜像地址:npm config set registry https://registry.npm.taobao.org/ #设置淘宝镜像地址二.全局安装vue/cli(必要)npm i -g @vue/cli三.检查是否安装成功npm -V四.创建项目文件(必要)vue create 文件名五
2022-05-07 17:01:56
6838
1
原创 分享javascript中旋转字符串最为简洁的写法
思路分析:数组有reverse方法旋转数组元素,而字符串中有split方法可以将字符串分割成字符串数组,故本题可以先将字符串转成字符串数组,然后利用数组reverse方法旋转数组元素,最后利用join空字符串替换数组中的逗号,这样字符串就成功实现旋转功能了题解代码:<script> const str = 'abcdefg' const res = str.split('').reverse().join('') console.log(res); /
2022-05-03 20:32:08
2890
原创 webpack 打包工具的作用及其常用加载器loader和plugin插件的功能介绍
一.定义webpack是JavaScript应用程序ed静态模块打包器(module bundler).二.作用
2022-05-02 20:03:19
452
原创 javascript25个数组方法整理分析，囊括函数功能、参数、返回值及经典应用场景
1.set数组去重2，concat():连接两个或更多的数组，并返回新的数组copywithin(
2022-04-28 11:31:12
1651
1
原创 dom操作获取盒子宽高位置的三种方法,offset/scroll/client三大家族使用详解(附源码及注释)
<style> body { height: 2000px; } .box { width: 500px; height: 300px; border: 20px solid #000; padding: 10px; margin: 100px auto; overflow: scroll; } </style> <div class="box"...
2022-04-27 21:33:22
2423
原创 一图搞懂深拷贝与浅拷贝赋值差异,以node.js中module.exports和experts两种导出方式为例
分析:初始exports和module.exports是指向同一块内存区域，其内容都是一个空对象。exports === module.exports // 输出是 true两者都是对象,属于引用类型数据,比较的是在堆中的地址.1.假设yourModule.js的内容是exports.a = 1； 在index.js中，用使用模块const obj= require('./yourModule'); console.log(obj)。请问代码中会输出什么结果？答案是:{ a: 1 }2.
2022-04-26 21:57:27
632
原创 巧用js数组方法reduce,一个方法实现数组求和,平均值,计数,最大值,最小值,偶数和等常见统计问题
/** * 数组reduce方法语法 * @param {callbackFn}回调函数 * (sum,value,index)=>{sum:上一次的返回值 value:当前元素值 index:当前下标 } * 注意事项:sum初始值一般给0,否则空数组reduce报错 * @return: 最后一次回调的结果 */ // 1.数组reduce方法实现计数.原理解析:arr和value为箭头函数的形参,每当reduce.
2022-04-26 01:40:44
2991
原创 node.js核心模块实例应用，基于nods.js环境向json文件添加数据
文件结构要求如下：根目录├── db│└── data.json # 这里有数据└── yourfile.js # 操作db/data.json文件data.json的内容如下：[{"name":"小王"},{"name":"小李"}]data.json中添加之后的效果如下：[{"name":"小王"},{"name":"小李"},{"name":"小张"}1.根据题目要求，搭建初始文件结构2.js文件中向json文件新增数据，代码如下...
2022-04-25 20:30:15
330
原创 盘点flex布局常见属性及适用场景
flex布局原理:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式下面介绍下flex常用的属性:flex-direction,flex-wrap,justify-content1.flex-direction决定主轴的排列方向:row(默认值)|row-reverse|column|column-reverse,示意图如下:(1)row(默认值):主轴为水平方向,自左至右(2)row-reverse:主轴为水平方向,自右至左(3)column:主轴为垂直方向,自上而下(
2022-04-24 15:43:14
2070
1
原创 CSS盒子水平垂直居中方法集锦
背景:开发中经常遇到盒子水平垂直居中的问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素,本文汇总了几种简单常用的盒子居中方法,希望可以对前端同行们有一定的帮助初始html结构及css样式如图所示:页面初始渲染效果:下面给div盒子设置样式,实现居中效果方法一:利用定位+margin:auto来实现子盒子不设置宽高,则铺满整个父盒子(定位定在了四个角):子盒子设置宽高和margin:auto效果实现原理:父级设置为相对..
2022-04-23 22:16:17
9804
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人