自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 Element-UI el-table样式的调整和滚动条样式

具体内容可以参考其他csdn博客。

2022-07-15 09:21:11 665

原创 Elemetn Ui 中 el-table 实现表格根据数据值实现不同样式

代码】ElemetnUi中el-table实现表格根据数据值实现不同样式。

2022-07-15 09:17:24 1363

原创 Vue中echarts深度监听实现页面大小和数据变化图表实时更新

代码】Vue中echarts深度监听实现页面大小和数据变化图表实时更新。

2022-07-15 09:07:54 2736

原创 小程序组件间传参数

小程序组件间传参数从一个组件跳转到另一个组件,可以在地址后添加参数 url: `../more/more?category=${JSON.stringify(this.data.category)}`, })然后在另一个组件内的onLoad事件内可以获取到参数 onLoad: function (options) { this.setData({ category: JSON.parse(options.category)

2022-04-19 09:31:46 1119

原创 微信小程序WXS的使用

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,wxs类似js和js又不一样,好多js语法能在js使用不能在wxs使用可以构建出页面的结构。wxs有两种使用方式:1. 单独的wxs文件以.wxs为后缀的文件 var days = function (day) { var now = getDate() var old = getDate(day) var min = parseInt((

2022-03-18 16:46:31 1591

原创 微信小程序实现watch监听

Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch。虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁、逻辑更加清晰)。小程序实现 类似vue 一样的watch 监听数据将方法注册到app.js 中,可以在组件内注册app实例直接调用app.js //封装watch监听 //首先获取页面数据 setWatcher(page) { let data = page.data let watch = pa

2022-03-10 11:30:34 3841

原创 在微信开发者工具使用eCharts

一、引入组件直接拷贝 ec-canvas 目录到新建的项目下,GitHub上最新版本组件的下载地址。其中提到的ec-canvas组件目录就在下载的echarts-for-weixin-master项目目录中二、创建图表1、首先在需要引入ECharts的小程序目录中的index.json文件中添加对组件ec-canvas的引入路径:index.json 配置如下:{ "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas

2022-03-09 09:59:39 1276

原创 Typescript 基本类型 和类型断言、类型推论,函数和接口

基础类型boolean 布尔值let bool :Boolean=truenumber 数字型 几进制都可以写let num :number=10string 字符串型let str :string=hello${num}array 数组数字数组let arr:number[]=[1,2,3]let arr1:Array<number>=[1,2,3]元组 特殊的数组类型元组类型允许表示一个已知元素数量和类型的数组let arr2:[number,s

2021-12-07 17:00:08 435

原创 TypeScript基础

首先 ,在任意命令行运行 npm i typescript -g安装TypeScript在文件夹内新建一个ts文件,内容let num :number=10console.log(num)这个时候只能给num赋数字类型的值在ts文件夹运行tsc index.ts 就会把ts编译成js让浏览器认识...

2021-12-07 14:26:46 314

原创 利用 node 的 express 包搭建简易服务器

利用 node 的 express 包搭建简易服务器一、先把文件夹变成 node 项目(npm init -y)npm i express下载 express 包二、新建一个js文件,在新js文件内导入expressconst express=require('express')创建一个新的服务器const app = express()将服务器跑起来,使用listen方法app.listen(3008, function () { console.log('服务器启动了

2021-12-01 17:02:05 197

原创 vue的响应式原理(数据变视图变)

vue的双向绑定原理Object.defineProperty(a,b,c) 方法 const obj = { username: '第嘉', userage: 18 }当我要修改 obj 的属性时执行一些操作需要通过 Object.defineProperty 给对象 添加/更新 属性,或者 使用 Object.defineProperty 重写对象Object.defineProperty(原对象,属性名,对象(属性名的属性描述))属性的

2021-11-30 16:00:57 703

原创 Vue中的this什么时候用

在Vue 中会定义很多的函数或者变量data computed methods prop filter 路由相关等这些属性或方法往往需要在 templaate 或者 script 标签中使用在template 中直接使用不需要this在script 标签中 需要 this. 名字来使用,除了watch监听的时候直接写就行了...

2021-11-11 16:18:22 1942

原创 Vue-Router的使用 (内涵vue过渡和动画)

基础使用可以理解为 div之间的切换//路由的使用//1. 安装 npm i vue-router//2. 使用 a. 使用 vue.use(路由) 将路由添加成整个项目的全局功能 import Vue from 'vue'import VueRouter from 'vue-router'//b.定义路由组件,也就是将需要当作页面的组件导入import Home from './components/Home.vue'import About from './components

2021-11-08 16:59:49 1266

原创 浏览器的本地存储

我们希望用户再次使用todo的时候,能记录上一次访问的类别,但是这个类别后端并没有记录,需要前端来处理,以上这种情况在工作中也比较常见,(比如登录功能 ,只请求一次),我们可以用浏览器的本地存储功能来实现,减少请求次数, cookie 、 localStorage 、 sessionStoragelocalStorage,时间长 、 sessionStorage,关闭页面就消失getItem()取setItem()存...

2021-10-28 15:01:11 144

原创 创建 json 数据库 并上传到服务器

安装npm i -g json-serverjson工具在项目内创建data 文件夹 ,data文件夹内新建data.json 文件在data.json内输入数据库内容{ "todos": [ { "id": "1", " todoText": "学习vue", "isCompleted": false }, { "id": "2", .

2021-10-27 11:45:34 846

原创 文本p标签溢出隐藏

当单行文本溢出隐藏 ,显示省略号p标签固定宽p{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}多行overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;

2021-10-26 15:23:46 1853

原创 vue

Vue前端框架 vue2.x , 使用vue 框架制作单页面应用(spa single page application)。使用虚拟 DOM 来操作页面。搭建 vue 开发环境推荐使用官方提供的vue-cli 脚手架,也可以使用 webpack 搭建(不推荐)执行npm i @vue/cli安装官方的脚手架工具,安装好之后可以使用vue --version查看版本号。创建开发环境在你想要创建vue项目的文件夹内打开命令行工具或者在cmd页面执行 vue create hello-v

2021-10-14 10:50:26 234

原创 Promise

Promise 是异步解决方案之前解决但部分是回调函数,当异步嵌套过多,就会产生回调地狱(很难维护,不直观),es6 的 promise 就是解决该问题的操作如下:创建一个Promise实例需要传递函数作为参数 这个函数默认就会触发第一个参数 resolve函数,异步成功之后要执行第二个参数 reject函数,异步失败之后执行函数内部写 异步操作在异步操作结束的时候, 可以选择执行resolve 或 reject // 创建一个Promise实例,需要传递函数作为参数 这个函数默认就

2021-10-13 15:28:48 176

原创 Ajax axios fatch 前后端交互

AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。AJAX 不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。不重新加载页面的情况下,可以与服务器交换数据并更新部分网页内容的技术。原生 ajax创建 xmlhttprequest 对象const xhr =new XMLHttpRequest()使用 open 方法 创建ajax请求 ope

2021-10-12 17:05:44 401

原创 es6模块语法以及与commin模块(node)的区别

es6 模块的两个命令 export 导出, import导入模块拥有单独作用域,其他模块想要使用某个模块的数据需要先 export 然后 import使用export导出的方式命名导出,可使用多次const a = 100const str = 'hello world'const bool = true//导出 不限类型export { num }//直接定义变量的时候导出export const str = 'hello world'//也可以一次性直接使用export{

2021-10-09 16:16:34 224

原创 module项目

与npm和webpack配合使用文件结构:导出语句是 module.exports= 元素接受语句 const 变量=require(路径)

2021-10-09 11:18:40 86

原创 flex布局

1. flex布局体验1.1 传统布局与flex布局传统布局兼容性好布局繁琐局限性,不能再移动端很好的布局flex弹性布局操作方便,布局简单,移动端应用广泛pc端浏览器支持情况较差IE 11或更低的版本,不支持或仅部分支持2.flex 布局父项常见属性flex-direction:设置主轴的方向在flex布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x轴和y轴。默认主轴方向是x轴1.1 row 默认值,从左到右,x轴为主轴1.2 row-reverse

2021-10-03 19:59:52 264

原创 ES6 中的类(Class)

es6 的 class其实就是之前的构造函数和原型// 之前的构造函数加原型// 坐标构造函数function Point(x, y) { this.x = x, this.y = y}//构造函数的原型Point.prototype.toString = function () { return `{${this.x},${this.y}}`}//创建实例化对象let point = new Point(1, 2)console.log(poin

2021-10-03 18:12:15 248

原创 es6

es介绍EECMAScript是js的版本说法。原生js是es3 es5 . es6(es2015)。。。统称为新 js。es6语法let 和const用来声明变量,替代之前的var。let 和const 自带块级作用域,也就是{ }就是作用域let const 与 var的区别前者没有声明提升前者拥有块级作用域前者不能重复声明let 和const 区别const用于声明常量(pi等),const声明的变量不能被修改变量的解构赋值变量的结构赋值就是用来创建变量的对象

2021-09-29 17:01:15 372 1

原创 简易webpack的使用

webpack是一个模块打包器,就是将所有有关联的模块(任何文件都可以是模块)打包成一个js文件和css文件和图片文件。webpack内还可以设置很多其他的功能,比如编译 js(将高级的语法浏览器不认识的语法编译成认识的),自动添加厂商前缀,自动做js兼容等。在项目内执行npx webpack命令,作用是执行webpack的功能,webpack的功能有默认将src/index.js打包编译(将其引入的所有模块打包)打包过程中会对高级的模块语法或者js语法进行编译,编译成主流浏览器认识的。最后将打

2021-09-28 17:03:38 99

原创 npm基础使用

npm 的使用node.jsNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。在任何地方安装了node,那么就可以运行JavaScript。所以在服务器上就可以运行js了。js就全栈了。node的安装同时是npm的安装。windows直接去官网下载,双击安装即可。安装完毕之后,可以在命令行中使用node -v查看是否安装成功,以及对应的版本号。当安装好node之后会自带一个npm工具。所以npm不需要单独安装。npm介绍npm是node package m

2021-09-25 17:01:09 637

原创 GIT操作

网上新建仓库,不添加任何内容本地新建文件夹,和网上的存在的仓库最好重名在新建的文件夹中打开命令提示行工具,执行‘git init’命令,作用是将文件夹制作成git空仓库。会生成一个隐藏的.git文件夹。以及创建一个分支叫master(原本网上创建仓库默认分支是main)执行git branch -m main 将当前分支重命名成main更新下文件夹里面的内容将跟新的内容上传到远端仓库,·git add .··git commit -m"留言"·最后如果直接· git push ·的话会失败,.

2021-09-24 14:12:38 1751

原创 GitHub

GitHubGitHub是一个代码托管平台,也是一个开源项目平台,互联网项目朋友圈。创建第一个仓库点击GitHub页面上的new或者从creat repository,跳转到新建页面输入仓库名·你的用户名.github.io·,简单输入一些描述,选择public,初始化的时候选择 addREADEME file ,然后创建使用 add file 下的creat new fil 创建一个index.html,里面随便写点内容,输入浏览并提交提交成功之后浏览器访问·你的用户名.github.io·

2021-09-24 11:20:47 104

原创 命令行的基础

命令行的基础1.安装百度gitbash,点击下载按钮直接下载即可,安装完在桌面右击可看到Git bash here字样苹果、Linux直接使用自带的就可以2.shell 基础打开命令行一般都是在此处打开命令行工具,命令行打开的时候显示的就是当前目录,tab键在命令行中起到自动补齐的作用,上下方向键可以看历史输入ctrl+ c/v 不是复制粘贴,ctrl c是停止命令的意思,或是重新开始一行 基本上所有命令都带参数./是当前目录 *表示所有内容目录的查看命令 ls 命令-a可查

2021-09-22 16:50:06 213

原创 函数式组件

函数式组件//1.创建函数式组件function MyDemo(){ console.log(this);//此处的this是undefined,因为Babel编译后开启了严格模式return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>}//2.渲染组件到页面ReachDOM.render(<MyDemo/>,document.getElementById('test'))//标签名必须大写执行了ReachDOM.render(,

2021-09-17 20:35:09 88

原创 JSX:Javascript-Xml 语法规则

JSX:Javascript-Xml 语法规则1.React定义的一种类似于XML的JS扩展语法2.本质是React。createElement(component,propos,…children)方法的语法3.作用:用来简化创建DOM1. a.写法: var ele=<hq>Hello JSX!</h1>2. b.注意1:他不是字符串,也不是HTML/XML标签3. c.注意2:他最终产生的就是一个JS对象4.JSX语法规则定义虚拟DOM时,不要加引号""标

2021-09-17 20:05:02 194

原创 虚拟DOM和真实DOM

虚拟DOM和真实DOM关于虚拟DOM1.本质是Object类型的对象(一般对象)2.虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React内部再用,无需真实DOM上那么多的属性。3.虚拟DOM最终会被React转化为真实DOM,呈现在页面上...

2021-09-17 19:55:45 114

原创 React的基础使用

React的使用1.首先引入文件react.development.js react核心库<script crossoriginsrc="https://unpkg.com/react@16/umd/react.production.min.js"></script>react-dom.development.jsreact扩展库 操作dom <script crossorigin src="https://unpkg.com/react-dom@16/umd

2021-09-17 19:54:40 85

原创 es6基础语法

es6基础语法1.letlet age = 12;(1). 作用:与var类似, 用于声明一个变量(2). 特点:在块作用域内有效不能重复声明不会预处理, 不存在提升(3). 应用:循环遍历加监听使用let取代var是趋势2.constconst sex = ‘男’;(1). 作用:定义一个常量(2). 特点:不能修改其它特点同let(3). 应用:保存不用改变的数据3.解构赋值(1)对象的解构赋值:从对象的属性中取到想要的属性值1 let obj = {name : 'kob

2021-09-17 19:49:14 190

原创 React 特点

React特点采用组件化模式、声明式编码,提高开发效率在React Native中可以使用React语法进行移动端开发使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互学习React需要知道的JS知识判断this指向class(类)ES6语法规范npm包管理器原型、原型链数组常用方法模块化...

2021-09-17 17:16:56 122

空空如也

空空如也

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

TA关注的人

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