- 博客(37)
- 问答 (4)
- 收藏
- 关注
RSS订阅原创 vue3-setup语法糖
官网上setup语法糖相关用法示例给的不全生命周期<script setup> // mounted onMounted(() => { console.log('Component is mounted!') })</script>获取dom<template> <div ref="home"></div></template><script setup>
2021-11-16 19:28:39
3286
7
原创 Node.js学习笔记
目录前言js为什么可以在浏览器中执行？js为什么可以操作dom和bom？Node.js简介Node.js可以做什么？Node.js怎么学？常用终端快捷键内置APIfs文件系统模块path路径模块http模块模块化什么是模块化？模块化规范nodejs中的三大类模块加载模块模块作用域module对象前言js为什么可以在浏览器中执行？浏览器通过js解析引擎执行js代码，不同的浏览器使用不同的js引擎。chrome => v8fireFox => OdinMonkeysafri =>
2021-10-28 20:27:16
552
原创 echarts随dom大小自适应变化，并做防抖处理
监听浏览器窗口resize事件很简单，如下一行代码即可搞定：window.addEventListener('resize', () => {})如何监听dom的resize事件呢？const myObserver = new ResizeObserve(entries => { console.log("dom元素resize")})myObserver.observe(target)//target:要监听的dom元素需要注意的一点，在进入和离开当前页面时，dom监听事件都
2021-10-27 00:46:47
1749
原创 vue强制刷新组件的方法
给组件添加一个key，当key的值改变，组件就会重新挂载。<Bar :key="refreshKey" />修改refreshKey的值即可。
2021-10-26 23:27:05
644
原创 扩展运算符“...“
将一个数组转为用逗号分隔的参数序列console.log(...[1,2,3])//1 2 3用处：1.数组或对象的复制var arr1 = [1,2,3]var arr2 = [...arr1]console.log(arr2)//[1,2,3]//arr2是arr1的克隆，修改arr2不会对arr1产生影响var obj1 = { name: 'paul', age: 23}var obj2 = {...obj1}console.log(obj2)//{naem: 'pa
2021-04-28 15:08:58
121
原创 Atom返回到上次编辑所在行
插件：Last Cursor Position快捷键：alt+－：返回上次鼠标点击的位置alt+shift+－：上一快捷键的相反操作
2021-04-27 16:12:04
329
转载 vue-cli项目运行自动打开浏览器
方法一：打开pakage.json"scripts": { "serve": "vue-cli-service serve --open",//加上--open "build": "vue-cli-service build" },方法二：新建一个vue.config.js文件module.exports = { devServer: { open: true }}
2021-04-02 11:11:58
253
原创 如何查看vue-cli安装位置
如果你是用npm安装的，并且是安装在全局的，那么安装位置就在：C:\Users\Administrator\AppData\Roaming\npm\node_modules
2021-04-02 11:01:08
8016
原创 js是单线程的，为什么可以处理异步任务？
js是单线程的，但是浏览器是多线程的，js碰到异步任务，并没有自己处理，而是交给了浏览器的其他线程。 浏览器的线程包括：事件触发线程、定时器线程、http请求线程等 js异步任务常见的有：事件、定时器、网络请求等 任务队列：存放的是异步任务的回调函数举个例子：定时器setTimeout(a函数，1000);当js引擎执行到这一步的时候，就把这个定时器扔给浏览器的定时器线程，浏览器线程1s后将a函数插入到js任务队列的末尾，等待js引擎执行事件button.onclick
2021-03-23 22:26:43
1788
2
原创 计算属性
计算属性一、计算属性不是函数<div id="app"> {{reversedMsg()}}</div>new Vue({ el: '#app', data: { msg: 'hello' }, computed: { reversedMsg() { return this.msg.split('').reverse().join('') } }})程序执行后会
2021-02-25 19:35:10
258
原创 vue的生命周期
vue的生命周期前言 一个vue实例从创建->挂载->更新->销毁的这整个过程，称为该实例的生命周期。用户可以在不同阶段通过生命周期钩子函数，来添加自己的代码。每个阶段有一对钩子，下面按顺序详解。生命周期钩子一、创建beforeCreate：此时data和methods中的数据还没有初始化<div id="app"></div>new Vue({ el: '#app', data: { msg: '厕所打你'
2021-02-25 00:33:46
91
原创 苹果手机与电脑互传文件（win10自带方法）
前提电脑需要设置开机密码，电脑和手机要处于同一局域网（连同一个WiFi）步骤1、共享文件建立一个共享文件右键点击属性回到这里点击高级共享打开命令行win+R（win键在alt右边）输入cmd，回车输入ipconfig手机端配置ios13以后，iphone自带一个文件应用，手机上没有的话去app store下一个打开app，点击右上角三个点，选择连接服务器名称就填写这个密码就是你的电脑开机密码，点击下一步这里填的服务器就是你的ip地址，如何查看
2021-02-21 22:10:03
27136
10
原创 webpack：无法加载文件...
解决方法管理员身份打开powershell，输入：set-ExecutionPolicy RemoteSigned
2021-02-15 16:57:01
451
原创 vue
对组件的理解 组件就是将一个大的页面细分成一个个小的功能组件，这些组件可以复用、扩展，将复杂的问题拆分成众多简单的小问题，便于开发和维护全局组件和局部组件的区别 局部组件注册在父组件，或者vue实例里，只能在父组件或者该vue实例里被使用。全局组件可以被任意vue实例使用父子组件的通信（1）父组件向子组件传递数据 通过props（2）子组件向父组件传递数据 子组件通过$emit发射自定义事件，并且可以携带数据，父组件监测到这个自定义事件，获取其所带的数据（3）父组件访问子组
2021-02-07 23:50:17
105
原创 插槽（slot）
作用域插槽<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>test</title> <style> </style></head><body> <div id="example"> <cpn></cpn> <cpn>
2021-02-03 20:25:35
111
原创 vue组件
组件的使用方法（1）创建组件构造器var cpnC = Vue.extend({ template: `<div></div>` })（2）注册组件//全局组件Vue.component('cpn',cpnC)//（该组件的标签名，组件构造器）//局部组件var app=new Vue({ el: "#example", components: { cpn: cpnC }})ps:语法糖
2021-01-29 22:18:15
104
原创 let和var
var声明的变量作用域只有两种：全局变量、函数内部的局部变量（注意是函数内部，就算放在循环体里也是全局变量），并没有块级作用域这一说，比如说：var x =10;alert(x);//10{ var x=2; alert(x);//2}alert(x);//2...
2021-01-15 21:29:30
86
原创 HTML DOM
一、定义HTML DOM定义了访问和操作HTML文档的方法，用来获取、修改、添加或删除HTML元素。二、节点HTML中的所有内容都是节点：整个文档是文档节点每个元素是元素节点元素中的文本是文本节点元素的属性是属性节点注释是注释节点所有节点均可通过JS来访问。三、DOM对象1、方法getElementById()：通过id获取元素节点getElementsByClassName()：通过类名获取元素节点（返回值数组）getElementsByTagName()：通过标签名获取
2021-01-09 15:32:36
128
原创 记录一种常见的布局（三栏之间有两个等距离空隙）
代码：<!DOCTYPE html><html><head> <style> * { box-sizing: border-box; } .container { display: flex; justify-content: space-between; width: 800px; margin: 0 auto; border-top: 1px s
2021-01-08 21:08:20
139
原创 待解决：如何让一个浮动元素垂直居中？
在父元素高度未知的情况下，如何让浮动的子元素垂直居中？如果存在两个浮动的子元素，如何让其中一个垂直居中，而另一个不变动呢？
2021-01-07 21:01:34
393
原创 JS对象
1、对象有：数字Number、字符串String、日期Date、数组Array2、数字对象：（1）创建数字对象：var x=new Number(123)；typeof x的结果为object（2）a.toFixed(3)：保留三位小数（3）a.toExponential ()：科学表达式表示3、字符串对象：（1）创建字符串对象：var x = new String(“Hello World”)（2）返回字符串长度：x.length（3）返回指定位置的字符：x.charAt(0)，返回H（
2021-01-06 19:44:21
70
原创 JS基础
1、基本数据类型：undefine（声明了但未赋值，eg：var a;）、Number、String、Boolean、null2、获取字符串a的长度：a.length3、获取a的类型：typeof a4、转为字符串：a.toString()或String(a)。区别在于，若a为null，String(a)会返回null，而a.toString()会报错5、转为数字：parseInt(‘3’)、parseFloat(‘3.13’)、Number(‘2.3’)；区别在于Number()转换的内容带有非数
2021-01-04 23:12:45
126
原创 水平垂直居中（文本、盒子)
盒子居中，flex方式。设置于flex容器的属性：（1）justify-content: 水平方向的对齐方式。（2）align-items: 垂直方向的对齐方式。设置于flex容器子元素的属性：（1）flex-grow: 默认值为0，即不放大。所有子元素值为1时，子元素平分剩余空间（如果有的话）。如果某个子元素值为2，其他子元素值为1，则前者比其他子元素多分的空间是其他的两倍（2）flex-shrink：默认值为1。空间不足时，如果所有子元素的值都设置为1，都将等比例缩小；如果某个子元素设置为0
2021-01-04 10:42:50
126
原创 flex（待完善）
flex内容比较多，先记录了目前使用到的一些属性，后续用到会继续完善。设置于flex容器的属性：（1）justify-content: 水平方向的对齐方式。（2）align-items: 垂直方向的对齐方式。设置于flex容器子元素的属性：（1）flex-grow: 默认值为0，即不放大。所有子元素值为1时，子元素平分剩余空间（如果有的话）。如果某个子元素值为2，其他子元素值为1，则前者比其他子元素多分的空间是其他的两倍（2）flex-shrink：默认值为1。空间不足时，如果所有子元素的值都设
2021-01-04 08:57:21
203
原创 CSS实现三栏布局
1、inline-block方式代码：<!DOCTYPE html><html><head> <style> * { box-sizing: border-box; } body { background-color: rgb(218, 247, 67); } .container { width: 1000px; margin: 0 auto;
2021-01-01 16:17:21
166
原创 BFC
一、定义一个盒子只要满足以下条件之一：（1）float：left、right（2）position: absolute、fixed（3）display：inline-block、table-cell、flex、table-caption、inline-flex（4）overflow: hidden、scroll、auto（5）body根元素就会触发bfc，就可以称这个盒子为一个bfc容器，那么一个bfc容器有什么特点呢？二、bfc特性1、独立性bfc容器是一个独立容器，容器里的子元素不
2021-01-01 12:00:24
613
6
原创 两种盒模型
1、标准盒模型元素的width=内容的width。2、IE盒模型元素的width=内容的width+padding+border。3、切换两种盒模型方法box-sizing: content-box;//标准盒模型（默认）box-sizing: border-box;//IE盒模型
2020-12-31 21:14:18
325
原创 伪类和伪元素
1、伪类作用于元素整体，可以通过类替代<p>hello world</p>现在要让p中内容变为红色:采用类的方式：p.red { color: red; }<p class="red">hello world</p>伪类：p:first-child { color: red; }2、伪元素作用于元素的内容，可以通过添加新元素代替<p>hello world</p>现在要让p中的首字母变为红色：添加新
2020-12-31 16:21:45
130
原创 元素定位
1、相对定位，无论移动与否，元素仍然占据原来的空间，并且移动后会覆盖其他的元素。2、绝对定位，元素不再占据文档的空间，相当于从文档流里删除了，绝对定位相对于最近的已经定位的祖先元素。绝对定位的百分比数值是相对于其已经定位的祖先元素的width、height。3、z-index属性值越大，越优先显示。4、行内元素相对定位后，仍不能设置宽高，并且垂直方向的margin和padding也仍不起作用；但是绝对定位后可以。...
2020-12-30 23:49:43
334
原创 内边距和外边距的百分比数值
内边距和外边距的百分比数值是相对于其父元素的width计算的。代码：<!DOCTYPE html><html><head> <style> .a { width: 200px; height: 200px; border: 1px solid black; } .b { width: 50px; height: 50px; padding: 10%;
2020-12-30 22:02:39
319
原创 子元素浮动对父元素的影响
文章目录前言1.父元素不浮动时2.父元素也浮动时3.小结前言我们都知道子元素浮动会导致父元素高度坍塌，子元素和父元素都浮动的话，父元素还会出现高度坍塌的情况吗？1.父元素不浮动时首先我们设置三个盒子a、b、c,分别为爷爷元素、父元素、子元素。c浮动，a、b不浮动。代码：<!DOCTYPE html><html> <head> <style> .a { width: 300px; ..
2020-12-30 15:12:35
2187
1
原创 对行内元素设置padding和margin不起作用
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、对行内元素设置padding和margin二、使用步骤1.引入库2.读入数据总结前言 看了表严肃表哥的电商网站项目，自己动手亲自实现了一遍，前前后后遇到了几个问题，特此总结一下。一、对行内元素设置padding和margin代码：<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="
2020-12-29 23:23:07
1335
空空如也
vue-cli项目中，什么资源要放到public中
2021-04-23
vue如何实现滑动某个图标切换到不同的页面组件
2021-04-02
vue数据未响应式更新
2021-01-27
这个问题不好描述，哪位大佬进来看一下？
2021-01-18
TA创建的收藏夹 TA关注的收藏夹
TA关注的人