- 博客(42)
- 问答 (5)
- 收藏
- 关注
RSS订阅原创 虚拟DOM如何新建和渲染
上一篇描述了什么是虚拟DOM。在React和Vue中，虚拟DOM的创建都是由模板或者JSX来完成的。但是由模板变成render或者JSX完成虚拟DOM的创建都是由webpack的loader来完成。我们现在就用原生的方法去完成虚拟DOM是如何去新建和渲染的。如何新建假设我们要生成下面这样一个虚拟DOM<div id="test"> <p>节点1</p&...
2019-10-21 10:09:16
1073
原创 虚拟DOM是什么？
问题： 什么是虚拟DOM，我们为什么要用它，它与原生DOM有什么区别？在浏览器的标准里面，DOM是非常复杂的，我们先写一段基本的代码来体现 <script> let div = document.createElement('div') let dif for ( let key in div) { dif += key + ' ' }...
2019-10-17 20:46:09
382
原创 vue插槽v-slot
1.什么是slot <app> <menu-main></menu-main> <menu-sub></menu-sub> <div> <app-footer></app-footer> </div> ...
2019-10-15 21:02:23
835
原创 vue过滤器的使用
定义自定义过滤器，可以使用的两个地方为插值表达式{{}}中与v-bind表达式中，我们可以定义为全局过滤器和局部过滤器。全局过滤器使用的是Vue.filter()，局部过滤器使用的是filters: {}。全局过滤器需要定义在new Vue()之前。可以同时使用多个过滤器，调用顺序由左到右。过滤器是 JavaScript 函数，因此可以接收参数，过滤器第一个参数默认为要过滤的数，第二个参数开始才...
2019-10-14 21:49:09
241
原创 vue生命周期created()前做了什么
我们在做项目时，通常会在组件created()钩子函数中请求后端接口，得到数据后渲染视图，这样可以达到切换到对应页面，即可显示后端数据。问题： vue生命周期created()前做了什么？我们可以看到，官网上给出的是，created()之前执行了初始化注入、初始化化校验。从vue2源码看看：路径：\vue-dev\src\core\instance\init.jsexport func...
2019-10-14 15:14:30
2553
原创 vue生命周期beforeCreate()前做了什么
概念当我们执行 new Vue()开始到被创建完成，vue需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。beforeCreate问题：beforeCreate为vue初始化过程中第一个钩子函数，那么从new Vue()到beforeCreate过程它做了什么？...
2019-10-13 22:58:11
23408
1
原创 vue的基本内置指令
1.插值表达式 {{}}作用：将vue数据模型中的数据显示到视图层中，只能使用在双向标签中间例子：<p>{{name}}</p>2.v-text作用：将vue数据模型中的数据显示到视图层中，定义在开始标签中，单向标签和双向标签都可以使用例子：<div v-text="content"></div>3.v-html作用：也是将vue数据模...
2019-10-13 17:33:29
476
原创 vue的自定义指令
指令的使用vue的自定义指令分为全局指令和局部指令，vue自带的内置指令不能够满足现在的开发需求，所以我们可以通过自定义指令来实现自己想要的指令。全局指令：注册在vue上的，用法为vue.directive，必须在new Vue之前定义，定义了全局指令，说明该指令在整个vue实例中都可以被使用。例子：新增输入框自动获取焦点的自定义指令<body> <div id=...
2019-10-13 17:19:41
238
原创 Vue路由跳转时报错 Cannot read property '$createElement' of undefined
最近在配置路由时，路由跳转时报错：“ Cannot read property '$createElement' of undefined”。 问题在于component写成了components了，修正了就好了。
2019-09-10 13:06:44
5529
4
原创 Vue：[Vue warn]: Failed to resolve directive: changeColor(found in <Anonymous>)报错解决
代码：// 自定义指令 Vue.directive('changeColor', { inserted: function(el, binding) { el.style.color = binding.value } })报错：[Vue warn]: Failed to resolve directive: chan...
2019-08-05 16:10:51
4311
1
原创 canvas09:lineJoin属性与设置折线拐点样式
lineJoin：设置两条线相交的拐点的样式。属性值为“bevel”、“round”、“miter”。属性值 作用 bevel 创建斜角 round 创建圆角 miter 默认，尖角 案例： 绘制三条折线，并设置不同的拐点样式，比较不同。代码：<!DOCTYPE html><html lang="en">...
2019-04-23 22:02:15
1460
原创 canvas08:lineCap属性与绘制线两端样式
lineCap:用于绘制线条两端的样式。属性值有“butt”、“round”、“square”。属性值 作用 butt 默认，线条的两端为平行的边缘 round 向线条的两端添加半圆形线帽 square 向线条的两端添加正方形线帽 案例： 绘制三条直线，分别使用lineCap的三个属性绘制末端，观察区别。代码：<body...
2019-04-23 21:43:51
1737
原创 canvas07:非零环绕填充规则与绘制一个镂空的正方形
1先绘制一个大的正方形2绘制一个小的正方形，位于大正方形的中部3.填充后我们会得到什么图形？我们接下来试一下：代码：<style> canvas { border: 1px #333 solid; }</style><body> <!-- 1.定义一个画板 --> <ca...
2019-04-23 00:06:45
581
原创 canvas06:canvas线模糊问题
当我们在canvas中绘制一条直线，会默认线的宽度为1px,颜色为黑色。但是我们会发现线条的宽度要比1px宽，颜色也没有那么黑，更像是灰色。我们看下效果。代码：<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
2019-04-18 22:04:34
995
原创 canvas05:在canvas标签中设置宽高与在style中设置宽高的区别
在html中，我们给一个元素设置宽高通常会使用css样式设置。而canvas他有自己的宽高属性，我们可以在canvas中设置宽和高，但是canvas的width与height属性与css中设置width与height有没有区别，有什么区别呢，我们可以通过代码去实现对比一下。第一种： 在canvas中设置宽高代码：<!DOCTYPE html><html lang=...
2019-04-18 21:41:08
2480
2
原创 canvas04:填充图形与fill()用法
使用fill()方法对图形进行填充，配合fillStyle使用，设置填充的颜色代码：<body> <canvas id="canvas" width="500" height="500"></canvas></body></html><script> var canvas = document....
2019-04-16 22:28:54
2176
原创 canvas03: 绘制一个三角形与closePath()用法
步骤： 第一种： 1.定义好画布与绘制工具上下文 2.定义第一条边的起点坐标 3.移动至第一条边的终点坐标 4.第二条边起点为第一条边的终点，移动到第二条边的终点坐标 5.第三条边起点为第二条边的终点坐标，起点为第一条边的起点坐标，三条线封闭形成三角形代码：<body> <canvas id="canvas" width="4...
2019-04-16 22:07:32
441
原创 canvas02:使用canvas绘制一条直线
在canvas01中，我们创建了一个简单的canvas案例，现在我们在canvas中绘制一条直线。步骤： 1.定义canvas工具 2.设置起始点坐标x,y （moveTo(x,y)） 3.移动到结束点x1,y1 （lineTo(x1,y1)） 4.设置直线宽度（strokeWidth = '5'可选，默认1px） 5.设置直线颜色（strokeStyle = ...
2019-04-15 23:04:48
2536
原创 canvas01: 体验canvas
创建一个简单的canvas案例:基本步骤： 1.在html中定义<canvas>标签 2.在标签内定义画布宽高 3.在<script>中获取canvas元素 4.获取canvas上下文，即绘制工具 5.以上步骤，我们就定义了一个canvas画布，并获取了上下文，接下来我们可以在canvas中绘制我们想要的图形了。例如绘制直线代码：...
2019-04-15 22:47:40
257
原创 React脚手架搭建及创建React项目
1.安装node.js和npm: 可自行到node官网下载，下载node完成后，npm也会自行下载完成。2.通过cmd执行 node -v 和 npm -v 查看是否下载成功和下载成功后的版本号。 3.安装好的npm的源默认是国外的源，会因为网络原因导致执行npm操作有延时，我们可以切换npm的源为淘宝的源镜像。 执行 npm config set registry h...
2018-10-26 10:20:25
21908
原创 当数据变化时（添加，修改，删除），使用vuex实现页面刷新
项目情景如图： 1.这是一个普通的查询页面，数据显示在表格中，点击查询，根据选项进行匹配查询。2.点击添加、修改、删除操作，成功后会返回查询页面，并刷新查询结果。使用vuex进行刷新操作：1.新建vuex文件， vuex.jsconst busness = { state: { updateTableList: false }, ...
2018-10-19 19:53:51
8727
2
原创 vue+element-ui项目中如何勾选表格数据导出到excel表格
在项目中，我们会将查询数据以table的形式显示在页面中，有时候需要导出页面数据或者勾选table的复选框来选择要导出的数据。element-ui的table组件本身提供了方法，当勾选每行前面的复选框时，获得他的id。 当我们点击导出按钮时，触发方法，发送导出请求，将我们需要导出的数据的id传给后端接口，接口返回要导出的数据流。我们发送请求的时候需要设置，re...
2018-10-08 20:10:19
10254
原创 vue项目中如何下载excel表格模板
在项目中，导入excel数据功能，一般都会有下载excel模板按钮，如果后端接口返回的是模板在服务器中的地址（接口返回url地址）,则可以直接绑定到window.location.href上。点击下载按钮时，触发请求，得到响应信息后自动下载。代码如下：axios({ method: 'get', url: ' http://localhost:8080/downloadExc?t...
2018-10-08 19:36:33
14279
原创 不依赖接口实现页面筛选条件功能案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-07-31 20:07:45
370
原创 php报错" Function name must be a string in xxxx"解决
问题:在写php代码的时候,误将代码写 $name = $_GET("name");运行的时候,提示" Function name must be a string"解决:$_GET[""]方法写错了.写成了$_GET(""),原因: 写成$_GET("")，php首先会认为get()是一个方法，但是前面又多了$符号，php又认为这是一个变量，而变量名不能作为function的名字，所有会抛出"F.
2018-06-30 16:09:47
32313
2
原创 数组常用方法总结
1.添加元素： arr.unshift();给数组头部添加一个或多个元素，并返回新增后数组的长度。 arr.push();给数组尾部添加一个或多个元素，并返回新增后数组的长度。2.删除元素 arr.shift();删除数组中第一个元素，并返回被删除的元素 arr.pop();删除数组中最后一个元素，并返回被删除的元素。3.排序： arr.sort();如果不传参，默认...
2018-06-29 13:37:39
179
原创 node02-如何在服务器获得浏览器使用post提交的数据
我们用nodejs搭建好服务器后，浏览器发送的请求可以是GET请求或者POST请求，服务器想要得到请求中的一些数据,可以通过以下几种方式获得： 我们在这里介绍浏览器以POST方式请求，可以使用以下两种方式：1. 使用request对象的data和end事件获取 data事件可以接收浏览器传递过来的参数：由于有可能参数比较多，浏览器可能会作多次将参数提交过来...
2018-06-29 01:36:54
1097
原创 node01:使用nodejs本地创建服务器,并根据请求内容返回响应数据
需求:1.使用nodejs本地创建服务器。 2.本地请求数据，服务器根据请求内容返回响应数据。 3.用户请求地址 127.0.0.1:3000/index.html,服务器获得请求内容后，找到服务器中index.html页面，并将内容读取出来，作为响应数据返回给浏览器。index.html页面中引入了index.css文件和图片，也会发送请求给服务器获得数据。思路:使用...
2018-06-26 00:57:12
10024
1
原创 使用nvm安装node后,检测node -v提示"node.exe不是有效的32位应用程序"并拒绝访问解决方案
问题：安装nvm的时候,路径选择了C:\nvm和C:\node,安装成功后,控制台执行 nvm install 10.3 安装node,安装完成后,新开控制台,输入node -v 检测node是否安装成功。结果弹出“node.exe不是有效的32位应用程序”提示框，点击确定后，控制台显示拒绝访问。原因：猜测是因为C盘权限问题导致。解决：进入控制面板，卸载nvm,重装nvm,将路径选择成D:\n...
2018-06-14 12:57:21
10009
原创 搭建Hexo博客在git上执行 hexo d /hexo g 报错:ERROR Local hexo not found in D:\hexo 解决
Hexo搭建博客的时候,已经使用命令在cmd中下载了依赖包,但是执行 hexo d 和hexo g 报错,报错如截图:ERROR Local hexo not found in D:\hexoERROR Try running:'npm install hexo --save'导致这个原因为在自己的博客文件夹中,.gitignore文件中添加了node_modules/,导致更新的时候,这个文件夹...
2018-06-13 15:53:45
9019
2
原创 报错解决：Invalid left-hand side in assignment
报错截图：翻译为：赋值左侧无效原因：给jquery对象赋值时语法错误导致报错。错误代码为： $('.verify').val() = i;自己忘了jquery对象val()的用法了；正确的写法应该为$('.verify').val(i) ;将要赋的值放到括号中。...
2018-05-15 21:36:59
52240
2
原创 JSON模板引擎动态--atrTemplate例子:动态生成表格
前提：我们在使用ajax的时候，有时候得到数据之后需要拼接成Html字符串输出，比较麻烦。我们使用js引擎可以省略拼接字符串的过程。需求：页面新建一个表格与加载数据按钮，点击按钮，查询数据库，表格根据得到的数据信息动态的生成行和列显示数据。步骤：1.我们需要新建html页面，并将基本样式写出。代码示例：<!DOCTYPE html><html lang="en">&l...
2018-05-14 13:12:18
3842
原创 报错解决: Uncaught SyntaxError: Unexpected token < in JSON at position 0
在js中获取php页面json数据的时候报错：点开报错连接，提示的是获取的时候报错：当时php代码如下，一直没看出来有什么毛病，后来写了个测试代码，直接打印$data的值， <form action="test.php"> <input type="submit"> </form>发现是关闭数据库的语句写错的，所以之前获取JSON数组的报错原...
2018-05-11 00:55:01
19187
原创 javascript中转换成字符串的三种方法
转换成string类型，有三种方式：变量.toString(); String('值'); 使用'+'拼接一个字符串;每种方式都有使用的范围，我们可以通过下来代码得出以下结论：在基本数据类型中，（1）只有number、boolean 类型调用toString()进行类型转换。 undefined、null中没有toStri...
2018-05-09 14:02:21
53908
原创 js中为数组添加一个获取数组中最大数值的方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
2018-05-09 02:11:31
387
原创 WebAPI之DOM基础总结一
什么叫API: API:(Application Programming Interface)应用程序接口文档，通俗来说就是一系列方法。 什么叫WebAPI: 浏览器的API。分为两个部分：BOM(浏览器对象模型)、DOM（页面对象模型）。 DOM： DOM:(Document Object Model)文档对象模型，DOM...
2018-04-08 23:48:39
704
原创 js中数组的定义与使用
首先，我们来说一下数组的定义。数组就是在堆中开辟的一串连续的内存空间，并将堆地址存在栈中。在java 中，数组的定义为一组相同类型的变量的集合。而在js中，一个数组可以存放任意类型的数据。创建数组有两种类型方式：1. 使用new字段 通过 new 实例化一个数组，又分为3种方式： var arr = new Array();//实例化一个空数组，在内存...
2018-03-31 23:54:13
6464
原创 css基础选择器说明
css选择器分为基础选择器与复合选择器。复核选择器由基础选择器通过不同方式组合成。选择器主要是为了对页面标签进行一对一、一对多、多对一的样式控制。书写格式为：选择器{属性：值；}基础选择器：标签选择器 格式：标签{属性：值；}。 作用范围为调用该css样式表的页面中某种类型所有的标签。 效果： 我们可以看出，只有p标签中的文字格式...
2018-02-22 18:52:19
274
空空如也
使用elementui上传文件，我怎么在预览后，点击上传时判断文件是否在本地被删除？
2018-09-10
axios的响应拦截器怎么做二进制拦截
2018-08-29
怎么在elemnt-ui里，在选择上传图片后获得选择图片的全路径
2018-08-27
博客标题带特殊字符< ，发布的时候提交失败，怎么解决？
2018-05-10
TA创建的收藏夹 TA关注的收藏夹
TA关注的人