自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(86)
  • 收藏
  • 关注

原创 2022-03-26 文本溢出显示省略号

单行文本overflow: hidden;text-overflow: ellipsis;white-space: nowrap;多行文本overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;

2022-03-26 11:46:55 432

原创 2022-03-25 【待办Todo】day04-渲染数据

一、渲染待办列表数据1. 使用 v-for 循环渲染<van-cell-group v-for="item in items" :key="item.id"> ...</van-cell-group>v-for:循环渲染指令items:data 中的数组item:数组中的每一项item.id:每一项的索引:key:用于提升性能2. 修改 Cell 单元格组件<van-cell-group inset v-for="item in todoList" :

2022-03-25 14:06:29 1080

原创 2022-03-24 【待办Todo】day03-连接数据库

一、搭建云开发环境1. 注册腾讯云账号腾讯云开发 CloudBase2. 创建环境实例点击免费开通地域:广州计费方式:包年包月二、连接云开发服务1. 下载云开发服务模块包npm install @cloudbase/js-sdk -S2. 在 Vuex 文件(store/index.js)中引入import cloudbase from "@cloudbase/js-sdk"const app = cloudbase.init({ env: 'your-env-id',

2022-03-24 11:27:38 2261

原创 2022-03-23 【待办Todo】day02-待办模块页面布局

一、初始化页面视图文件1. 在 views 文件夹下新建三个视图文件Todo.vue、Data.vue、Mine.vue2. 使用一个 div 标签包裹 html 代码二、在路由中绑定视图1. 使用 import 导入组件2. 将组件与路由关联Home 组件为底部标签栏,要实现点击不同标签切换到对应页面,使用 children 属性嵌套子路由3. 设置初始页面要实现将 Todo 页面作为首页,使用 redirect 属性重定向到 Todo 组件关联的路由三、修改 Home.

2022-03-23 11:47:37 1820

原创 2022-03-22 【待办Todo】day01-项目初始化

一、全局安装 Vue CLI 脚手架npm install -g @vue/cli二、创建 Vue 2 项目1. 终端输入如下命令vue create todo2. 选择预设3. 手动配置4. 余下配置三、初始化项目文件1. 进入到项目文件夹2. 删除 components 文件夹3. router/index.js4. 删除 views 文件夹下所有 vue 文件5. App.vue四、安装 Vant UI 组件库 Vue 2 版本1. Vant 2 官网V

2022-03-22 10:49:25 663

原创 2022-03-10 重绘和重排

重绘:当元素的一部分属性发生改变,如外观、背景、颜色等不会引起布局变化,只需要浏览器根据元素的新属性重新绘制,使元素呈现新的外观叫做重绘重排::当 render 树中的一部分或者全部因为大小边距等问题发生改变而需要 DOM 树重新计算的过程重绘不一定需要重排(比如颜色的改变),重排必然导致重绘(比如改变网页位置)...

2022-03-12 23:56:28 53

原创 2022-03-09 src 和 href 的区别

src(source)指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求 src 资源时会将其指向的资源下载并应用到文档中,如 JavaScript 脚本,img 图片和 iframe 等元素;当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,类似于将所指向资源嵌入当前标签内。href(hypertext reference/超文本引用)指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加<linkh

2022-03-11 23:58:53 443

原创 2022-03-08 判断两个对象相等

判断两个对象是否指向同一内存使用 Object.getOwnPropertyNames 获取对象所有键名数组判断两个对象的键名数组是否相等遍历键名,判断键值是否都相等

2022-03-09 22:15:53 141

原创 2022-03-07 JavaScript 中返回值为 undefined 的情况

访问声明,但是没有初始化的变量访问不存在的属性访问函数的参数没有被显式地传递值访问任何被设置为 undefined 值的变量没有定义 return 的函数隐式返回函数 return 没有显式地返回任何内容...

2022-03-09 17:04:37 1087

原创 2022-03-06 宝塔面板部署 vue+node 项目

打开宝塔面板,在软件商店中搜索安装 Nginx、MySQL 和 PM2管理器点击左侧导航的 文件,进入到 /www/wwwroot 目录,将后端项目文件夹中的 node_modules 文件夹删除后,上传后端项目文件夹到此处进入上传的后端项目文件夹,点击上方的 终端,输入 npm i 安装项目所需模块点击左侧导航的 安全,输入后端项目启动文件(app.js)监听的端口(3000),点击放行如用到 MySQL 数据库,先在 数据库 中修改 root密码 为 root,然后自行在终端中使用命令行创建数.

2022-03-06 13:26:54 1630

原创 2022-03-05 使用 putty 远程连接阿里云服务器

打开 putty,在光标处输入云服务器ECS实例的公网IP地址,点击 Open输入云服务器的登录名 root 及自定义的登录密码进入宝塔面板官网,选择 Linux 版,立即安装,复制 Centos 安装命令到 putty 远程连接工具窗口安装安装完成会显示面板地址、用户名和密码,浏览器访问外网面板地址,地址中的IP为云服务器ECS实例的公网IP地址,端口8888为面板端口,“/”后的路径为面板管理入口,如访问失败请在云服务器的安全组放行8888端口输入上一步中 putty 窗口显示的用户名和密码..

2022-03-06 10:30:24 1598

原创 2022-03-04 购买阿里云服务器ECS搭建个人网站

基础配置付费模式:包年包月地域及可用区:华南3(广州)实例规格:突发性能实例 t6镜像:公共镜像 CentOS 7.4 64位存储:高效云盘 20GiB网络和安全组网络:默认专有网络带宽计费模式:按使用流量安全组:创建安全组,添加安全组规则,端口范围8888,授权对象0.0.0.0/0系统配置登陆凭证:自定义密码...

2022-03-06 00:08:20 103

原创 2022-03-03 Vue 重置 data

使用 Object.assign()vm.$data 可以获取当前状态下的 datavm.$options.data(this) 可以获取到组件初始化状态下的 dataObject.assign(this.$data, this.$options.data(this))

2022-03-03 11:04:41 386

原创 2022-03-02 模块化

模块化开发在现代开发中已是必不可少的一部分,它大大提高了项目的可维护、可拓展和可协作性。通常,我们在浏览器中使用 ES6 的模块化支持,在 Node 中使用 commonjs 的模块化支持。分类es6:import / exportcommonjs:require / module.exports / exportsamd:require / definedrequire 与 import 的区别require 支持动态导入,import 不支持,正在提案(babel 下可支持)requ

2022-03-02 23:47:27 130

原创 2022-03-01 CSS方式隐藏页面元素

opacity: 0:本质上是将元素的透明度将为0,就看起来隐藏了,但是依然占据空间且可以交互visibility: hidden:与上一个方法类似的效果,占据空间,但是不可以交互了overflow: hidden:这个只隐藏元素溢出的部分,但是占据空间且不可交互display: none:这个是彻底隐藏了元素,元素从文档流中消失,既不占据空间也不交互,也不影响布局z-index: -9999:原理是将层级放到底部,这样就被覆盖了,看起来隐藏了transform: scale(0, 0):平面变.

2022-03-02 23:33:31 72

原创 2022-02-28 viewport

<meta name="viewport" content="width=500, initial-scale=1">width:页面宽度,可以取值具体的数字,也可以是 device-width,表示跟设备宽度相等height:页面高度,可以取值具体的数字,也可以是 device-height,表示跟设备高度相等initial-scale:初始缩放比例minimum-scale:最小缩放比例maximum-scale:最大缩放比例user-scalable:是否允许用户缩放

2022-03-02 23:15:23 67

原创 2022-02-27 Vue 中使用 KeepAlive

在一些渲染成本比较高的组件需要被经常切换时,可以使用 keep-alive 来缓存这个组件。而在使用 keep-alive 后,被 keep-alive 包裹的组件在经过第一次渲染后的 vnode 以及 DOM 都会被缓存起来,然后在下一次再次渲染该组件的时候,直接从缓存中拿到对应的 vnode 和 DOM,然后渲染,并不需要再走一次组件初始化,render 和 patch 等一系列流程,减少了 script 的执行时间,性能更好。滥用 keep-alive 只会让应用变得更加卡顿,因为它会长期占用较大

2022-02-28 10:07:01 1048

原创 2022-02-26 v-for 中使用 key

使用 v-for 更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据 key 值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素。何时使用何种 key?vue 采用原地复用策略,虚拟 dom 变化时,两个虚拟 dom 节点的 key 如果一样就不会重新创建节点,而是修改原来的节点。当渲染的数据不需要保持状态时,例如常见的单纯的表格分页渲染(不包含输入,只是展示)、下拉加载更多等场景,那么使用 index 作为 key 再好不过,因为进入下一页或者上一页时就会原

2022-02-28 09:28:00 75

原创 2022-02-25 MYSQL连接查询

内连接内连接是将一张表的每一条记录去另外一张表根据条件匹配内连接语法:左表 join 右表 on 连接条件外连接外连接分为左外连接和右外连接外连接有主表和从表之分外连接是将主表的记录去匹配从表的记录区别外连接与内连接的区别在于数据匹配失败的时候,外连接会保留一条记录...

2022-02-25 22:02:22 292

原创 2022-02-24 Git 分支

查看分支列表git branch创建新分支git branch 分支名称切换分支git checkout 分支名称创建并切换新分支git checkout -b 分支名称合并分支git merge 分支名称删除分支git branch -d 分支名称将本地分支推送到远程仓库git push -u 远程仓库名称 本地分支名称:远程分支名称查看远程仓库分支列表git remote show 远程仓库名称把远程分支下载到本地仓库...

2022-02-24 08:55:09 281

原创 2022-02-23 Github 远程仓库的使用

生成 SSH key打开 Git Bashssh-keygen -t rsa -b 4096 -C “your_email@example.com”连续敲击3次回车,即可在 C:\Users\用户名文件夹.ssh 目录中生成 id_rsa 和 id_rsa.pub 两个文件配置 SSH key使用记事本打开 id_rsa.pub 文件,复制里面的文本内容在浏览器中登录 Github,点击头像 -> Settings -> SSH and GPG Keys -> New S

2022-02-23 10:02:47 517

原创 2022-02-22 .gitignore 配置文件格式规范

# 开头注释/ 结尾目录/ 开头防止递归! 开头取反*匹配零个或多个任意字符[]匹配任何一个列在方括号中的字符?只匹配一个字符-分隔两个字符,表示所有在这两个字符范围内的都可以匹配**匹配任意中间目录...

2022-02-23 09:29:59 261

原创 2022-02-21 Git 基础

配置用户信息git config --global user.name “”查看所有的全局配置项git config --list --global查看指定的全局配置项git config user.name初始化仓库git init显示文件状态git status将文件加入暂存区git add .提交更新git commit -m “”撤销对文件的修改git checkout – index.html取消暂存的文件git...

2022-02-22 11:42:45 91

原创 2022-02-20 nvm 命令

nvm list available显示可下载版本的部分列表nvm list查看目前已经安装的版本nvm install 版本号安装指定的版本的nodejsnvm uninstall 版本号卸载指定版本nodenvm version显示nvm版本nvm use 版本号使用指定版本的nodejsnvm on开启node.js版本管理nvm off关闭node.js版本管理...

2022-02-21 10:23:43 365

原创 2022-02-19 MySQL分页查询获取总数

select SQL_CALC_FOUND_ROWS from tablename;select FOUND_ROWS() as total;

2022-02-19 22:32:50 2456

原创 2022-02-18 Event Loop

JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着于是,所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任(asynchronous)同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务异步任务指的是,不进入主线程、而进入“任务队列”(task queue)的任务,只有“任务队列”通知主线程.

2022-02-18 09:31:55 165

原创 2022-02-17 Promise

promise 是 ES6 提出的一个异步编程解决方案,相比于传统的容易陷入回调地狱的异步回调方案来说,promise 会让异步的操作变得更加的优雅ES6 规定 promise 是一个构造函数,所以我们需要通过 new 关键字来生成一个 promise 的实例对象Promise 的构造函数接受一个函数作为参数,函数中的代码在 new primise 的时候,会立刻执行,我们可以在这里去执行异步代码的操作。并且该函数默认存在两个参数分别是 resolve 和 reject ,这两个参数也是函数,用来标记.

2022-02-17 23:58:29 229

原创 2022-02-16 原型与原型链

每个函数都有一个 prototype 属性,这个属性会指向一个对象,就是通过调用该构造函数而创建的实例的原型 ,可以通过实例对象的 __ proto __ 来访问到这个原型对象实例在创建时,就会默认关联原型,并且会从原型继承属性而每一个原型对象又都会存在一个 constructor 属性,这个属性会指向关联的这个构造函数当访问一个实例对象的属性时,如果说这个实例对象中没有这个属性,那么JS引擎就会去该实例对象的原型对象中去找如果属性在原型对象中也找不到,那么就会去原型的原型中去找,一直到找到最上层.

2022-02-17 23:53:02 107

原创 2022-02-15 面向对象:泛型

定义一个函数或类时,有些情况下无法确定其中要使用的具体类型(返回值、参数、属性的类型不能确定),此时泛型便能够发挥作用使用泛型:function test<T>(arg: T): T { return arg}可以同时指定多个泛型,泛型间使用逗号隔开:function test<T, K>(a: T, b: K): K { return b}test<number, string>(10, 'hello')类中同样可以使用泛型:cl

2022-02-16 10:26:24 89

原创 2022-02-14 面向对象:接口

接口的作用类似于抽象类,不同点在于接口中的所有方法和属性都是没有实值的,换句话说接口中的所有方法都是抽象方法接口主要负责定义一个类的结构,接口可以去限制一个对象的接口,对象只有包含接口中定义的所有属性和方法时才能匹配接口同时,可以让一个类去实现接口,实现接口时类中要保护接口中的所有属性...

2022-02-14 09:42:33 158

原创 2022-02-13 面向对象:继承

继承是面向对象中的又一个特性通过继承可以将其他类中的属性和方法引入到当前类中通过继承可以在不修改类的情况下完成对类的扩展发生继承时,如果子类中的方法会替换掉父类中的同名方法,这就称为方法的重写在子类中可以使用 super 来完成对父类的引用抽象类是专门用来被其他类所继承的类,它只能被其他类所继承不能用来创建实例使用 abstract 开头的方法叫做抽象方法,抽象方法没有方法体只能定义在抽象类中,继承抽象类时抽象方法必须要实现...

2022-02-13 10:31:02 58

原创 2022-02-12 面向对象:封装

对象实质上就是属性和方法的容器,它的主要作用就是存储属性和方法,这就是所谓的封装默认情况下,对象的属性是可以任意的修改的,为了确保数据的安全性,在TS中可以对属性的权限进行设置如果在声明属性时添加一个 readonly,则属性便成了只读属性无法修改TS中属性具有三种修饰符:public(默认值)可以在类、子类和对象中修改protected可以在类、子类中修改private可以在类中修改对于一些不希望被任意修改的属性,可以将其设置为 private,直.

2022-02-12 23:28:58 54

原创 2022-02-11 multer 配置磁盘存储引擎

const multer = require('multer')const path = require('path')const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, path.join(__dirname, '../uploads')) }, filename: function (req, file, cb) { const ext = file.origina

2022-02-11 16:54:01 345

原创 2022-02-10 TypeScript 中的类型

TS中的类型

2022-02-10 23:46:59 330

原创 2022-02-09 Vue3.0 全局API的转移

Vue3.0 将全局的API,即:Vue.xxx 调整到应用实例(app)上2.x 全局API(Vue)3.x 实例API(app)Vue.config.xxxxapp.config.xxxxVue.config.productionTip移除Vue.componentapp.componentVue.directiveapp.directiveVue.mixinapp.mixinVue.useapp.useVue.prototypea

2022-02-09 10:39:24 223

原创 2022-02-08 Vue3.0 中的 Teleport 和 Suspense

Teleport将组件 html 结构移动到指定位置<teleport to="移动位置"> <div v-if="isShow" class="mask"> <div class="dialog"> <h3>我是一个弹窗</h3> <button @click="isShow = false">关闭弹窗</button> </div> </div></telepo

2022-02-08 16:30:03 69

原创 2022-02-07 Vue3.0 部分 Compositon API

shallowReactive只处理对象最外层属性的响应式(浅响应式)shallowRef只处理基本数据类型的响应式, 不进行对象的响应式处理readonly让一个响应式数据变为只读的(深只读)shallowReadonly让一个响应式数据变为只读的(浅只读)toRaw将一个由 reactive 生成的响应式对象转为普通对象markRaw标记一个对象,使其永远不会再成为响应式对象customRef创建一个自定义的 ref,并对其依赖项跟踪...

2022-02-07 11:05:26 252

原创 2022-02-06 Vue3.0 的 toRef

作用:创建一个 ref 对象,其 value 值指向另一个对象中的某个属性语法:const name = toRef(person, ‘name’)应用:要将响应式对象中的某个属性单独提供给外部使用时扩展:toRefs 与 toRef 功能一致,但可以批量创建多个 ref 对象,语法:toRefs(person)...

2022-02-06 23:03:45 421

原创 2022-02-05 Vue3.0 的生命周期

Vue3.0 也提供了 Composition API 形式的生命周期钩子,与 Vue2.x 中钩子对应关系如下:beforeCreatesetup()createdsetup()beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeUnmountonBeforeUnmountunmountedonUnmou

2022-02-05 22:19:27 213

原创 2022-02-04 Vue3.0 中的 watch 函数和 watchEffect 函数

watch 函数监视 reactive 定义的响应式数据时:oldValue 无法正确获取、强制开启了深度监视(deep配置失效)监视 reactive 定义的响应式数据中某个属性时:deep配置有效既要指明监视的属性,也要指明监视的回调watchEffect 函数不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性...

2022-02-04 20:08:19 525

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除