- 博客(37)
- 收藏
- 关注
RSS订阅原创 Tscript的基础用法和函数的用法
Tyepscript安装 编译一. 安装 Typescriptcnpm install -g typescript二. 检查是否安装成功tsc -v三. Typescript开发工具Vscode自动编译.ts文件在当前文件夹输入cmd 打开小黑框输入tsc --init 自动生成tsconfig.json 文件打开生成的tsconfig.json 文件 outDir 解开改成 ./js然后在Vcod 里点击终端 然后点击运行任务 点击typescr...
2021-06-17 00:42:35
792
原创 vue3.x新增特性
1.vue3.x新增特性1.1 vue3.x相关资源vue3.x官方仓库：https://github.com/vuejs/vue-nextvue3.x中文官方文档：https://v3.cn.vuejs.org/vue-cli官方仓库：https://github.com/vuejs/vue-clivue-cli官方文档：https://cli.vuejs.org/zh/1.2 创建vue3.x项目方式主流创建vue3项目方式：1.vue-cli 脚本架的版本至少>=@vue/cl
2021-05-24 17:12:51
178
原创 .H5适配解决方案
1.根据屏幕宽度除以10,将每份的宽度做为html根字号2.引入一个适配的js，通常叫rem.js来实现动态改变html根字号3.根据编辑器不同，安装内置适配插件4.使用sass封装一个适配方法，将你的Px值传入这个适配方法中，自动计算出rem5.利用postcss 实现适配2和5方案结合使用要计算的rem=目标px/html根字号6rem=300px/100postcss-px2vw1.postcss-px2vw:该插件主要结合了 postcss-pxtorem 和 postcss-p
2021-05-19 18:52:38
184
原创 weboack的搭建
1.webpack是什么webpack是一个模块化构建打包工具vue,react用的脚手架底层都是基于webpack搭建的webpack在公司中主要用于公司内部搭建前端环境掌握node,webpack可以说是晋升架构师升的重要一环！如果你会了webpack,你在vue脚手架中也可以轻松的配置构建工具除了webpack之处，还有grunt,gulp,rollup…2.webpack使用webpack中文文档：https://webpack.docschina.org/concepts/学
2021-05-17 16:35:23
541
3
原创 vue中使用数据可视化
1.多坐标系就是一个图表实现展现多个坐标系，一个坐标系就是一个grid这里主要用到关键几个属性：grid,xAxis,yAxis,gridIndex,xAxisIndex,yAxisIndexgrid：定义坐标系网络xAxis：x轴yAxis: y轴gridIndex：网络的下标 从0开始，0代码第一个网格坐标,1代码第2个坐标系。。。。xAxisIndex：代表横轴坐标编号 0代码第1个横轴。。。。yAxisIndex：代纵轴坐标编号 0代码第1个纵轴。。。。完整示例代码如下：&l
2021-05-12 18:38:04
1268
原创 echarts的使用
Echarts优势开源，免费，并且是百度开发，有详细中文文档Echarts如何使用 <style> #box { width:100%; height: 400px; border:1px solid #f00; } </style> <div id="box"></div> <script src="./lib/echar
2021-05-11 16:23:37
223
1
原创 数据可视化
什么是数据可视化数据可书画是关于数据视觉的表现形式数据可视化的基础就是：计算机的图形学数据可视化基础核心技术canvas<canvas id="box" width="800" height="400"></canvas>1.注意：width和height最好canvas标签上添加，不要用css中的width,height2.如何绘制常用图形 第一步： 获取canvas并创建绘图对象 //获取canvas标签,只是一个DOM对象 let b
2021-05-10 20:39:40
106
原创 Echarts图表的应用
如何使用Echarts第一步：下载安装npm install echarts --save第二步：在组件中引入import * as Echarts from 'echarts'第三步：创建一个div容器并创建化图表对象 <div id="main" style="width: 600px;height:400px;"></div>第四步：指定配置项 const option=await getEchartsAPI() //合并图表初始数据和从接口返回的.
2021-05-07 16:50:55
115
1
原创 vue的富文本编辑器
官网地址：https://www.npmjs.com/package/vue-quill-editor使用步骤：1.安装npm install vue-quill-editor --save2.引入 //引入富文本编辑器 import VueQuillEditor from 'vue-quill-editor' //引入vue-quill-editor相关样式 import 'quill/dist/quill.core.css' import 'quill/dist/quill
2021-05-06 21:38:46
75
原创 element-ui之级联选择器的使用详细过程
第一步：先获取数据第二步：在前台写代码展示数据 <el-cascader :change-on-select="true" :props="defaultParams" :options="options" v-model="selectedOptions" :clearable="true" ></el-cascader>date(){ return{ options:[], se
2021-04-28 21:49:29
561
原创 vue-table-with-tree-grid的树形表格组件如何使用
平时我们用element-ui组件库的时候，用的很多组件都可以解决日常工作中的需要，今天遇到了一个需要搭建一个树形结构的表格，但element组件没有提供，这时就需要自己去通过第三方组件来实现这个功能了。(如图所示)那么如何才能实现这样的结构方式呢？就需要通过vue-table-with-tree-grid这个组件了一、在vue脚手架中，安装 npm i vue-table-with-tree-grid -S这个二、在你的项目的main.js文件中引入，如图：这时就可以搭建表格了，也可以打开gi
2021-04-28 00:08:45
595
1
原创 后台分配权限(接口)
如何获取当前角色所拥有权限的id1.递归实现： getCheckedRightsIds(node,arr) { //当前node没有children,意味着node没有子级，则将当前node的id保存到数组中 if(!node.children) { return arr.push(node.id) } //如果node含有children，则用递用调用getCheckedRightsIds函数 node.
2021-04-27 00:10:46
169
原创 filter过滤器(全局和局部)
1 后台时间戳的返回处理通常后台返回的是时间戳 例如：1619314980 时间戳：即1970年1月1日到现在的经过的毫秒数前端处理时间戳有两种方式：1.利用new Date日期对象处理 var d=new Date(传入时间戳*1000) 再通过getFullYear(),getMonth(),getDate(),getHours(),getMinutes(),getSeconds() 2.利用moment.js第三方日期处理函数来实现【公司用的多】 网址:http://mo
2021-04-25 21:36:47
153
原创 防抖节流
防抖在固定时间内，如果有事件触发，则会再延长固定时间，如果在固定时间之内，一直没有触发事件，就会再次执行函数。电梯，不是陌生的吧，按下电梯，电梯门打开，从电梯门打开到电梯门关上的事件是10s,如果在这10s之内没有人关上电梯，那么10s后就会自动关上电梯，这个过程就是在固定时间之内，一直没有触发事件，就会再次执行函数,继续想象，在电梯闭合的一瞬间，看见一个小姐姐跑过来赶电梯，这时候极具绅士风度的你按下了开电梯的按钮，电梯收到指令会再次打开电梯门，这时候就会再次打开电梯10s，这就解释了在固定时间内，如果
2021-04-23 00:04:30
61
原创 vue封装api接口
vue axios封装以及API统一管理在vue项目中，每次和后台交互的时候，经常用到的就是axios请求数据，它是基于promise的http库，可运行在浏览器端和node.js中。当项目越来越大的时候，接口的请求也会越来越多，怎么去管理这些接口?多人合作怎么处理?只有合理的规划，才能方便往后的维护以及修改，第一步安装axioscnpm install axios --save // 只有安装了淘宝镜像之后才可以使用cnpomnpm install axios --save // 这是没有安
2021-04-22 00:57:59
212
原创 了解vue
什么是vue全家桶，全家桶都包括什么ue全家桶是基于vue开发必备的也是必学的东西，概括起来就是：、1.项目构建工具、2.路由、3.状态管理、4.http请求工具。最常见常用的vue全家桶简单的介绍一下，希望可以帮助你了解认识学会vue全家桶！使用vue脚手架搭建项目使用 vue-cli 搭建项目下面整个过程是基于已经安装node.js和cnpm的基础上，node.js如何安装就不在这里详说了。如何全局化安装cnpm，这里简单提一下：(淘宝镜像命令)npm install cnpm
2021-04-20 22:01:00
85
原创 小程序的登录授权
登录授权通过wx.login获取code通过code换取用户的匿名信息,并将获取的token缓存起来通过调取微信wx.getUserProfile()方法来获取用户详细信息再调公司后台修改用户的接口(/user/modify)，来更新用户信息最后拉取用户信息，将用户信息渲染到视图上第一步：通过wx.login得到code,调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息 第二步：通过调用公司后台接口（自动注册/登录接口）获取腾讯用户的匿名信息 //引入接口cons
2021-04-19 21:57:19
80
原创 javaScript的数组方法
js数据类型js数据类型分为基本数据类型和引用数据类型基本数据类型有string number boolean null undefined symbol引用数据类型有object array function检测数据类型的方法有typeof可以判断数据类型 但是无法区分 array object null等数据类型 因为 返回值都是objectinstanceof 不考虑 null 和 undefined（这两个比较特殊）以对象字面量创建的基本数据类型constructor
2021-04-16 22:55:42
60
原创 javaScript函数
函数的定义方式函数声明式：function 函数名() { //...}特点：无论在函数定义前，还是函数定义后调用，都能执行为什么都能执行？？？因为函数声明方式：函数提升函数表达式var 变量名=function() { //....}变量名()特点：只能在函数定义后调用，才能执行this指向在全局调用函数,函数中的this指向windowfunction fn() { //this === window}javaScript异步同步与异步
2021-04-15 21:39:45
79
原创 小程序的本地存储和登录授权
小程序的本地存储本地存储有同步，也有异步，用法一样，同步与异步的区别，就是我们平时理解的同步与异步这个本地数据的生命周期和小程序同步，如果要清除数据，我们可以用代码删除，或者用户删除（卸载）小程序，用户清理微信数据本地数据单个键最多只能存1M内容，所有本地数据不能超过10M. <button bindtap="cun">存数据</button> <button bindtap="qu">取数据</button> <button b
2021-04-14 22:59:59
207
1
原创 小程序的本地存储和登录授权
一、小程序的存储们在开发小程序的时候，常常会用到本地存储，下面我就来给大家分享一下微信本地存储的使用。一、数据支持需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。二、方法1、同步（1）wx.setStorageSync(); //存储值（2）wx.removeStorageSync(); // 移除指定的值（3）wx.getStorageSync(); // 获取值（4）wx.getStorageInfoSync(); // 获取当前 stor
2021-04-14 22:09:47
307
原创 小程序 slot
什么是slot(插槽)slot: 组件的插槽是为了让我们封装的组件更具有扩展性让使用者可以决定组价内部的一些内容到底展示什么例如移动网站中的导航栏单个插槽的使用：注意： 在slot组件页面中slot可以是单标签也可以是双标签，而在页面使用时必须是双标签slot的使用<!--第一步：封装组件，components/slot/slot.wxml--><!--components/slot/slot.wxml--><view> <text&g
2021-04-13 22:01:23
199
原创 小程序组件化
组件是什么组件：具有完整功能（html-视图,css-样式,js-逻辑），并且独立运行的模块小程序组件分类内置组件：小程序内置的组件，直接拿来就可以使用，无需安装例如： view,text,image,button,swiper,switch…第三方组件:需要安装，引入，再使用最好使用就是vant UIvant ui官方文档如何让小程序支持npm生成package.json:npm init -y安装vant: npm i @vant/weapp -S --production
2021-04-12 21:45:56
112
原创 2021-04-08
一、微信小程序请求实现方式小程序发起网络请求 需用到 wx.request(Object object)wx.request({ url: 'test.php', //仅为示例，并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) }})
2021-04-08 22:00:05
40
原创 小程序开发
小程序布局与普通Web开发差异小程序的设计稿通常是按照iPhone6 宽度一般韦750 的尺寸设计的小程序代码是真的h5代码吗？小程序当然不是H5，它也不用html写，使用WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。小程序样式导入使用@import语句可以导入外联样式表，只支持相对路径例如：@import "/public/css/style.wxss";行内样式 <view style="
2021-04-07 21:51:32
73
原创 从这里走向小程序
微信小程序1、微信小程序是什么微信小程序是一种不需要下载安装即可使用的应用微信小是2017年1月9日，张小龙在2017微信公开课Pro上发布的微信小程序正式上线。2、小程序项目的基本文件类型第一块：JSON上面提到：每个分页面分为JS（页面逻辑）、JSON（页面配置）、WXML（页面结构）、WXSS（页面样式表）四个模块，那么这些页面分别都有什么用途呢？JSON是页面配置文件，可以对本页面的窗口表现进行配置，文件内容为一个 JSON 对象，会涉及到很多的属性。比如navigationBarT
2021-04-06 21:52:05
50
原创 从这里走向JavaScript
JavaScripjavaScript:是一种单线程的可以在浏览器或服务端的弱类脚本语言单线程 ：进程线程完成一项任务所经历的过程线程比进程的范围要小一个进程可以包括多个线程弱类型:变量的类型由赋值的类型决定脚本语言:JavaScript是一种解释型的脚本语言，是在程序的运行过程中逐行进行解释执行，不需要预编译。；而Java、C++等语言需要先编译后执行；JavaScipe发展史javaScript是1995年诞生的javaScript于1997发布jav
2021-04-02 21:33:26
58
原创 从这里走向GIT
了解Git是一种分布式的版本管理系统，Linux的创造者Linus写的。GitHub是基于git的代码库托管站，也算是程序员的SMS，其中一个主要的开源代码发布或托管站git的作用就是对文件进行版本管理，方便在不同版本进行切换修改，类似文件分不同时间备份让后需要时找回其中一份代替，不过更方便使用Git的常用指令git init 初始化仓库git add 文件名:将文件添加到暂存区git commit -m “提交描述”Git常用的查看指令 1. git status 查看仓库当前的状
2021-04-01 20:47:34
100
原创 日期对象
浏览器对象模型BOMBOM对象的概念Date 对象是 JavaScript 原生的时间库。它以国际标准时间（UTC）1970年1月1日00:00:00作为时间的零点，可以表示的时间范围是前后各1亿天（单位为毫秒）。Date对象保存的日期能够精确到1970年 1月1日之前或之后的285616年。1m = 1msBOM对象的核心BOM的核心对象是window(窗口对象); window是...
2020-01-14 18:53:42
69
原创 BOM对象
浏览器对象模型BOMBOM对象的概念BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览 器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其 他对象都是该对象的子对象。BOM对象的核心BOM的核心对象是window(窗口对象); window是浏览器的顶级对象，当...
2020-01-14 18:43:43
98
原创 DOM
DOM 的概念及作用文档对象模型（Document Object Model，简称DOM），通过HTMLDOM,可访问javascriptHTML文档的所有元素DOM树![在这里插入图片描述](https://img-blog.csdnimg.cn/20200114143800108.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGV...
2020-01-14 16:21:05
79
原创 String对象和Math对象
什么是String对象String对象：用来处理文本字符串的一个对象String对象创建字面量的方式创建字符串字面量的方式创建字符串 var str1="world"; console.log(str1);构造函数创建字符串var str=new String("hellow"); console.log(str);String对象的方法使用charAt() 方法从一个字符串中返回...
2020-01-14 15:08:43
93
原创 JAVAscript数组
数组数组的概念所谓数组，就是将多个元素按一定顺序排列放到一个集合中，那么这个集合我们就称之位数组。数组的定义数组是一个有序的列表 ，可以在数组中存放的数据， 并且数组的长度可以动态的调整数组创建的两种方式字面量方式创建var arr=[]; 空数组var arr=[12,13,14,15] 含有元素的数组构造函数的定义法var arr = new Array();空数...
2019-12-23 11:51:17
51
原创 javascript函数
函数函数的概念函数是当被调用时执行的可重复使用的代码块函数命名规则：1、有数字，字母，下划线-，美元符号组成2、不能以数字开头3、不能是关键字4、区分大小写5、驼峰命名法函数调用的两种方式1、function fn(){ var sum = 0; for(var i = 1;i<=100;i++){ sum +=i } ...
2019-12-23 10:52:51
112
原创 JAVAscript语句分类
JAVAscript 语句分类JAVAscript 中 if 语句单分支 var a = 30; if(a>18){ alert("我成年了"); } 多分支 var d=prompt("请输入成绩") if(d>100||d&...
2019-12-19 11:29:15
110
原创 JAVAscript day02
类型转换将某种数据类型转换为字符串类型 - toString() 用法：num.toString() 将数值类型转为字符串类型 var num = 10; console.log(num.toString())nam
2019-12-18 17:58:36
61
原创 JavaScript day01
Javascript 历史1990年 欧洲的（伯纳斯 李）发明了万维网1992年 NCSA开发了一个独立的浏览器1994年 因为当时网费贵 有些操作不宜在服务器端完成。比如表单验证1995年 布兰登.艾奇 发明了javascript 目的就是在客户端验证表单数据1996年 navigator 2.0浏览器正式内置了javascript 脚本语言Javascript 版本1997...
2019-12-16 18:38:34
92
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人