- 博客(33)
- 收藏
- 关注
RSS订阅原创 echarts的使用
目录1、基本使用2、常用配置项说明2.1、决定图表的类型和数据（series）2.2、标题（title）2.3、提示框（tooltip）1、基本使用先引入echarts 然后创建一个元素用来装载echarts图表 echarts.init() 方法初始化 echarts 实例 最后设置配置项和数据 option，使用 setOption() 方法根据数据和配置项来显示图表即可<!DOCTYPE html><html> <.
2021-12-21 16:35:24
639
原创 vue接收图片数据流，显示在页面
1、先通过ref获取到img元素。<img v-if="ls" ref="test" src="" alt="" />2、请求接口，获取到数据图片流，赋值到img的src中，注意，需要拼接“data:image/png;base64,”，逗号必须加axios.post(this.$api+"地址", JSON.stringify(data), { }).then(res => { console.log(res, 11111) t
2021-10-20 09:24:01
4202
原创 react初步学习（三）
目录一、列表 和 键列表(List)， 键(Key)多组件渲染基本列表组件键（Keys）使用 Keys 提取组件keys 在同辈元素中必须唯一直接在JSX中使用map()二、 表单受控组件(Controlled Components)textarea标签select 标签多选select利用e.target合并多个输入元素的处理事件受控 Input 组件的 null 值三、 状态提升 (Lifting State Up)温度计算器状态.
2021-07-29 19:53:45
1218
原创 react初步学习(二)
一、状态和生命周期 状态state, 生命周期 liftcircle. 之前说过，一旦元素被渲染了之后就不可改变了，但我们可以通过重新渲染的方法使页面得以刷新，同样我们提到过最常用的方法是编写一个可复用的具有状态的组件，这里的状态，就是我们将要说的 state 我们对上述提过的计时器tick 中的计时功能封装成一个函数式组件如下：function Clock(props) { return ( <div> <h1&g
2021-07-27 20:07:10
452
原创 react 初步学习
什么是 React ? React是一个声明式的，高效的，并且灵活的用于构建用户界面的 JavaScript 库 一个最简单的React例子ReactDom.render( <h1>Hello World</h1>, document.getElementById('root')) ReactDom.render接受两个参数，第一个是要被插入的内容，第二个是插入到DOM或者说index.html的位置 一个与Html对比的简单组.
2021-07-26 19:18:56
139
原创 Vue CLI 3开发中屏蔽烦人的EsLint错误
Vue开发中，特别是当你阅读分析别人的其中早期版本的Vue代码时往往会遭遇到满屏幕的烦人的EsLint错误。有关EsLint这个工具的作用不再赘述。查阅网上参考文档，大多是针对早起版本Vue CLI工具项目的，在我最新使用的Vue CLI 3生成的工程中根本不起作用。无奈之下，认真学习了Vue CLI 3官方文档，终于找到最佳答案。办法Vue这个前端框架相对于React和Angular，入门会非常快。但是，到了中后期实战阶段仍然有许多工程实际问题需要我们一块一块地攻克。Vue CLI这个被称为“脚手
2021-07-05 19:49:39
584
原创 Vue3.0入门教程
目录一、 组合API二、 带ref响应式变量三、带reactive响应式变量四、computed计算属性五、watch响应式更改六、props传值七、emit回调八、provide/inject一、 组合API通过创建 Vue 组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。然而，我们的经验已经证明，光靠这一点可能是不够的，尤其是当你的应用程序变得非常大的时候——想想几百个组件。在处理如此大
2021-07-03 16:49:03
1328
原创 vue cli3.0快速搭建项目详解
这篇文章主要介绍下vue-cli3.0项目搭建，项目结构和配置等整理一下，分享给大家。一、介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件：CLI：@vue/cli全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）CLI 服务：@vue/cli-service是一个开发环境依赖。构建于webpack和webpack-dev-server之上（提供 如：serve、build和...
2021-07-02 19:32:26
440
原创 typescript学习(进阶)
1.类型别名类型别名会给一个类型起个新名字。 类型别名有时和接口很像，但是可以作用于原始值，联合类型，元组以及其它任何你需要手写的类型。type Name = string;type NameResolver = () => string;type NameOrResolver = Name | NameResolver;function getName(n: NameOrResolver): Name { if (typeof n === 'string') {
2021-06-30 19:21:25
415
原创 typescript学习(入门)
前言：请先熟悉ES6，包括其中的import、export、class等。ts特性右转百度，只讨论入门语法，语法方面基本就是c++/java等静态类型的语法简化版，而且兼容js语法，有学过这些的话光速入门。变量1.let x: number = 6其中:number说明x是一个number类型。也可以简写成let x = 6，typescript会自动推断这些简单类型2.let list: number[] = [1, 2, 3]表明list是一个数组，数组内的元素只
2021-06-30 08:44:32
199
原创 uni-app入门学习
什么是 uni-app1.1uni-app是一个使用Vue.js开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。 官方的体验例子：1.2uni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势 。 跨端数量更多 平台能力不受限 性能体验更优秀 周边生态丰富 学习成本低 开发成本低 1.3功能框架使用 uni-...
2021-06-28 19:45:28
1056
5
原创 入门微信小程序开发(五)自定义组件
自定义组件能够帮我们更好的复用代码和重构简化代码复杂度。一起来学习一下小程序自定义组件的内容吧。 从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。 开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似总览一、Component概念Component像页面一样由wxml、wxss、js和json4个文件
2021-06-25 20:20:52
672
原创 入门微信小程序开发(四)理解小程序事件与冒泡机制
一.初识小程序事件在小程序中，事件是视图层到逻辑层的通讯方式。比如，我们可以将事件绑定在组件上，当用户操作该组件并触发事件时，事件会将用户行为反馈到逻辑层做处理，也就是对应的执行逻辑层中的事件处理函数。当然，有时候行为反馈不一定是由用户来主动触发，举个生活中的例子，我们在腾讯视频看龙岭迷窟时，当播放到一集结尾，视频会自动播放下一集。将这个例子拿到小程序中来说，video组件便自带了bindended事件，只要视频播放到末尾便会触发该事件，小程序中存在很多由组件自身提供的事件，所以综合来说，小程序
2021-06-24 20:49:37
1045
原创 入门微信小程序开发(三)数据绑定的几种用法
一.数据绑定与书写HTML页面一样，小程序页面也只能通过多写多练提升。在构建完页面后就出现了一个问题，我们该如何获取组件元素让数据与之关联呢？在网页开发中，我们同样使用JS操作DOM，包括数据渲染，事件监听等，比如我现在要通过点击一个按钮后，替换段落中的本文信息，使用JS可以这么做：<p>我是谁？</p><button>点我点我</button>let btn = document.querySelector("button"),
2021-06-23 20:45:58
5226
1
原创 入门微信小程序开发(二)wxml与wxss
Git简介在我们的认知范围Git和SVN都是对于代码托管的工具，那么这两者又有什么不同呢？Git是世界上先进的「分布式的版本控制系统」，而SVN是「集中式的版本控制系统」，SVN对于版本的管理集中于中央服务器中，而Git对于版本的管理可以在本地。SVN管理的模式从SVN服务器中拉取代码，然后开始自己的开发，开发完后再向SVN服务器提交代码，所以集中式的版本管理，需要联网才能进行，一旦没网就没办法向SVN服务器提交代码。而Git是分布式的版本管理，每个开发者的本地都会有完整的版本库，不需要来联
2021-06-22 17:04:43
5082
原创 入门微信小程序开发(一)安装和配置
一、从注册开始要开发小程序自然要申请注册一个小程序，我们先进入微信公众平台注册账号(若有账号则直接登录)。因为微信公众号同时管理着订阅号，公众号以及小程序等多种账号，所以这里要选择小程序账号类型；记住，不同公众号服务之间账号不通用，所以使用注册的邮箱不能被其它公众号服务或者自己微信绑定过。可以看到上图中我最后注册的邮箱是新浪邮箱，因为我的QQ邮箱被自己微信绑定过了，无法再次使用。注册完成后登陆，就可以创建 自己的小程序了，这里不累赘，请按照提示依次填写小程序信息；在填写完成创建小程序
2021-06-21 20:08:05
1021
原创 git初步了解(一)
Git简介在我们的认知范围Git和SVN都是对于代码托管的工具，那么这两者又有什么不同呢？Git是世界上先进的「分布式的版本控制系统」，而SVN是「集中式的版本控制系统」，SVN对于版本的管理集中于中央服务器中，而Git对于版本的管理可以在本地。SVN管理的模式从SVN服务器中拉取代码，然后开始自己的开发，开发完后再向SVN服务器提交代码，所以集中式的版本管理，需要联网才能进行，一旦没网就没办法向SVN服务器提交代码。而Git是分布式的版本管理，每个开发者的本地都会有完整的版本库，不需...
2021-06-09 21:14:12
129
1
原创 webpack入门(二):配置webpack.config.js
webpack.config.js文件中，主要包括entry:入口文件output:出口文件module:模块plugins:插件
2021-06-08 21:28:59
2158
原创 webpack入门(一)
一.介绍Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。接下来我们简单为大家介绍 Webpack 的安装与使用。...
2021-06-07 21:05:28
172
1
原创 Vue.js中过滤器（filter）的使用
Vue.js 过滤器的基本使用（filter）vue中的过滤器分为两种：局部过滤器和全局过滤器1.定义一个全局过滤器
2021-06-02 15:06:45
580
原创 vuex的五个核心属性
VueX 是一个专门为 Vue.js 应用设计的状态管理构架，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。Vuex有五个核心概念： state,getters,mutations,actions,modules。 1. state：vuex的基本数据，用来存储变量 2. geeter：从基本数据(state)派生的数据，相当于state的计算属性 3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用...
2021-06-02 14:40:21
1538
原创 vue中watch的用法
在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法：<input type="text" v-model="cityName"/>new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } } })直接写一个监听处理.
2021-06-02 14:31:21
113
原创 浅谈vue的生命周期
一.了解先上张珍藏图:通过这张图我们可以了解到生命周期每个钩子函数的基本作用也能够了解到什么是生命周期vue的生命周期是什么??Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的
2021-06-02 14:22:58
198
原创 vue的语法使用
模板语法 一、插值 1.直接使用{{}} 将数据解释为普通文本，而非html代码 刷新或文档过长出现{{}}问题 解决1：可以用v-text 解决2：使用 v-cloak指令 <div v-cloak>{{msg}}</div> <style> ...
2021-05-27 10:18:46
190
原创 vue cli 3.0搭建
一、安装1、先安装node.js去官网：https://nodejs.org/en/，下载node.js左边是使用人数最多的，右边是最新版本的node.js，推荐选择左边的，稳定。安装成功以后，打开命令窗口，输入node -v出现版本号则代表安装成功2、全局安装过旧版本的vue-cli(1.x 或 2.x)要先卸载它，否则跳过此步：npm uninstall vue-cli -g //或者 yarn global remove vue-cli3、安装@vue/c...
2021-05-27 09:46:31
362
1
原创 vuex的辅助函数--映射函数
使用mapState辅助函数import {mapState} from 'vuex'export default { name: 'home', computed: { ...mapState('user', ['nickname','age','gender']) // 可直接使用 } }mapActionsimport { mapActions } from 'vuex'methods: { // ...mapActions('user', ['
2021-05-27 08:43:48
385
原创 v-model实现父子组件通信
如何实现两个组件之间的双向传递呢？即，在父组件中修改了值，子组件会立即更新。在子组件中修改了值，父组件中立即更新。vue中有一个很神奇的东西叫v-model，它可以完成我们的需求。使用v-model过程中，父组件我们还是需要将子组件正常引入，只是传值方式改成了v-model1、v-model一般用于表单的双向数据绑定<template> <div> <input type="text" v-model="msg"...
2021-05-27 08:29:41
2332
原创 async和await的用法
一、async&await用法async 表示函数里有异步操作，await 表示紧跟在后面的表达式需要等待结果。同 Generator 函数一样，async函数返回一个Promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。二、async/await的优点1）方便级联调用：即调用依次发生的场景；2）同步代码编写方式： Promise使用then函数进行链式调...
2021-05-21 19:47:36
60273
3
原创 js中!和!!的用法
“!”可以与任何变量进行逻辑与将其转化为布尔值 !!是将表达式强制转化为bool值的运算，运算结果为true或false，表达式是什么值，结果就是对应的bool值，不再取非。判断变量a为非空，未定义或者非空串才能执行方法体的内容我们就可以用!!的方法来写，方便快捷if(!!a){ //a有内容才执行的代码... }代码中，!!a， 先将a转成取反的布尔值，将得到的布尔值再次取反，保证a的值为null，undefined和空字符串的情况下，if体中的代码不会执行。！可...
2021-05-21 19:28:51
481
原创 通过vue实现login登录
通过vue实现login登录使用element UI 插件里的loginhtml部分： <div class="login-section"> <el-form label-position="top" label-width="100px" class="demo-ruleForm" :rules="rules" ref="ruleForm" :model="ruleForm" >
2021-05-20 08:59:33
1467
原创 reduce（）的使用
reduce（）的使用以前只是看过reduce这个方法，但是没有上手使用过，今天研究了一下，算是又多了个会用的小技能吧。reduce()这个方法，平时基本很少用到它,因为reduce（）可以解决的问题，用for循环，或者forEach方法有时候也可以搞定，但是reduce（）可以用来处理很多数组的需求，...
2021-05-19 15:59:01
290
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人