- 博客(36)
- 收藏
- 关注
RSS订阅
原创 echarts：中国地图-省市区三级级联动
效果图：中国：↓浙江省：↓湖州市↓南浔区代码演示：<template> <div class="line-container"> <div> <div id="mapChart"></div> </div> </div></template><script>import * as echarts from "echarts";im
2021-05-27 18:54:01
1722
原创 echarts：中国地图-省市区二级联动
效果图：中国：↓浙江省：↓南浔区代码演示：vue<template> <div class="line-container"> <div> <div id="mapChart"></div> </div> </div></template><script>import * as echarts from "echarts";impor
2021-05-27 17:52:43
1008
原创 echarts：中国地图
效果图：代码演示：<template> <div> <div id="child" ref="direction"></div> </div></template><script>import * as echarts from "echarts";export default { name: "child", data() { return { o
2021-05-27 16:23:18
1734
1
原创 大屏：echarts图表-引入
一、柱状图1.1 横向效果图：代码演示：<template> <div> <div id="vechile"></div> </div></template><script>import * as echarts from "echarts";export default { name: "vehicles", data() { return {
2021-05-19 11:30:33
305
原创 flex 布局
flex是弹性布局，css3新增语法，我们在开发移动端时会大量用到，pc端考虑到浏览器兼容性不好flex 唯一的缺点就在于，它不支持低版本的 IE 浏览器。一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的
2021-03-11 21:02:22
269
原创 HTML&CSS
1、盒模型与BFC（盒模型）1. 什么是盒子模型？在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。2. 盒子模型有哪两种标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)（非IE）怪异模式下： 一个块的总宽度= width + margin(左右)（即width已经包含了padd
2021-03-11 20:54:29
243
1
原创 JS操作DOM
前言vue 和 React 框架应用广泛，封装了 DOM 操作但 DOM 操作一直都会前端工程师的基础、必备知识只会 vue 而不懂 DOM 操作的前端程序员，不会长久DOMJavaScript操作网页的接口，全称为“文档对象模型(Document Object Model)。 有这几个概念：文档、元素、节点整个文档是一个文档节点每个标签是一个元素节点包含在元素中的文本是文本节点元素上的属性是属性节点文档中的注释是注释节点DOM 本质上是 DOM 树：DOM树是结构，树是由
2021-03-11 15:01:12
146
原创 vue：路由动画过渡
Vue2<template> <div id="app"> <router-view class="router-view" v-slot="{ Component }"> <transition :name="transitionName"> <component :is="Component" /> </transition> </router-
2021-03-03 10:39:59
532
原创 Keep-Alive
1、概念<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。<keep-alive> 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition>相似，<keep-alive>是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。2、作用在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
2021-01-19 11:54:08
111
原创 vue：路由守卫
可参考：路由进阶部分 – 导航守卫（ 路由守卫 ）导航守卫一共有三种形式1、全局守卫无论访问哪一个路径，都会触发全局的钩子函数，位置是调用router的方法 router/index.jsrouter.beforeEach((to,from,next)=>{}) 进入之前触发router.afterEach((to,from,next)=>{}) 进入之后触发回调函数中的参数：to：即将要进入的目标 路由对象from：当前导航正要离开的路由next：表示下一步要干啥，n
2021-01-13 21:57:57
69
原创 vue：常用指令、修饰符
1、列举常用指令以及作用V-for循环v-on绑定事件 ---- @v-model双向数据绑定v-text渲染字符串v-html渲染html节点及字符串v-if判断v-show显示/隐藏v-bind绑定属性2、列举出常用的修饰符@事件.stop 阻止事件冒泡@事件.prevent 阻止事件默认行为@事件.capture 触发事件捕获@事件.self 当事件在该元素本身 触发回调@once 只执行一次@事件.passive 告诉浏览器你不想阻止事件的默认行为<!
2021-01-11 21:25:34
229
原创 Vue Virtual Dom（虚拟DOM），Diff 算法
Vue Virtual Dom（虚拟 DOM）概念用 js 来模拟 DOM 中的节点。传说中的虚拟 DOM。看图：没懂再来一张：1、虚拟 DOM 的最终目标是将虚拟节点渲染到视图上。但是如果直接使用 虚拟节点覆盖旧节点的话，会有很多不必要的 DOM 操作。例如，一个 ul 标签下 很多个 li 标签，其中只有一个 li 有变化，这种情况下如果使用新的 ul 去替代旧 的 ul,因为这些不必要的 DOM 操作而造成了性能上的浪费。为了避免不必要的 DOM 操作，虚拟 DOM 在虚拟节点映
2021-01-08 18:34:09
159
1
原创 vue双向数据绑定原理
原理vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。1、实现一个数据监听器 Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者2、实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数3、实现一个 Watcher，作为连接 Observer 和 Co.
2021-01-08 15:39:58
138
原创 vue：上传（改变）图片
首先要创键FormData然后将传入的参数添加到实例当中最后在请求接口传参代码演示：<van-popup v-model="show0" position="bottom"> <div class="boxtoxiang"> <p @click="paizhao"> // 文件类型 绑定的事件 <van-uploader result-type="file" :after-read='paizhao'&g.
2021-01-05 12:02:39
311
原创 VantUI 组件按需加载
项目采用Vant 自动按需引入组件 (推荐)下面安装插件介绍：babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式安装插件npm i babel-plugin-import -D在 babel.config.js 设置// 对于使用 babel7 的用户，可以在 babel.config.js 中配置const plugins = [ [ 'import', { libraryName:
2021-01-05 11:45:28
263
原创 scss混合(mixins)使用
scss混合(mixins)使用例一、使用混合mixins中的变量来定义一个n行文本溢出隐藏的公用样式。1、创建mixins.scss文件//文本n行溢出隐藏@mixin ellipsisBasic($clamp:2) { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: $clamp;}
2021-01-05 11:32:13
332
1
原创 配置多环境变量
配置多环境变量1、在package.json里的 scripts 配置 serve stage build，过 --mode xxx 来执行不同环境通过 npm run serve 启动本地 , 执行 development通过 npm run stage 打包测试 , 执行 staging通过 npm run build 打包正式 , 执行 production"scripts": { "serve": "vue-cli-service serve --open", "stage"
2021-01-05 11:21:18
360
原创 vuex总结
vuex总结1、vuex是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它的五大核心是：state，mutations，actions，getters，modules2、Vuex的五大核心及代表的意义？state：数据，存储状态（对象）mutations：修改状态，同步，它只用于修改state中定义的状态变量。actions：异步操作（在组件中使用是$store.dispath(’’)）getters：类似vue组件中的计算属性，对state数据进行计算（会被缓
2021-01-04 21:00:23
106
原创 小程序：小程序发布流程
小程序发布流程发布流程，大概分三个大步骤：上传代码提交审核发布版本注意：发布之前，配置服务器域名白名单1、上传代码在代码编写完毕后，在他顶部的导航条上找到【上传】输入版本号，项目备注,点击上传上传成后，的提示到这里我们开发代码这块就完工了，剩下的就是去微信小程序平台发布了。2、提交审核进入微信小程序的官网：https://mp.weixin.qq.com/2.1.进入【版本管理】找到开发版本，点击‘提交审核’首次提交审核，会弹出如下提示，点击前往填写填写小程序基
2020-12-28 11:22:24
396
原创 JS基础：原型和原型链
原型和原型链class它是面向对象的语法，可以通过constructor来创建属性和方法。它是通过extends来继承，子类通过super()来使用父类的属性和方法 // 父类 class People{ constructor(name){ this.name=name } eat(){ console.log(`${this.name} 吃东西`) } }//子类 class Student exrends People{ constructor(name,
2020-12-28 08:29:34
106
原创 JS基础：变量类型和计算
js基础：变量类型和计算js基础知识：第一个步骤是变量类型和计算，变量是在每个语言中都是最开始要讲的东西，所以js中的知识，我们要把变量类型和计算先梳理一下：1、题目：先把题目摆出来，思考一下2、知识点：然后把知识点列出来，类型计算它到底会涉及到哪些知识点3、解答：根据知识点去解答题目，一开始看到题目可能会有疑惑不会，没法对上之前的思路1、题目：typeof 能判断哪些类型何时使用=== 何时使用==，他们都是在考察基础知识时候非常常考的题目值类型和引用类型的区别手写深拷贝2、知识
2020-12-27 21:54:16
161
原创 小程序：微信小程序支付流程
微信小程序支付流程小程序微信支付的流程图：1. 登录微信公众平台, 开通微信支付功能这是准备工作的第一步, 确保小程序对应的支付功能已经开启2. 登录微信商户平台该步骤需要获取两个参数, 一个是商户号, 一个是支付秘钥, 如下图所示注意秘钥自己要保护好,相当于支付密码,每次签名都需要该参数, 该参数只能设置的时候看得见,其余的时候是没法看得见.所以要记好了!3. 准备完毕,上代码微信小程序的商户系统一般是以接口的形式开发的，小程序通过调用与后端约定好的接口进行参数的传递以及数据的
2020-12-25 17:39:26
1886
原创 生命周期
1、小程序生命周期钩子函数更多详情参考：https://www.cnblogs.com/fozero/p/7868560.html生命周期：生命周期是指一个小程序从创建到销毁的一系列过程。小程序的两种生命周期：在小程序中 ，通过App（）来注册一个小程序 ，通过Page()来注册一个页面。1. 小程序应用的生命周期App()函数用来注册一个小程序。接受一个 Object参数，其指定小程序的生命周期回调等。App() 必须在app.js 中调用，必须调用且只能调用一次。 Ap
2020-12-23 22:02:27
225
1
原创 小程序：小程序中的吸顶效果（小程序操作DOM）、登录授权
小程序中的吸顶效果（小程序操作DOM）小程序中的吸顶效果wxml<!-- 吸顶view --><view hidden="{{showTabControl}}" class="top"> <van-tabs active="a"> <van-tab title="标签 1" name="a"></van-tab> <van-tab title="标签 2" name="b"></van
2020-12-23 19:14:49
303
原创 小程序：本地存储
微信小程序本地存储的异步同步用法详解官网：https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html一：同步1、wx.setStorageSync(); //存储值try { wx.setStorageSync('key', 'value')} catch (e) { }2、wx.getStorageSync(); // 获取值try { var value = wx
2020-12-23 18:39:24
199
原创 小程序：跳转页面几种方式
小程序跳转页面几种方式需求： 从home.wxml跳转到detail.wxml页；一：js实现1、navigateTo （有返回键，不可以跳转到tabBar页面）//保留当前页面，跳转到应用内的某个页面wx.navigateTo({ url: '/pages/detail/detail?id=1'})2、switchTab （没有返回键，只能跳转到tabBar页面，不可以携带参数）wx.switchTab({ url: `/pages/detail/detail`,})
2020-12-22 21:56:08
285
1
原创 小程序：双向数据绑定、父子传参、上拉加载更多、如何使用vant
1、双向数据绑定单向绑定语法1.普通的属性的绑定是单向的。例如：<input value="{{value}}" />解析：如果使用this.setData({ value: 'leaf' })来更新 value ，this.data.value 和输入框的中显示的值都会被更新为leaf；但如果用户修改了输入框里的值，却不会改变 this.data.value。双向绑定语法对应属性前加入model:前缀：<input model:value="{{value}}"
2020-12-22 21:46:51
1240
原创 小程序：使用promise封装wx.request()
使用promise封装wx.request()1.目录结构在根目录下创建http目录及api.js文件fetch.js以及http.js文件；在根目录下创建env目录,创建index.js配置并导出多个开发环境module.exports={ //开发环境 Dev:{ "BaseUrl":"https://www.develep.com" }, //测试环境 Test:{ "BaseUrl":"https://www.test.com" }, //生产环
2020-12-22 21:14:22
257
原创 小程序：目录结构、自定义组件封装（w-swiper）
1、小程序目录结构全局的app页面级别pages组件级别components在小程序里只能用HTTPS2、小程序组件封装（1）创建components目录（封装一个自己的w-swiper组件。）在根目录下创建一个components目录，用来存放所有组件。例如我们创建一个w-swiper组件，在components目录下创建w-swiper目录。自定义组件类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。封装一个自己的w-swiper组件。具
2020-12-22 21:07:02
286
原创 Promise？小程序目录结构？
ES6 Promise 对象概述是异步编程的一种解决方案。如何使用？1.主要用于异步计算2.可以将异步操作队列化，按照期望的顺序进行，返回符合预期结果3.可以在对象之间传递操作promise，帮助我们处理对列化使用场景：promise封装api接口、Promise进行异步操作解决问题：1.回调地域问题2.多个并发请求在工作中的应用：传统回调模式、promise模式名词约定一般来讲，有以下的名词约定：promise（首字母小写）对象指的是“Promise实例对象”Promise
2020-12-17 21:15:14
87
原创 ES6中class和继承
ES6中的class与继承前言：传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来讲，独树一帜也可以说难以接受！es5中的类ES5中如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成。示例//构造函数名大写（非强制，但这么写有助于区分构造函数和普通函数）function Person(name,age) { this.name = name;
2020-12-16 19:35:13
95
原创 ES6解构赋值？
ES6解构赋值解构赋值是对赋值运算符的一种扩展，是es6的一种语法。提取数组和对象的值对变量进行赋值，这种方式称之为解构赋值。最常用的场景是：element-ui、vant-ui按需引入，请求接口返回数据，提取想要数据。解构赋值不仅适用于var命令，也适用于let和const命令解构赋值，左右结构必须一样，使用左边定义的值，快速的取出数据中对应的数据值，而且 定义和赋值必须放到一起，不然的话就会报错，取不出来数据值，而且左边也必须是一个 js 存在数据结构不然的话也会报错，解构赋值
2020-12-16 17:32:43
116
原创 JavaScript中var、let、const的区别
JavaScript中var、let、const的区别在javascript中有三种声明变量的方式：var、let、const。1.是否存在变量提升？2.是否存在暂时性死区？3.是否允许重复声明变量？4.是否存在块级作用域？5.是否能修改声明的变量？一、前言在ES6（ES2015）出现之前，JavaScript中声明变量就只有通过 var 关键字，函数声明是通过function 关键字，而在ES6之后，声明的方式有 var 、 let 、const 、function 、 class，本
2020-12-16 11:25:04
122
1
原创 vue项目开发前的准备工作？git如何使用？箭头函数和普通函数的区别？
git提交的流程 1.再本地创建一个本地仓库，git init 2.需要用git add . 将更新的文件添加到暂存区 3.用git status可以查看一下他的状态 如果是红的证明你还没有添加到暂存区，如果是绿色的证明已经加入了暂存区， 4.用git commit -m “第一次提交” 保存到本地仓库中，可以用git log 查看提交的状态 5.如果是自己一个人开发的，远程仓库是空的可以直接推送到远程仓库，git push 远程仓库的地址 ，如果是多人开发
2020-12-15 20:51:18
509
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人