- 博客(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
494
原创 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
1291
原创 2022-03-24 【待办Todo】day03-连接数据库
一、搭建云开发环境 1. 注册腾讯云账号 腾讯云开发 CloudBase 2. 创建环境实例 点击免费开通 地域:广州 计费方式:包年包月 二、连接云开发服务 1. 下载云开发服务模块包 npm install @cloudbase/js-sdk -S 2. 在 Vuex 文件(store/index.js)中引入 import cloudbase from "@cloudbase/js-sdk" const app = cloudbase.init({ env: 'your-env-id',
2022-03-24 11:27:38
2403
原创 2022-03-23 【待办Todo】day02-待办模块页面布局
一、初始化页面视图文件 1. 在 views 文件夹下新建三个视图文件 Todo.vue、Data.vue、Mine.vue 2. 使用一个 div 标签包裹 html 代码 二、在路由中绑定视图 1. 使用 import 导入组件 2. 将组件与路由关联 Home 组件为底部标签栏,要实现点击不同标签切换到对应页面,使用 children 属性嵌套子路由 3. 设置初始页面 要实现将 Todo 页面作为首页,使用 redirect 属性重定向到 Todo 组件关联的路由 三、修改 Home.
2022-03-23 11:47:37
1981
原创 2022-03-22 【待办Todo】day01-项目初始化
一、全局安装 Vue CLI 脚手架 npm install -g @vue/cli 二、创建 Vue 2 项目 1. 终端输入如下命令 vue create todo 2. 选择预设 3. 手动配置 4. 余下配置 三、初始化项目文件 1. 进入到项目文件夹 2. 删除 components 文件夹 3. router/index.js 4. 删除 views 文件夹下所有 vue 文件 5. App.vue 四、安装 Vant UI 组件库 Vue 2 版本 1. Vant 2 官网 V
2022-03-22 10:49:25
733
原创 2022-03-10 重绘和重排
重绘:当元素的一部分属性发生改变,如外观、背景、颜色等不会引起布局变化,只需要浏览器根据元素的新属性重新绘制,使元素呈现新的外观叫做重绘 重排::当 render 树中的一部分或者全部因为大小边距等问题发生改变而需要 DOM 树重新计算的过程 重绘不一定需要重排(比如颜色的改变),重排必然导致重绘(比如改变网页位置) ...
2022-03-12 23:56:28
102
原创 2022-03-09 src 和 href 的区别
src(source)指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求 src 资源时会将其指向的资源下载并应用到文档中,如 JavaScript 脚本,img 图片和 iframe 等元素;当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,类似于将所指向资源嵌入当前标签内。 href(hypertext reference/超文本引用)指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加<link h
2022-03-11 23:58:53
485
原创 2022-03-08 判断两个对象相等
判断两个对象是否指向同一内存 使用 Object.getOwnPropertyNames 获取对象所有键名数组 判断两个对象的键名数组是否相等 遍历键名,判断键值是否都相等
2022-03-09 22:15:53
197
原创 2022-03-07 JavaScript 中返回值为 undefined 的情况
访问声明,但是没有初始化的变量 访问不存在的属性 访问函数的参数没有被显式地传递值 访问任何被设置为 undefined 值的变量 没有定义 return 的函数隐式返回 函数 return 没有显式地返回任何内容 ...
2022-03-09 17:04:37
1198
原创 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
1783
原创 2022-03-05 使用 putty 远程连接阿里云服务器
打开 putty,在光标处输入云服务器ECS实例的公网IP地址,点击 Open 输入云服务器的登录名 root 及自定义的登录密码 进入宝塔面板官网,选择 Linux 版,立即安装,复制 Centos 安装命令到 putty 远程连接工具窗口安装 安装完成会显示面板地址、用户名和密码,浏览器访问外网面板地址,地址中的IP为云服务器ECS实例的公网IP地址,端口8888为面板端口,“/”后的路径为面板管理入口,如访问失败请在云服务器的安全组放行8888端口 输入上一步中 putty 窗口显示的用户名和密码..
2022-03-06 10:30:24
1801
原创 2022-03-04 购买阿里云服务器ECS搭建个人网站
基础配置 付费模式:包年包月 地域及可用区:华南3(广州) 实例规格:突发性能实例 t6 镜像:公共镜像 CentOS 7.4 64位 存储:高效云盘 20GiB 网络和安全组 网络:默认专有网络 带宽计费模式:按使用流量 安全组:创建安全组,添加安全组规则,端口范围8888,授权对象0.0.0.0/0 系统配置 登陆凭证:自定义密码 ...
2022-03-06 00:08:20
157
原创 2022-03-03 Vue 重置 data
使用 Object.assign() vm.$data 可以获取当前状态下的 data vm.$options.data(this) 可以获取到组件初始化状态下的 data Object.assign(this.$data, this.$options.data(this))
2022-03-03 11:04:41
441
原创 2022-03-02 模块化
模块化开发在现代开发中已是必不可少的一部分,它大大提高了项目的可维护、可拓展和可协作性。通常,我们在浏览器中使用 ES6 的模块化支持,在 Node 中使用 commonjs 的模块化支持。 分类 es6:import / export commonjs:require / module.exports / exports amd:require / defined require 与 import 的区别 require 支持动态导入,import 不支持,正在提案(babel 下可支持) requ
2022-03-02 23:47:27
184
原创 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
143
原创 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
124
原创 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
1176
原创 2022-02-26 v-for 中使用 key
使用 v-for 更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据 key 值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素。 何时使用何种 key? vue 采用原地复用策略,虚拟 dom 变化时,两个虚拟 dom 节点的 key 如果一样就不会重新创建节点,而是修改原来的节点。 当渲染的数据不需要保持状态时,例如常见的单纯的表格分页渲染(不包含输入,只是展示)、下拉加载更多等场景,那么使用 index 作为 key 再好不过,因为进入下一页或者上一页时就会原
2022-02-28 09:28:00
145
原创 2022-02-25 MYSQL连接查询
内连接 内连接是将一张表的每一条记录去另外一张表根据条件匹配 内连接语法:左表 join 右表 on 连接条件 外连接 外连接分为左外连接和右外连接 外连接有主表和从表之分 外连接是将主表的记录去匹配从表的记录 区别 外连接与内连接的区别在于数据匹配失败的时候,外连接会保留一条记录 ...
2022-02-25 22:02:22
361
原创 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
374
原创 2022-02-23 Github 远程仓库的使用
生成 SSH key 打开 Git Bash ssh-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
580
原创 2022-02-22 .gitignore 配置文件格式规范
# 开头 注释 / 结尾 目录 / 开头 防止递归 ! 开头 取反 * 匹配零个或多个任意字符 [] 匹配任何一个列在方括号中的字符 ? 只匹配一个字符 - 分隔两个字符,表示所有在这两个字符范围内的都可以匹配 ** 匹配任意中间目录 ...
2022-02-23 09:29:59
336
原创 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
134
原创 2022-02-20 nvm 命令
nvm list available 显示可下载版本的部分列表 nvm list 查看目前已经安装的版本 nvm install 版本号 安装指定的版本的nodejs nvm uninstall 版本号 卸载指定版本node nvm version 显示nvm版本 nvm use 版本号 使用指定版本的nodejs nvm on 开启node.js版本管理 nvm off 关闭node.js版本管理 ...
2022-02-21 10:23:43
404
原创 2022-02-19 MySQL分页查询获取总数
select SQL_CALC_FOUND_ROWS from tablename; select FOUND_ROWS() as total;
2022-02-19 22:32:50
2589
原创 2022-02-18 Event Loop
JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事 单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着 于是,所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任(asynchronous) 同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务 异步任务指的是,不进入主线程、而进入“任务队列”(task queue)的任务,只有“任务队列”通知主线程.
2022-02-18 09:31:55
205
原创 2022-02-17 Promise
promise 是 ES6 提出的一个异步编程解决方案,相比于传统的容易陷入回调地狱的异步回调方案来说,promise 会让异步的操作变得更加的优雅 ES6 规定 promise 是一个构造函数,所以我们需要通过 new 关键字来生成一个 promise 的实例对象 Promise 的构造函数接受一个函数作为参数,函数中的代码在 new primise 的时候,会立刻执行,我们可以在这里去执行异步代码的操作。并且该函数默认存在两个参数分别是 resolve 和 reject ,这两个参数也是函数,用来标记.
2022-02-17 23:58:29
268
原创 2022-02-16 原型与原型链
每个函数都有一个 prototype 属性,这个属性会指向一个对象,就是通过调用该构造函数而创建的实例的原型 ,可以通过实例对象的 __ proto __ 来访问到这个原型对象 实例在创建时,就会默认关联原型,并且会从原型继承属性 而每一个原型对象又都会存在一个 constructor 属性,这个属性会指向关联的这个构造函数 当访问一个实例对象的属性时,如果说这个实例对象中没有这个属性,那么JS引擎就会去该实例对象的原型对象中去找 如果属性在原型对象中也找不到,那么就会去原型的原型中去找,一直到找到最上层.
2022-02-17 23:53:02
147
原创 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
132
原创 2022-02-14 面向对象:接口
接口的作用类似于抽象类,不同点在于接口中的所有方法和属性都是没有实值的,换句话说接口中的所有方法都是抽象方法 接口主要负责定义一个类的结构,接口可以去限制一个对象的接口,对象只有包含接口中定义的所有属性和方法时才能匹配接口 同时,可以让一个类去实现接口,实现接口时类中要保护接口中的所有属性 ...
2022-02-14 09:42:33
197
原创 2022-02-13 面向对象:继承
继承是面向对象中的又一个特性 通过继承可以将其他类中的属性和方法引入到当前类中 通过继承可以在不修改类的情况下完成对类的扩展 发生继承时,如果子类中的方法会替换掉父类中的同名方法,这就称为方法的重写 在子类中可以使用 super 来完成对父类的引用 抽象类是专门用来被其他类所继承的类,它只能被其他类所继承不能用来创建实例 使用 abstract 开头的方法叫做抽象方法,抽象方法没有方法体只能定义在抽象类中,继承抽象类时抽象方法必须要实现 ...
2022-02-13 10:31:02
113
原创 2022-02-12 面向对象:封装
对象实质上就是属性和方法的容器,它的主要作用就是存储属性和方法,这就是所谓的封装 默认情况下,对象的属性是可以任意的修改的,为了确保数据的安全性,在TS中可以对属性的权限进行设置 如果在声明属性时添加一个 readonly,则属性便成了只读属性无法修改 TS中属性具有三种修饰符: public(默认值) 可以在类、子类和对象中修改 protected 可以在类、子类中修改 private 可以在类中修改 对于一些不希望被任意修改的属性,可以将其设置为 private,直.
2022-02-12 23:28:58
94
原创 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
456
原创 2022-02-09 Vue3.0 全局API的转移
Vue3.0 将全局的API,即:Vue.xxx 调整到应用实例(app)上 2.x 全局API(Vue) 3.x 实例API(app) Vue.config.xxxx app.config.xxxx Vue.config.productionTip 移除 Vue.component app.component Vue.directive app.directive Vue.mixin app.mixin Vue.use app.use Vue.prototype a
2022-02-09 10:39:24
272
原创 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
109
原创 2022-02-07 Vue3.0 部分 Compositon API
shallowReactive 只处理对象最外层属性的响应式(浅响应式) shallowRef 只处理基本数据类型的响应式, 不进行对象的响应式处理 readonly 让一个响应式数据变为只读的(深只读) shallowReadonly 让一个响应式数据变为只读的(浅只读) toRaw 将一个由 reactive 生成的响应式对象转为普通对象 markRaw 标记一个对象,使其永远不会再成为响应式对象 customRef 创建一个自定义的 ref,并对其依赖项跟踪...
2022-02-07 11:05:26
293
原创 2022-02-06 Vue3.0 的 toRef
作用:创建一个 ref 对象,其 value 值指向另一个对象中的某个属性 语法:const name = toRef(person, ‘name’) 应用:要将响应式对象中的某个属性单独提供给外部使用时 扩展:toRefs 与 toRef 功能一致,但可以批量创建多个 ref 对象,语法:toRefs(person) ...
2022-02-06 23:03:45
481
原创 2022-02-05 Vue3.0 的生命周期
Vue3.0 也提供了 Composition API 形式的生命周期钩子,与 Vue2.x 中钩子对应关系如下: beforeCreate setup() created setup() beforeMount onBeforeMount mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated beforeUnmount onBeforeUnmount unmounted onUnmou
2022-02-05 22:19:27
262
原创 2022-02-04 Vue3.0 中的 watch 函数和 watchEffect 函数
watch 函数 监视 reactive 定义的响应式数据时:oldValue 无法正确获取、强制开启了深度监视(deep配置失效) 监视 reactive 定义的响应式数据中某个属性时:deep配置有效 既要指明监视的属性,也要指明监视的回调 watchEffect 函数 不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性 ...
2022-02-04 20:08:19
589
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅