- 博客(184)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 前端必备typescript基础知识教程（vue+typescript项目实战）
文档随时更新完善一、TypeScript中的数据类型typescript中为了使编写的代码更规范，更有利于维护，增加了类型校验，在typescript中主要给我们提供了以下数据类型ts 代码 必须指定类型布尔类型（boolean）数字类型（number）字符串类型(string)数组类型（array）元组类型（tuple）枚举类型（enum）任意类型（any）null 和 undefinedvoid类型never类型1、布尔类型（boolean）es5的正确写法,
2020-08-12 16:51:39
8725
2
原创 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
15412
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
15806
1
原创 vue 任务队列和异步更新策略 （清晰理解任务队列、微任务、宏任务）
事件循环JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，Event Loop 的方案应用而生。Event Loop 包含两类：一类是基于 Browsing Context，一种是基于 Worker。二者的运行是独立的，也就是说，每一个 JavaScript 运行的"线程环境"都有一个独立的 Event Loop，每一个 Web Worker 也有一个独立的 Event Loop。任务队列
2020-06-30 12:03:11
16855
2
原创 微信小程序如何修改第三方组件样式 例如 vant-weapp样式修改
解除样式隔离1、在组件内部options属性中定义styleIsolation: 'isolated'Component({ onLoad(){}, options: { styleIsolation: 'isolated' }})app.wxss 或页面的 wxss 中使用了标签名选择器（或一些其他特殊选择器）来直接指定样式，这些选择器会影响到页面和全部组件。通常...
2020-04-02 12:41:38
31301
3
原创 vue 项目资源文件 static 和 assets 不说区别直接使用?
assets中资源会webpack构建压缩到你代码中，而static文件直接引用。static 中长存放类包、插件等第三方的文件，assets里放属资源文件比如自己资源图片、css文件、js文件。...
2019-05-30 12:00:03
27338
3
原创 微信小程序获取access_token（附源码）
服务端请求原因官方文档获取 access_token 与获取 openid 方式一样具体如下：小程序实现本地不需要传递任何参数wx.request({ var serverUrl = 'getAccessToken.php'; url: serverUrl, method: 'GET', dataType: 'json', su...
2019-04-17 10:23:21
18559
4
原创 微信小程序获取input值的两种常用方式
1. bindinput事件是光标移动发生数据改变,不需要手动执行点击 。 数据自动获取input框内使用属性的方式定义事件名称<input bindinput='getInputValue' name='price' type='text' placeholder='输入内容'></input>在js 文件中定义事件方法获取数据其中 e.detai...
2019-04-16 15:38:37
54281
1
原创 Node.js学习 （十四）find()、findIndex()
EcmaScript 6 新增方法,获取数据对象find() 接收一个方法作为参数，方法内部返回一个条件find() 会遍历所有的元素，执行你给定的带有条件返回值的函数符合该条件的元素会作为 find() 的返回值如果遍历结束还没有符合该条件的元素，则返回 undefinedfindIndex() 原理一致,返回数据索引位置示例演示：var users = [ {id: ...
2019-04-16 11:12:34
18211
1
原创 JavaScript基础知识全总结
JavaScript基础浏览器说明浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。通俗的讲:可以显示页面的一个软件,国内网民计算机上常见的网页浏览器有，QQ浏览器、Internet Explorer、Firefox、Safari，Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、傲游浏览器、世...
2019-04-11 10:37:31
86195
46
原创 mysql查询 NULL
NULL 是一种比较特殊的情况,如果直接通过sql语句查询NULL是查询不到的结果都是0条用NULL=NULL和NULL!=NULL判断结果都为NULL.因为NULL没有值是没有办法比较的接下来我们通过示例说明user表内容如下：| uid | username| age ||---------|-------- |-------- || 1 | ...
2019-03-28 15:26:49
3633
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
107336
9
原创 数组模拟 JavaScript数据结构之栈（Stack）存储原理
什么是栈 ？一种后进先出（LIFO）的数据结构如图所示这就好比一个单向开口的网球筒，先放入网球筒的在筒底需要最后才能拿出来。后放入球筒的先拿出来。栈的数据存储就是以这种方式实现push() 入栈pop() 出栈peek() 查看栈顶这几种栈的底层操作方法，我们可以依照数组的使用模拟出来，这样就很容易理解程序概念中的栈操作数组模拟栈因为JavaScript比较高级，自带了 push() 和 pop()两个方法，这样理解起来变得更加容易数组的push() 将数据添加到栈顶， po
2020-07-19 13:23:06
779
转载 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
15209
原创 vue 样式穿透 尖括号3、/deep/ 、::v-deep 应用场景注意事项
官方文档地址,更多关于Scoped CSS的内容在很多vue的组件库 , 如vant，elementUI， iview等都可能自定义一些样式文件项目中用到了 elementui，如果使用预处理器 scss, sass,less , 修改样式可能修改不掉, 而且这种需求出现的频率非常高。但如果去掉scoped话又会影响全局样式。当然我们知道可以使用 样式穿透的方式操作那么究竟什么时候使用 >>> 什么时候使用 /deep/ 和 ::v-deep 实际操作中会有什么问题呢?1、>
2020-06-23 11:10:26
24110
转载 深度理解浏览器前端优化
优化关乎速度和满意度。从用户体验（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
316
转载 关于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
20327
1
原创 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
14800
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
14023
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
15582
1
原创 Flutter 组件之表单组件TextField、CheckBox、Radio、Switch
TextField普通输入框TextField(//文本输入框 decoration: InputDecoration(//表单定义模块 hintText: "请输入用户名"//类似html的placeholder ),),图标输入框TextField(//文本输入框 decoration: InputDecoration(//表单定义模块 hint...
2020-03-23 22:01:47
1271
1
原创 Flutter 按钮组件之RaisedButton、OutlineButton、FlatButton、IconButton、ButtonBar、FloatingActionButton
按钮UIRaisedButton普通按钮、颜色按钮、阴影按钮、图标按钮、圆角按钮、圆形按钮children: <Widget>[ RaisedButton( child: Text('普通按钮'),//文本内容 onPressed: () {//点击事件 print("普通按钮"); }, ), S...
2020-03-22 16:51:37
16806
2
原创 Flutter 抽屉组件之Drawer滑动侧边栏
Drawer配置以下布局是系统方法,当然可以根据需求自定义布局。class HomePageSet extends StatefulWidget { HomePageSet({Key key}) : super(key: key); @override _HomePageSetState createState() => _HomePageSetState();}cl...
2020-03-22 12:32:27
14801
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
15566
1
原创 Flutter 组件之路由替换、返回跟路由、从哪来回哪去
返回到上一级页面Navigator.of(context).pop();二、替换路由需求：我们从用户中心页面跳转到了 registerFirst 页面然后从 registerFirst 页面通过 pushReplacementNamed 跳转到了 registerSecond 页面这个时候当我们点击 registerSecond 的返回按钮的时候它会直接返回到用户中心Navig...
2020-03-21 09:39:48
13934
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
13276
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
13200
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
976
1
原创 Flutter 组件之StatefulWidget与StatelessWidget
在flutter中自定义组件其实就是一个类, 想要定义组件必须要继承StatefulWidget或StatelessWidgetStatefulWidget：有状态组件, 持有的状体可以再Widget生命周期中发生改变。只要我们想改变页面中的数据,这个时候就需要继承StatefulWidget类StatelessWidget：无状态组件,状态不可改变无状态组件//直接继承无状态组件...
2020-03-19 21:16:41
254
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
17682
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
608
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
14362
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
1125
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
390
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
3398
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
3243
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
3824
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
14618
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人