weixin_44433499的博客

原创 antd table 增加底部合计行统计

1､table 表格中加一个 footer 属性，表头 showHeader 隐藏。2、table 合计行（就是：footer 那行列表），每列的宽度要和上面列表宽度一样。3､合计行要做判断，如果没有数据，不显示。// 合计行显示／隐藏let status = pcDataSource && (pcDataSource.length == ‘0’) ? {display: ‘none’} : {display: ‘block’}; <Fragment>

原创 sass-loader、node-sass安装失败问题解决

To install it, you can run: npm install --save !!vue-style-loader!css-loader?{“sourceMap”:true}!../…/…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:"data-v-在网上搜索解决方案的时候，大部分解决方式都是如下：npm install stylus stylus-loader style-loader --sav

原创 简单的数组去重

1.最便捷的方法： […new Set(arr)]const arr = [4,5,3,4,6,5,8,6];console.log(Array.from(new Set(arr))) // [4, 5, 3, 6, 8]console.log([…new Set(arr)]) // [4, 5, 3, 6, 8]2.recude+include去重const arr1 = [4,5,3,4,6,5,8,6];const a1 = arr1.reduce((prev,cur) => p

转载 Html 小结

1. HTML、XML、XHTML 的区别HTML：超文本标记语言，是语法较为松散的、不严格的Web语言；XML：可扩展的标记语言，主要用于存储数据和结构，可扩展；XHTML：可扩展的超文本标记语言，基于XML，作用与HTML类似，但语法更严格。2. 什么是HTML5以及和HTML的区别是什么概念HTML5是HTML的新标准，其主要目标是无需任何额外的插件如Flash、Silverlight等，就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。HTML5是由万维网联盟（W3C）和W

原创 Vue中的computed属性

computed属性1.computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；2.computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化.举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计

原创 uni-app的 tabBar添加阴影

我在app.vue种加入如下css代码在h5端时没问题的，有阴影的，但是在app端就不行，求问如何在app端加入阴影 uni-tabbar, uni-tabbar .uni-tabbar{ box-shadow: 0px -2px 10px 0px rgba(132,85,250,0.82); }

转载 npm ERR! missing script: dev 的解决方案

打开项目的配置文件：package.js里，找到"scripts": {}，如图我们发现根本没dev的属性。我们应该执行npm run serve

原创 uni-app返回上一层页面后数据刷新重置

1.页面跳转后返回之前页面数据重置全部刷新了这个问题很头疼，从a页面去b页面办了点事，回到a页面时之前的数据没了，页面重置了怎么办把路由页面跳转时用的uni.navigateTo({}) 改用uni.navigateBack()这个完美解决了页面自动刷新的问题，是自带的返回方法；2.页面不刷新的问题了这个简单，当你的数据发生变化后，页面视图如果没有随着改变只需要加上this.$forceUpdate()强制刷新页面...

原创 uni-app 自定义导航栏 图片按钮

按钮据右边边框距离设置： document.getElementsByClassName('uni-btn-icon')[2].style.marginRight = '22px'监听按钮状态： onNavigationBarButtonTap(e) { if (e.index === 1|| e.index === 2) { this.isfilter = !this.isfilter if (this.isfilter == false) { document..

原创 uni-app uniRate 动态赋值

uni-rate.vue 组件 ：<template> <view> <view ref="uni-rate" class="uni-rate"> <view v-if="" class="uni-rate__icon" :class="{'uni-cursor-not-allowed': disabled}" :style="{ 'margin-right': margin + 'px' }" v-for="(star, index) in star

原创 this.$nextTick()怎么使用？

应用场景：this.$nextTick()方法主要是用在随数据改变而改变的dom应用场景中，vue中数据和dom渲染由于是异步的，所以，要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。created()中使用的方法时，dom还没有渲染，如果此时在该钩子函数中进行dom赋值数据（或者其它dom操作）时无异于徒劳，所以，created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，而与created()对应的是mounted()的钩子

原创 React中插入视频(video-react)，自动播放

一. 在react中引入安装插件npm install –save video-react2.在文件中引入import { Player, ControlBar, PlayToggle, // PlayToggle 播放/暂停按钮 若需禁止加 disabled ReplayControl, // 后退按钮 ForwardControl, // 前进按钮 CurrentTimeDisplay, TimeDivider, PlaybackRateMenuButto

原创 react中如何渲染html代码

想让div元素中的内容：'<h3>哈哈</h3>'正常渲染。百度查询放法：<div dangerouslySetInnerHTML={{__html: '<h3>hahhah</h3>'}}></div>注意 dangerouslySetInnerHTML 中必须是一个对象<div dangerouslySetInnerHTML={{__html: item.content}}></div>..

原创 vue父组件传递props异步数据到子组件遇到的问题

状况1：　父组件parent.vue// asyncData为异步获取的数据，想传递给子组件使用<template> <div> 父组件 <child :child-data="asyncData"></child> </div></template> <script> import child from '../demo/children.vue' export default { data

原创 Vue的watch实现原理图

转载 Vue源码解析：虚拟dom详解

一句话：vue的虚拟dom是将多次dom操作保存在一个js对象（虚拟dom对象）中，然后用这个js对象一次性的去更新dom操作，这样就避免了很多无效的计算一、DOM和其解析流程？创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。第三步，将DOM树和样式表，关联起来，构建

翻译 Vue源码解析：数据双向绑定(响应式)原理

vue的双向数据绑定（响应式）原理到底是什么呢？这还是得从vue的源码说起：我们知道vue的一大特点是数据驱动视图，如何理解数据驱动视图这六个字呢？数据：可以理解为state；驱动：这里应该是一个动词，就是操作的意思,就是render函数；视图：就是页面的UI；这样说来，其实我们可以得到这样一个公式：UI = render(state)，这样一来，state的变化就会直接导致UI的变化，而始终不变的是这个render，vue就是扮演了人render的角色。那么vue是如何知道state变化的呢？这

翻译 Vue 核心之数据劫持

Vue 核心之数据劫持Angular、Regular、Vue、React等等可以实现数据绑定，再也不需要手动进行DOM操作了，它们实现的原理也基本上是脏检查或数据劫持。 本文就以Vue框架出发，学习Object.defineProperty来实现数据劫持。Object.defineProperty(obj,prop,descriptor) 用法介绍：参数obj:目标对象prop:需要定义的属性或方法的名称descriptor:目标属性所拥有的特性可供定义的特性列表value:属性的值

转载 vue的双向绑定原理及实现

本文主要介绍两大内容：vue数据双向绑定的原理。实现简单版vue的过程，主要实现{{}}、v-model和事件指令的功能。1. vue数据双向绑定原理vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西。var vm = new Vue({ data: { obj: { test: 'hello vue' } }, cr

原创 vue中v-model使用

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：  1. v-bind绑定一个value属性  2. v-on指令给当前元素绑定input事件自定义组件使用v-model，应该有以下操作：接收一个value prop触发input事件，并传入新值在原生表单元素中：<input v-model="inputValue">相当于<input v-bind:value="inputValue" v-on:input="inputValu

原创 git安装和使用

一、下载安装Git1、下载Git 官方地址为：https://git-scm.com/download/win2、安装3、选择安装目录4、选择组件5、开始菜单目录名设置6、选择使用命令行环境7、以下步骤直接默认，点击下一步，安装完成8、检验是否安装成功鼠标右击如果看到如下菜单，则安装成功。二、Git基本工作流程1、Git工作区域2、向仓库中添加文件流程三、Git初始化及仓库创建和操作1、Git安装之后需要进行一些基本信息设置git config 设置用户名

原创 用 async/await 来处理异步

用async/ await来发送异步请求，从服务端获取数据。先说一下async的用法，它作为一个关键字放到函数前面，只有一个作用, 它的调用会返回一个promise 对象。调用一下，看看就知道了，怎么调用？async 函数也是函数，所以它的调用和普通函数的调用没有什么区别，直接加括号调用就可以了，为了看结果，console.log 一下。async函数(timeout)的调用，确实返回promise 对象，并且Promise 还有status和value，如果async 函数中有返回值 ,当调用该函

翻译 vue 框架学习（6） 插槽及使用

文章目录什么是插槽一、初次使用插槽`第一步：在子组件的模板里定义个< slot />``第二步：在实例里把子组件component3注册上``第三步：使用组件`提示：示例 ：二、具名插槽2.1 在slot元素上使用attribute（属性）：name2.2 怎么把内容放在制定的插槽位置？2.3 使用具名插槽示例：三、编译作用域和作用域插槽3.1 编译作用域1）Vue规则2）举例说明展示效果3.2 作用域插槽1）什么是作用域插槽2）举例说明使用示例：四、动态插槽名示例：五、具名插槽缩写什么是插槽

翻译 vue 框架学习（5） 组件化开发 和 父子组件传值

第六节：Vue组件化开发(1)-什么是组件一、什么是组件1.1 单个理解最简单的理解，组件也相当于一个小型的Vue实例，组件也可以有实例的各种属性。组件是一个完整的单位个体，可以有js可以有css和html。（现在写的是没有包含css和js）。1.2 整体理解开发过html的人都知道，其实我们界面是由一个个div的布局来显示出来，每一个div里都有对应的展示内容，如果我们把这一个个div想象成一个整体，整体中又可以嵌套一个整体，最后我们界面就会变成一个个小模块组成。Vue组件开发就是这个模式

原创 vue 框架学习（4） 指令 和 计算属性computed

第三节：Vue模板语法（插值、指令、缩写）一、插值1.1 文本数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，使用方式就是直接用{{vue.data.变量}}1.2 展示HTML使用 v-html指令<h1 v-html="urlStr"></h1>1.3 Attribute属性v-bind 指令对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同如果 disabledVal 的值是

转载 vue 框架学习（3）-生命周期

一、什么是MVVMMVVM是Model-View-ViewModel的简写，体现在框架上的样子如下：（图片是在网上找的）体现在代码上编写位置如下：MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑，而MVVM主要目的是分离视图（View）和模型（Model），然后减低耦合，提高可重用性，让开发把关注点放在业务处理上，界面的展示

原创 vue 框架学习（2）- 框架介绍

一、 Vue.js 是什么？官网的描述：Vue 是一套用于构建用户界面的`渐进式框架` 。与其它大型框架不同的是，Vue 被设计为可以`自底向上逐层应用`。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与 `现代化的工具链` 以及各种 `支持类库` 结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。这里有几个关键字： 渐进式框架、现代化的工具链、支持类库用一个例子说明我们现在很多界面排版的方式，div布局：Vue是怎样渐进式到现有的界面上去呢，

原创 代码格式错误提示：http://eslint.org/docs/rules/eol-last Newline required at end of file but not found

初次运行时出现：http://eslint.org/docs/rules/eol-last Newline required at end of file but not found错误提示。1、报错解释 Errors: 1.http://eslint.org/docs/rules/eol-last 表示：文档末尾要换行 Errors: 2 http://eslint.org/docs/rules/spaced-comment

原创 vue 框架学习（7）-创建项目

创建项目步骤如果你已经安装了node.js,VsCode， 再进行操学习Vue知识之前先来创建个项目吧。npm install -g vue-cli，然后等待安装（vue-cli可以帮助我们快速构建Vue项目）npm install -g webpack命令，等待安装（打包js的工具）创建一个名为hellovue的项目吧，名字随意取，输入回车vue init webpack hellovue在vscode中打开在终端创建的项目。目录结构展示在左侧。5.在package.json 中找到启

原创 uni-app 导航栏使用iconfont 字体图标（unicode引用方式）

unicode引用方式我们主要是用到iconfont.css和后缀名为.eot、.svg、.ttf、.woff的文件 ，新建一个专门存放文件夹。复制 &#xe73b 设置导航栏字体图标："text": "\ue73f","fontSrc":"/static/iconfont/iconfont.ttf"效果图如下：...

原创 iconfont symbol引用，展示彩色字体图标

1.去阿里巴巴图标库中找到自己的项目，选择symbol ，下载到本地。2.将下载后的文件解压找到iconfont.js文件，copy到项目。我是在static 下面新建的一个名为iconfont的文件夹。3.并在同级目录下新建一个 icon.css文件4.在icon.css中粘贴下面代码。通用css代码：.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;

转载 uni-app 实现navigateBack返回修改前一页面数据（H5、APP、小程序）

B页面返回修改A页面title的值//A页面<template> <text class="title">返回修改的值：{{title}}</text></template>export default { data() { return { title: 'Hello' } },}//B页面<button @click="change">修改上一页的ti

原创 layui下拉菜单的按钮组，点击和鼠标滑过显示子菜单

<script type="text/html" id="toolbar"> <button class="layui-btn layui-btn-sm" lay-event="add">新增</button> <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button> <ul class="la.

原创 uni-app图片压缩转base64位，多图片上传

之前写过uni-app H5方式上传图片，但是在生成apk后，上传图片失败，不支持app上传。查找资料后解决app上传多图问题。H5方式上传图片可参考:uni-appH5端canvas压缩图片图片选择，每次最多选择4张，最多上传8张 chooseImage: async function() { var that = this; uni.chooseImage({ source

原创 CSS学习笔记（flex 伸缩布局 ）

一、伸缩布局 Flexdisplay: flex | inline-flex;Flexbox 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染成一个块元素，而设置为 inline-flex 的容器渲染为一个行内元素。属性值决定容器是如何显示的，它的所有子元素将变成 flex 文档流，被称为伸缩项目。Tips：被定义为伸缩项目后，CSS 的 columns 属性在伸缩容器上没有效果，同时 f

原创 CSS学习笔记（浮动float）

一、标准流（normal flow）标准流又称为文档流，普通流。标准流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思。比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。二、浮动（float）浮动最早是用来控制图片的，以便达到其他元素（特别是文字）实现 “环绕”图片的效果。现在我们主要使用浮动来让块级元素并排显示。1、浮动是什么　元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指

原创 CSS学习笔记（初识）

1.定义css是层叠样式表 （Cascading Style Sheet），又叫级联样式表，简称样式表。2.作用（1）用于HTML文档中元素样式的定义。实现了将内容与表现分离。（2）提高代码的可重用性和可维护性。文件后缀是.css。3、css与HTML之间的关系（1）HTML用于构建网页的结构（2）CSS用于构建HTML元素的样式（3）HTML是页面的内容组成，CSS是页面的表现结构层 HTML表示层 CSS行为层 JS4、导入CSS的方式（1）内联方式直接把CSS代码用sty

原创 CSS学习笔记（浏览器兼容问题）

渐进增强 (progressive enhancement)：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级( graceful degradation)：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别：渐进增强是向上兼容，优雅降级是向下兼容。浏览器前缀：css渐变分为以下两类：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（Radial Gradient

原创 CSS 盒子垂直居中的方法

一、盒子垂直居中的方法　　1、先让盒子的上下边缘和父盒子的水平中心线重叠，，然后再让子盒子往回移动自身一半的距离。 <div class="father"> <div class="son"></div> </div> /* 通过 transform 属性来移动*/ .father { width: 500px; height: 500px; background-co

原创 uni-app 请求后台接收为null 空值

'Content-Type': 'application/x-www-form-urlencoded'uni.request({ url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。 header: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: { name: 'name',