自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

June.1

深耕web端领域多年,前端技术能手 做过PHP、前端。享受编程、热爱开源、酷爱分享。空闲时就在博客上记录学习实践的心得。愿与大家共同成长,谁不喜欢多几个朋友呢。交流群:43181461 欢迎加入

原创 vuex 设计思路和实现

API概念的东西就不介绍了, 如果还不了解vuex 的应用, 可以去查看官方vuex文档 。下面着重讲解 vuex的原理以及实现vuex 设计思路vuex是使用插件机制开发的, vuex 中的 store 本质就是没有template的隐藏着的vue实例在beforeCreate 混入vuexInit ,vuexInit方法实现了store注入vue组件实例,并注册了vuex store的引用属性·$storevuex 设计思路源码function applyMixin (Vue) {.

2020-07-07 09:49:10 14517 1

原创 vue-router 原理及实现
原力计划

路由模式hash:默认hash 模式, 使用 URL hash值来作路由history:依赖 HTML5 History API 和服务器配置abstract:支持所有 JavaScript 运行环境,如 Node.js 服务器端ips hash 和 history 中都会记录浏览历史,保存在浏览器的路由栈中模式分配/* other... */if (!inBrowser) { // 非浏览器模式 mode = 'abstract' } this.mode = mode // 通

2020-07-01 16:43:06 14142 1

原创 vue 任务队列和异步更新策略 (清晰理解任务队列、微任务、宏任务)
原力计划

事件循环JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为,防止主线程的不阻塞,Event Loop 的方案应用而生。Event Loop 包含两类:一类是基于 Browsing Context,一种是基于 Worker。二者的运行是独立的,也就是说,每一个 JavaScript 运行的"线程环境"都有一个独立的 Event Loop,每一个 Web Worker 也有一个独立的 Event Loop。任务队列

2020-06-30 12:03:11 14241 2

原创 微信小程序如何修改第三方组件样式 例如 vant-weapp样式修改

解除样式隔离1、在组件内部options属性中定义styleIsolation: 'isolated'Component({ onLoad(){}, options: { styleIsolation: 'isolated' }})app.wxss 或页面的 wxss 中使用了标签名选择器(或一些其他特殊选择器)来直接指定样式,这些选择器会影响到页面和全部组件。通常...

2020-04-02 12:41:38 17291 2

原创 vue 项目资源文件 static 和 assets 不说区别直接使用?

assets中资源会webpack构建压缩到你代码中,而static文件直接引用。static 中长存放类包、插件等第三方的文件,assets里放属资源文件比如自己资源图片、css文件、js文件。...

2019-05-30 12:00:03 18086 1

原创 获取宝塔Linux面板登陆地址账号和密码

在ssh终端输入/etc/init.d/bt default

2019-05-16 16:40:34 50474 4

原创 微信小程序获取access_token(附源码)

服务端请求原因官方文档获取 access_token 与获取 openid 方式一样具体如下:小程序实现本地不需要传递任何参数wx.request({ var serverUrl = 'getAccessToken.php'; url: serverUrl, method: 'GET', dataType: 'json', su...

2019-04-17 10:23:21 7634 4

原创 微信小程序获取input值的两种常用方式

1. bindinput事件是光标移动发生数据改变,不需要手动执行点击 。 数据自动获取input框内使用属性的方式定义事件名称<input bindinput='getInputValue' name='price' type='text' placeholder='输入内容'></input>在js 文件中定义事件方法获取数据其中 e.detai...

2019-04-16 15:38:37 26129 1

原创 Node.js学习 (十四)find()、findIndex()

EcmaScript 6 新增方法,获取数据对象find() 接收一个方法作为参数,方法内部返回一个条件find() 会遍历所有的元素,执行你给定的带有条件返回值的函数符合该条件的元素会作为 find() 的返回值如果遍历结束还没有符合该条件的元素,则返回 undefinedfindIndex() 原理一致,返回数据索引位置示例演示:var users = [ {id: ...

2019-04-16 11:12:34 14660 1

原创 JavaScript基础知识全总结

JavaScript基础浏览器说明浏览器是指可以显示网页服务器或者文件系统的HTML文件内容,并让用户与这些文件交互的一种软件。通俗的讲:可以显示页面的一个软件,国内网民计算机上常见的网页浏览器有,QQ浏览器、Internet Explorer、Firefox、Safari,Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、傲游浏览器、世...

2019-04-11 10:37:31 27726 19

原创 mysql查询 NULL

NULL 是一种比较特殊的情况,如果直接通过sql语句查询NULL是查询不到的结果都是0条用NULL=NULL和NULL!=NULL判断结果都为NULL.因为NULL没有值是没有办法比较的接下来我们通过示例说明user表内容如下:| uid | username| age ||---------|-------- |-------- || 1 | ...

2019-03-28 15:26:49 3242 1

原创 vue三种常用获取input值写法

1. v-model 表单输入绑定使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。 <template> <div> <input class="login-input" type="text" v-model="username" placeholder="请输入账...

2019-03-20 15:02:38 36133 7

原创 数组模拟 JavaScript数据结构之栈(Stack)存储原理

什么是栈 ?一种后进先出(LIFO)的数据结构如图所示这就好比一个单向开口的网球筒,先放入网球筒的在筒底需要最后才能拿出来。后放入球筒的先拿出来。栈的数据存储就是以这种方式实现push() 入栈pop() 出栈peek() 查看栈顶这几种栈的底层操作方法,我们可以依照数组的使用模拟出来,这样就很容易理解程序概念中的栈操作数组模拟栈因为JavaScript比较高级,自带了 push() 和 pop()两个方法,这样理解起来变得更加容易数组的push() 将数据添加到栈顶, po

2020-07-19 13:23:06 47

转载 vue computed 和 vm.$data 原理

仔细阅读注解内容。会针对源码原理深度讲解 原文转载地址使用vuex中store中的数据,基本上离不开vue中一个常用的属性computed。官方一个最简单的例子如下var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 .

2020-07-07 09:49:43 14096

原创 vue 样式穿透 尖括号3、/deep/ 、::v-deep 应用场景注意事项

官方文档地址,更多关于Scoped CSS的内容在很多vue的组件库 , 如vant,elementUI, iview等都可能自定义一些样式文件项目中用到了 elementui,如果使用预处理器 scss, sass,less , 修改样式可能修改不掉, 而且这种需求出现的频率非常高。但如果去掉scoped话又会影响全局样式。当然我们知道可以使用 样式穿透的方式操作那么究竟什么时候使用 >>> 什么时候使用 /deep/ 和 ::v-deep 实际操作中会有什么问题呢?1、&gt

2020-06-23 11:10:26 14378

转载 深度理解浏览器前端优化

优化关乎速度和满意度。从用户体验(UX)角度,我们希望前端网页可以快速加载从开发体验(DX)角度,我们希望前端是快速,简洁,规范的浏览器都做了什么?我们希望浏览器打开一个简单的网页<!DOCTYPE html><html> <head> <title>The "Click the button" page</title> <meta charset="UTF-8"> <link rel=

2020-06-09 11:57:32 76

转载 关于uni-app你需要小心的坑

作为vue语法开发的跨平台开发框架虽然愿望很美好,但是真的要实现跨平台还是需要开发者搭建好的项目架构,灵活运行vue语法和模块化开发思维。H5适配官方创新很好,又为我们创造了一个尺寸单位,upx,但是考虑到项目迁移和开发通用,我决定还是使用px配合flexible实现适配,确保项目可以轻松移植到uni框架,需要改动@dcloudio/vue-cli-plugin-uni/packages/postcss文件,在postcss.config.js文件中引入的,保证我们小写px自动转换rem,大写的不转换,

2020-05-26 14:14:09 13785

原创 Flutter 组件之AlertDialog、SimpleDialog、showModalBottomSheet、showToast、自定义Dialog

AlertDialog dialog弹框在 showDialog中 定义 AlertDialog _alertDialog () async { var result = showDialog<void>( context: context, barrierDismissible: true, // false = user mu...

2020-03-28 12:50:12 13764 1

原创 Flutter 组件之Swiper轮播图

flutter_swiper: ^1.1.6//引入第三方包import 'package:flutter_swiper/flutter_swiper.dart';//图片列表 List<Map> imgList = [ { "url":"https://timgsa.baidu.com/4.jpg", }, { "url"...

2020-03-26 21:41:44 13469 1

原创 Flutter 组件之官方日期组件时间戳转换、第三方组件应用
原力计划

时间戳转换获取日期var now = new DateTime();var now = DateTime.now();//当前日期转换成时间戳,单位毫秒。 13位时间戳now.millisecondsSinceEpoch;时间戳转化成日期DateTime.fromMillisecondsSinceEpoch(1585140111111)2020-03-25 20:41:...

2020-03-25 22:08:14 13400 1

原创 Flutter 组件之表单组件TextField、CheckBox、Radio、Switch
原力计划

TextField普通输入框TextField(//文本输入框 decoration: InputDecoration(//表单定义模块 hintText: "请输入用户名"//类似html的placeholder ),),图标输入框TextField(//文本输入框 decoration: InputDecoration(//表单定义模块 hint...

2020-03-23 22:01:47 113 1

原创 Flutter 按钮组件之RaisedButton、OutlineButton、FlatButton、IconButton、ButtonBar、FloatingActionButton
原力计划

按钮UIRaisedButton普通按钮、颜色按钮、阴影按钮、图标按钮、圆角按钮、圆形按钮children: <Widget>[ RaisedButton( child: Text('普通按钮'),//文本内容 onPressed: () {//点击事件 print("普通按钮"); }, ), S...

2020-03-22 16:51:37 15802 1

原创 Flutter 抽屉组件之Drawer滑动侧边栏

Drawer配置以下布局是系统方法,当然可以根据需求自定义布局。class HomePageSet extends StatefulWidget { HomePageSet({Key key}) : super(key: key); @override _HomePageSetState createState() => _HomePageSetState();}cl...

2020-03-22 12:32:27 13082 1

原创 Flutter 组件之AppBar、顶部TabBar、仿今日头条顶部导航练习
原力计划

debugShowCheckedModeBanner:false,//去掉debug图标initialRoute:'/initDemo',//初始化的时候加载的路由AppBar自定义顶部按钮颜色、图标appBar:AppBar( title:Text("AppBarButton"), centerTitle:true,//标题居中显示 leading:IconButton(//如果...

2020-03-22 11:46:00 13920 1

原创 Flutter 组件之路由替换、返回跟路由、从哪来回哪去

返回到上一级页面Navigator.of(context).pop();二、替换路由需求:我们从用户中心页面跳转到了 registerFirst 页面然后从 registerFirst 页面通过 pushReplacementNamed 跳转到了 registerSecond 页面这个时候当我们点击 registerSecond 的返回按钮的时候它会直接返回到用户中心Navig...

2020-03-21 09:39:48 12733 1

原创 mpvue 开发微信小程序 Page "xx" has not been registered yet 和无法设置子页面navigationBarTextStyle

Page “xx” has not been registered yet正常页面设置要在app.json上配置带有文件夹的页面文件, 否则程序识别不到。如果pages 、subPackages 配置文件中都是正确无误的那么要注意了, 你需要运行 npm run build 来编译小程序。这样文件和配置重新加载页面就正常了子页面导航主题 navigationBarTextStyle...

2020-03-20 13:30:10 12874 1

原创 Flutter 组件之基本路由、命名路由定义传参应用
原力计划

基本路由语法:Navigator.of(context).push(MaterialPageRoute(builder: (context)=>路由页面类);import 'package:flutter/material.dart';import 'Search.dart';//引入需要跳转的页面class HomePage extends StatefulWidg...

2020-03-19 22:01:35 12393 1

原创 Flutter 组件之BottomNavigationBar自定义底部导航、实现页面切换

import 'package:flutter/material.dart';import 'pages/HomePage.dart';import 'pages/Payment.dart';import 'pages/People.dart';void main() { runApp(LearnFulWidget());}class LearnFulWidget extend...

2020-03-19 21:26:51 261 1

原创 Flutter 组件之StatefulWidget与StatelessWidget

在flutter中自定义组件其实就是一个类, 想要定义组件必须要继承StatefulWidget或StatelessWidgetStatefulWidget:有状态组件, 持有的状体可以再Widget生命周期中发生改变。只要我们想改变页面中的数据,这个时候就需要继承StatefulWidget类StatelessWidget:无状态组件,状态不可改变无状态组件//直接继承无状态组件...

2020-03-19 21:16:41 71 1

原创 Flutter 组件之Card(卡片)、AspectRatio(宽高比) 、Wrap(流布局)
原力计划

AspectRatio(宽高比) 设置宽高比相对于整个外层容器来设置,如果外层是全局屏幕, 宽高比就是按照屏幕的多少比例显示。 如果像下面的例子,宽度是300 宽高比为2/1 那么宽度就是300 。高度就是150 class LearnAspectRatio extends StatelessWidget { @override Widget build(BuildContex...

2020-03-19 21:00:55 13971 1

原创 Flutter 组件之Padding、Row、 column、Expanded、Stack层叠 组件

入口文件import 'package:flutter/material.dart';void main() { runApp(HomeComponent());}class HomeComponent extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: ...

2020-03-17 21:47:36 124 1

原创 Flutter 组件之ListView列表、Icon图标

垂直列表可以直接定义盒子宽度,列表的宽度不生效。水平列表要定义宽度入口文件import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';import 'movies.dart';void main() { runApp(StudyListShow());}// 页面主结构cl...

2020-03-17 21:14:02 13511 1

原创 Flutter 组件之Image、本地图片、远程图片、图片裁剪

Image本地图片配置pubspec.yaml中把所有图片资源添加到配置文件中,并且区分至少 2.0x、3.0x两种屏幕分辨率素材。在项目目录images中分别创建至少 2.0x、3.0x两种文件夹。将所有的图片分别放入images下的图片一层目录和2.0x、3.0x文件夹中引入Image.asset("images/timg.jpg")后重启项目Image 常用属性clas...

2020-03-16 22:04:31 83 1

原创 Flutter 组件之Widget、Center、Text、MaterialApp、Scaffold 常用属性总结

初识flutter结构flutter 项目结构入口文件//flutter 基础包导入import 'package:flutter/material.dart';//这里HomePage() 需要实例化使用,这里可以省略new (new HomePage())void main() { runApp(HomePage());}Widget 基础组件MaterialApp...

2020-03-16 21:38:04 113 1

原创 中级JavaScript 思维面试题(三)

答案解析在底部1、 问:下面的代码会输出什么结果 ? 为什么?function fn() { console.log(foo); var foo = 2; console.log(foo); console.log(a);}fn();2、 问:下面几项分别输出什么结果 ? 为什么?var name = 'first';var a = { name: 'sec...

2020-02-25 15:12:46 3100 1

原创 中级JavaScript 思维面试题(二)

var name = 'baozhuang';name += 10;var type = typeof name;if (type.length === 6) { type.text = 'string';}console.log(type.text);答案:undefined解析:type.text 为 new String(type).text =“string” 包装类...

2020-02-23 13:52:22 3045 1

原创 中级JavaScript 思维面试题(一)

window.a || (window.a ='1');console.log(window.a);答案:“1”解析:原理在于小括号的优先级高于其他运算符, 所以先赋值 window.a='1' 然后在进行或运算。var a = false + 1 ;console.log(a);答案:1解析:隐式类型转换 false 为 0 ,0 + 1 结果为1var b = ...

2020-02-20 18:05:16 3170 1

原创 微信小程序: mpvue touchend获取元素位置相当于 onmousedown

浏览器有鼠标按下事件document.onmousedown 事件是依赖于DOM ,微信小程序有相似的事件。就是bind:touchend下面这里是mpvue用法<!--原生 <view bind:touchend="touchEnd()">按下</view>--><div class="item_info" @touchend="touchE...

2019-12-27 14:51:28 13533 1

原创 微信小程序mpvue 模板语法如何过滤? IOS new Date() 格式等问题

mpvue 不支持过滤器模板js语法渲染部分会转成 wxml ,wxml 不支持过滤器,所以这部分功能不支持。会把 template 中的 {{}} 双花括号的部分,直接编码到 wxml 文件中,由于微信小程序的能力限制(数据绑定),所以无法支持复杂的 JavaScript 表达式。目前可以使用的有 + - * % ?: ! == === > < [] .,剩下的还待完善...

2019-12-10 20:41:43 138 1

原创 JavaScript学习(四)String、parseInt()、parseFloat、isNaN() 、toFixed()

1. 特殊字符反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符:转义字符 (\) 可以用于转义撇号,换行,引号,等其他特殊字符。下表中列举了在字符串中可以使用转义字符转义的特殊字符 // 反斜杠是转义字符 可用于引号,括号,反斜线等特殊字符的转义 var str = "hell\"o\"\n world"; document.write(str); //输...

2019-12-01 09:45:14 228 1

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