- 博客(24)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 vue3 + TS + Ant Design Vue table表格树结构自定义图标
html <a-table :columns="columns" :data-source="data" bordered :pagination="false" :expandIconColumnIndex="1" :expandIcon="iconFun" >ts<script lang="ts">import { defineComponent, ref } from "vue";.
2021-12-08 16:23:07
1325
原创 2021-11-09
代码<template> <div style="width: calc(100vw - 300px); height: calc(80vh - 10px)"> <el-scrollbar always> <canvas ref="canvas" id="cavsElem" :width="width" :height="height"> 您的浏览器不支持canvas, 请升级更换或升级浏览器 </.
2021-11-09 18:24:11
563
原创 城市数据json
诶 又凑了一篇城市数据https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json
2021-07-23 17:13:42
178
原创 vue2与vue3的 区别和改动
1. vue3的优点1.性能比Vue2.x快1.2~2倍 原因1： diff方法优化： vue2中的虚拟dom是全量的对比（每个节点不论写死的还是动态的都会比较） vue3新增了静态标记（patchflag）与上次虚拟节点对比时，只对比带有patch flag的节点（动态数据所在的节点）；可通过flag信息 得知当前节点要对比的具体内容 原因2：静态提升 vue2无论元素是否参与更新，每次都会重新创建然后再渲染 vue3对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时
2021-07-23 14:36:08
465
转载 我猜你不会的nexttick
题目<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body>
2021-07-23 08:39:28
75
原创 route-link 小解
router-link<router-link >组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的<a>标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。<router-link>比起写死的<a href="...">会好一些，理由如下：无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你
2021-07-22 19:37:33
1338
原创 数据懒加载
import { ref } from 'vue'import { useIntersectionObserver } from '@vueuse/core'/** * 数据懒加载 * fn() 要执行的方法 * return 观察的dom元素 */export default (fn) => { // 1. stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为） // 2. target 是观察的目标容器 dom对象 | 组件对象 // 3. is
2021-07-22 18:12:46
115
原创 骨架屏代码
骨架屏代码<template> <div class="xtx-skeleton" :style="{width,height}" :class="{shan:animated}" > <!-- 1 盒子--> <div class="block" :style="{backgroundColor:bg}" ></div> <!-- 2 闪效果 xtx-
2021-07-17 11:38:47
131
原创 vue3初始化项目的一些实用npm包
项目样式初始化 npm i normalize.css //导入 import 'normalize.css'还要定义初始化的一些less文件 在main.js就是中引用vuex持久化插件 npm i vuex-persistedstate在store/index.js中配置 import createPersistedstate from 'vuex-persistedstate' plugins: [ createPersistedstate({ .
2021-07-16 09:42:13
330
原创 vue2 与 vue3 项目的区别
1 routervue2import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', /
2021-07-14 17:51:55
301
原创 vue3调试工具
这是一个悲伤的故事我整了4个多小时终于好了 嘤嘤嘤话不多说上地址git clone git@github.com:xiaocai12138529/vue-devtools.git链接
2021-07-13 23:01:17
782
1
原创 Vite初使用
1. 什么是Vitevite是vue作者开发的一款意图取代webpack的工具实现原理是利用ES6的import发送请求去加载文件的特性，拦截这些请求，做些预编译，省去webpack冗长的打包时间安装vitenpm install -g create-vite-app利用vite创建vue3项目create-vite-app projectName安装依赖运行项目cd projectNamenpm installnpm run dev...
2021-07-13 18:39:56
57
原创 vue pull 合并项目
1 切换到develop分支 git checkout develop2 拉取数据git pull3 切回自己的分支不要 npm i不要 npm i不要 npm i git checkout feature/questions-new4 合并拉取到的代码git merge develop这个时候不要启动项目5 接下来在npm inpm i6 启动项目npm run serve...
2021-07-09 19:16:35
109
原创 js数组去重的方法
1双层for循环遍历数组let arr = [1, 2, 3, 4, 3, 2, 3, 4, 6, 7, 6]// 双层for循环遍历数组function f (arr) { for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i] == arr[j]) { arr.splice(j, 1) j--
2021-07-01 11:00:36
104
原创 js-分页 简单实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
2021-06-28 19:18:46
102
1
原创 element ui 分页(pagination)组件的current-page属性不更新视图的问题
今天在做项目的时候发现:current-page.sync设置了以后 分页的数据变化了 但是视图缺没有更新1 这里的数据是最后一页的数据是最后一页的 页码也增加的 视图也渲染了 但是相对应的 分页数据缺没有更新查看工具对比后发现 这里的数据修改是不会更新视图的这里是官网对current-page的描述由此可见这个属性的值只能是一个简单类型的number值而我设置的是一个对象的属性由此可以得出结论current-page只能监听到简单类型的数据2 解决办法我们可以再定义一个数据
2021-06-27 19:05:48
1919
原创 JS-Array的那么几个方法
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array属性：Array.length方法:Array.from()从类数组对象或者可迭代对象中创建一个新的数组实例。Array.isArray()判断一个变量是否属于数组’Array.of()根据一组参数来创建新的数组实例，支持任意的参数数量和类型。数组实例:所有的数组实例都会从Array.prototype继承属性和方法修改
2021-06-25 17:40:29
54
原创 git 常用命令
git config --list 查看配置信息git config --list --global 查看全局配置git config --global user.name "xiaocai" 设置全局用户名git config --global user.email "1766607952@qq.com"git init 初始化文件git status 查看文件状态git status -s 精简查看文件状态git add . 提交文件git commit
2021-06-25 16:59:50
26
原创 js之那个牛逼的reduce
1 reduce介绍reduce的官网定义 ：对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。形式 ：array.reduce((t, v, i, a) => {}, initValue)参数callback：回调函数(必选)initValue：初始值(可选)回调函数的参数total(t)：累计器完成计算的返回值(必选)value(v)：当前元素(必选)index(i)：当前元素的索引(可选)array(a)：当前元素所属的
2021-06-22 21:00:11
38
原创 vue之花里胡哨的滚动条
官网据说官网不稳定1下载 npm i vuescroll -S2 引入2.1 全局引入import Vue from 'vue';import vuescroll from 'vuescroll';// 你可以在这里设置全局配置Vue.use(vuescroll, { ops: {}, // 在这里设置全局默认配置 name: 'myScroll' // 在这里自定义组件名字，默认是vueScroll});/* * 或者 */Vue.use(vuescroll)
2021-06-22 17:04:43
98
原创 2021-06-04创建一个vue项目
hmtt项目初始技术选型vue.js： 核心vuevuex： 状态管理插件(数据集中管理)vue-router： 路由插件axios： ajax请求json-bigint： 最大安全数值处理socket.io-client： 即时通讯库vant： 移动组件库amfe-flexible： rem适配vue-lazyload： 图片懒加载打包App：DCLOUD 打包1.创建项目(使用vuecli)1.1vue create hmtt1.2选用自定义特性需要选中： Babel,
2021-06-06 18:00:45
138
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人