- 博客(46)
- 资源 (1)
- 收藏
- 关注
RSS订阅翻译 ES6中的解构
解构赋值按照某种模式将数组或对象中的值赋给变量称为解构。数组的解构只要等号左右两边的解构相同。左侧的变量就会赋予对应的值。实例：let [num1,num2] = [1,2] // num1=1 num2=2 完全解构let [num1,num2] = [1,2,3] // num1=1 num2=2 不完全解构let [num1,[num2],num3] = [1...
2020-04-22 08:54:22
805
原创 vue在自定义CheckBox组件上使用v-model实现双向绑定
前言：看了vue自定义组件的 v-model这一小节后。感觉有点不是很好(既然使用的是复选框、那么大多数应该绑定的是个数组，而示例中是个Boolean类型的)。自己写了一个绑定数组的组件。但总感觉不太优雅。希望大家看到后多补充意见。代码如下：<template> <span> <label v-for="(item,index) of ho...
2019-12-04 15:08:34
2460
原创 margin与padding注意事项
1、非替代(non-replaced)行内元素可以使用该属性定义horizontal-margin；若要定义vertical-margin，必须改变元素为块级或行内块级。vertical-margin = margin-top,margin-bottomhorizontal-margin = margin-right,margin-left2、margin折叠margin折叠只发生在块级元...
2019-11-26 10:34:15
468
原创 overflow的overlay属性值
当overflow的值为overlay时，行为与auto相同，但滚动条绘制在内容之上而不是占用空间。 仅在基于WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。注意：这是一个实验性质的属性值，不建议在生产环境使用...
2019-11-26 10:01:28
12160
原创 vue中prop验证、类型检查及注意事项
1、注意：null和undefined会通过任何类型检测2、数组或对象的默认值需要通过函数返回。详情看这里 props:{// 数组或对象的默认值需要通过函数返回 authInfo:{ type:Object, default(){ return{ name:'张三', sex...
2019-11-20 15:43:14
3133
原创 ES6——let、const与变量声明的几种方式
let1、所声明的变量只在let所在的代码块中有效。例：{ var attr1 = 'a' let attr2 = 'b'}console.log(attr1)// aconsole.log(attr2)// 报错2、不存在变量提升 console.log(attr1)//undefined var attr1 = 'a' console.log(attr...
2019-08-01 15:48:55
168
原创 sass中的运算
1、加法全部由绝对长度参与可以使用不同的单位.test{ width:1px+1px;}编译后.test{ width:2px;}.test{ width:1px+1in;}编译后.test{ width:106px;}有相对长度参与必须使用相同的单位，否则报错。如：.test{ width:1px + 1rem;}Error: Incompat...
2019-04-10 11:04:38
642
原创 vue项目打包上线
运行 cnpm run build命令之后会生成dist文件夹，文件夹下包含index.html文件和static文件夹、将这两个文件放在服务器根目录可以正常访问。如果生成的文件不放在根目录下在运行 cnpm run build命令前需要修改config/index.js中的build项下的 assetsPublicPath选项。如果你要把build完的文件放在服务器根目录下单 project...
2019-04-09 09:28:24
216
原创 vue运行 cnpm run dev后可以使用IP访问设置
在运行完cnpm run dev命令后可以通过localhost:8080访问。但是不可以通过IP访问。这时可以在package.json文件夹的scripts的dev选项添加 --host 0.0.0.0“dev”: “webpack-dev-server --host 0.0.0.0–inline --progress --config build/webpack.dev.conf.j...
2019-04-09 09:08:23
4051
1
原创 script标签属性和<noscript>标签
HTML4.01位<script>标签定义了一下6个属性1、async：可选属性。表示应该立即下载脚本且不影响页面中的其他操作。只对外部脚本文件有效。2、charset：可选。指定代码字符集。大多数浏览器忽略此值。3、defer：可选。脚本延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。<head> <title>Document&l...
2019-04-03 12:59:24
2376
1
原创 Vuex安装与简单使用
本示例只是实现了最基础了例子，具体使用查看官网安装vuexcnpm install vuex --save使用方法main.js添加红色框内的代码新建store.js并添加如下代码import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: ...
2019-04-02 11:06:06
198
原创 DOM回流和重绘
1、回流：浏览器通过计算盒子模型的宽高、位置、样式将元素放到它该出现的位置称为回流。2、重绘：盒子模型的宽高、位置、样式确定后浏览器把这些元素绘制出来称为重绘。...
2019-04-01 17:42:14
186
原创 JavaScript中的语句
文章目录1、if语句2、do-while语句3、while语句4、for语句5、for-in语句6、label语句7、continue和break语句8、with语句9、switch语句1、if语句语法：if(condition){//条件1 statement1;//代码块1}else if(condition2){//条件2 statement2;//代码块2}else{ st...
2019-03-31 21:46:51
93
原创 JavaScript中的数据类型
5种基本数据类型：Null、Undefined、Boolean、Number、String1种复杂数据类型：Object1种ES6新增的数据类型：Symbol可以使用 typeof操作符来检测变量的数据类型，typeof的返回值可以是以下几种：1、“undefined” ：未初始化或未声明过的变量？？？2、“boolean”：值为布尔类型3、“number”：值为数值4、“strin...
2019-03-31 11:48:21
80
原创 Sass和Compass安装
1、Sass安装(windows下)首先安装ruby，到ruby官网下载安装包，安装ruby。安装完成之后打开命令行，运行： gem install sass2、安装Compass运行命令 get install compass然后在compass工作目录下运行 compass create projectName创建项目...
2019-03-28 11:10:53
168
原创 跨域解决办法
跨域：协议、主域名、子域名、端口有一个不相同即跨域。如：www.test.com 请求 www.abc.com (主域名不同)www.test.com 请求 m.test.com (主域名不同)www.test.com 请求 www.test.com:81 (端口不同)www.test.com 请求 https://test.com (协议不同)解决跨域的方法：1、使用代理的方式...
2019-03-27 18:55:07
104
原创 web页面滚动到某个元素，某元素向上平移一段距离的实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding...
2019-03-22 15:19:25
2208
原创 css消除inline-block元素之间空隙的方法
文章目录方式一：方式二：方式三&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport&
2019-03-08 20:17:34
578
翻译 Vue插槽之具名插槽新增api
文章目录2.6.0版本之前具名插槽的使用方式2.6.0版本之后具名插槽的使用方式还有一点需要注意2.6.0版本之前具名插槽的使用方式2.6.0以前定义具名插槽的方式&lt;template&gt; &lt;div&gt; &lt;slot name="header"&gt;&lt;/slot&gt; &l
2019-02-24 19:59:26
296
翻译 Vue插槽之作用域插槽
Vue在2.6.0版本以后对作用域插槽的语法做了修改。现总结一下作用域插槽：让插槽内容能够访问子组件中才有的数据一个带有如下模板的 &amp;amp;amp;amp;lt;current-user&amp;amp;amp;amp;gt; 组件&amp;amp;amp;amp;lt;span&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;slot&amp;amp;amp;
2019-02-24 17:14:58
812
原创 vue安装
全局安装 vue-clicnpm install -g vue-cli创建基于webpack模板的项目vue init webpack projectName进入项目目录、安装依赖cd projectNamecnpm install运行项目cnpm run dev
2019-02-17 20:03:56
235
原创 JavaScript闭包
文章目录代码运行时代码声明和函数会被提前(即变量提升)作用域闭包代码运行时代码声明和函数会被提前(即变量提升)console.log(a)//undefinedvar a = 200上面的代码打印结果是undefined，原因是上面的代码等同于下面的写法var a = undefinedconsole.log(a)//undefineda = 200同理这种写法//函数声明 ...
2019-02-16 20:59:45
69
原创 JavaScript异步、单线程
JavaScript是单线程语言。同时只能做一件事情，为了防止阻塞代码异步由此产生。同步和异步的区别：同步会阻塞代码以下代码执行的结果是 1 3 2。注意即便time=0执行结果也相同console.log(1)let time = 1000setTimeout(()=&gt;{ console.log(2)},time)console.log(3)异步使用场景：...
2019-02-16 20:29:00
77
原创 JavaScript原型链
引用类型：数组、对象、函数引用类型特点：可自由扩展属性//对象类型var obj = {name:'zheng'}obj.sex = 0//数组类型var arr = [1,2,3]console.log(arr) //[1, 2, 3]arr.name = 'zheng'console.log(arr)//[1, 2, 3, name: "zheng"]//函数类型fu...
2019-02-16 10:39:44
86
原创 React Navigation中整合redux
安装以下packagecnpm install --save react-navigation-redux-helperscnpm install --save reduxcnpm install --save react-reduxcnpm install --save redux-devtoolsApp.jsimport React from 'react'import...
2019-02-12 22:32:59
389
原创 react native中icon使用
运行以下命令：yarn add react-native-vector-iconsreact-native link react-native-vector-icons示例：import React,{Component} from 'react'import {View,Text} from 'react-native'import Ionicons from 'react-nati...
2019-02-12 19:44:49
1896
1
原创 react native安卓运行react-native run-android之后报Error: Activity class {com.native_test/com.native_test.Ma
1、版本：0.57.0产生原因：0.57.0版本有bug解决办法：安装指定版本 react-native init native_test --version 0.57.8
2019-02-12 18:56:59
560
1
原创 React Native中解析HTML
使用这个react-native-htmlview可以解析HTML字符串。实现效果和vue中的v-html指令或jQuery中$(Selector).html()相同示例：import React from 'react'import {Text,View} from 'react-native'import HTMLView from 'react-native-htmlview'e...
2019-01-29 23:26:06
3342
原创 React Native中的布局
使用width和heightreact native中width和height没有单位，表示的是与设备像素密度无关的逻辑像素点<View style={{width:100,height:100,backgroundColor: 'gray'}}> <Text style={{fontSize: 16}}>测试字体</Text></Vie...
2019-01-29 09:35:12
321
原创 React Native中如何快速使一个元素相对屏幕水平居中，垂直居中
alignItems:决定其子元素沿着侧轴(次轴)的排列方式justifyContent:决定其子元素沿着主轴的排列方式width和height:react native指定宽高，其值不能带有单位，纯数字实现效果如下——使元素相对屏幕水平居中，垂直居中：代码：import React from 'react'import {ActivityIndicator, StyleSheet,...
2019-01-28 19:39:39
7166
原创 React Native运行出现Requested keys of a value that is not an object错误
产生这个错误的原因是把字符串当成对象处理了。
2019-01-28 12:47:15
648
原创 fetch使用详解
文章目录参数说明与$.ajax()的不同示例不带参数的请求带参数的请求(以post为例)判断请求是否成功参数说明fetch参数：一个必选的资源路径和一个可选的参数init。无论请求是否成功都返回一个Promise与$.ajax()的不同fetch与$.ajax()的不同当接收到类似404或500这类表示错误的状态码时，fetch返回的Promise对象的状态仍然为resolve(res...
2019-01-26 21:58:38
3184
原创 后台接收fetch传递的post数据
fetch官网post传递数据用的是JSON.stringify()的形势：fetch('http://www.tingchunyu.com/test/fetch_test/fetch_getuser_test.php', { body: JSON.stringify({id:666}), headers: { 'content-type': 'applicat...
2019-01-26 20:26:49
6892
原创 react native的导航库react navigation整合redux之后处理Android物理返回键
import React from "react";import { BackHandler } from "react-native";import { NavigationActions } from "react-navigation";/* your other setup code here! this is not a runnable snippet */class Re...
2019-01-26 13:14:31
509
原创 ES6中Promise的用法及resolve、rejected、catch、finally说明
文章目录Promise对象的特点：Promise语法.then().catch().finally()Promise是异步编程的一种解决方案。避免了类似于$.ajax()这种多个异步操作层层嵌套的问题。Promise对象的特点：Promise对象有三种状态：padding(初始状态)、fulfilled(异步成功之后的状态)、rejected(异步失败的状态)，改变状态的方式只有一种即异步...
2019-01-23 23:36:19
3504
原创 React Navigation航器之createStackNavigator实现页面间普通跳转、切换
文章目录StackNavigator语法参数说明RouteConfigsnavigationOptions配置项参数说明StackNavigatorConfig简单示例StackNavigator语法createStackNavigator(RouteConfigs,StackNavigatorConfig)参数说明RouteConfigsRouteConfigs —— 路由...
2019-01-22 13:16:53
1303
原创 redux使用教程一 ——实现计数器
文章目录安装概念介绍actionreducer安装安装稳定版redux：cnpm install --save redux安装redux绑定库和开发者工具：cnpm install --save react-reduxcnpm install --save-dev redux-devtools概念介绍actionaction：是一个JavaScript对象，action 内必须使...
2019-01-19 21:40:24
859
原创 react native使用SwipeableFlatList组件实现类似QQ消息列表左滑出现操作按钮的效果
文章目录说明SwipeableFlatList组件特有属性说明示例代码App.jsHome.jsSwipeableFlatList.js效果图说明使用的组件是SwipeableFlatList和FlatList实现的效果差不多，只是在列表上左滑出现了类似QQ消息列表的操作按钮，直接贴出列表代码。公用属性请看 这里SwipeableFlatList组件特有属性说明renderQuickAc...
2019-01-14 17:17:29
9582
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人