学后台做前端-CSDN博客

原创 Property or method "xxxx" is not defined on the instance but referenced during render.

明明写了方法，却报方法未找到其实是你methods写成了method，少了一个s哈哈，赶紧看下

2020-03-18 16:49:12 1361 1

原创输入cnpm报错

记执行脚本报错：无法加载文件 C:\Program Files\nodejs\node_global\cnpm.ps1，因为在此系统上禁止运行脚本。要以管理员身份运行在新公司新建项目时候遇到一个问题如上图，安装cnpm或者node都会报这个错误找了半天发现解决方法如下（操作如上图）1、打开终端2、在终端执行：get-ExecutionPolicy，显示Restricted（表示状...

2020-02-07 16:08:00 486

原创 change事件和blur的区别

blur与change事件在绝大部分的情况下表现都非常相似，输入结束后，离开输入框，会先后触发change与blur，唯有两点例外。1. 没有进行任何输入时，不会触发change在这种情况下，输入框并不会触发change事件，但一定会触发blur事件。在判断表单的修改状态时，这种差异会非常有用，通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹。2. 输入后值并没有发生...

2019-10-25 14:46:06 5532

原创 new Vue({router,store, render: h => h(App) }).$mount('#app');

routerrender: h => h(App)是下面内容的缩写：render: function (createElement) { return createElement(App);}进一步缩写为(ES6 语法)：render (createElement) { return createElement(App);}再进一步缩写为：...

2019-10-22 15:10:50 12514 1

转载 npm的用途说明

网上的 npm 教程主要都在讲怎么安装、配置和使用 npm，却不告诉新人「为什么要使用 npm」。今天我就来讲讲这个话题。本文目标读者是「不太了解 npm 的新人」，大神您别看了，不然又说我啰嗦了 ��社区程序员自古以来就有社区文化：社区的意思是：拥有共同职业或兴趣的人们，自发组织在一起，通过分享信息和资源进行合作。虚拟社区的参与者经常会在线讨论相关话题，或访问某些网站。前端程...

2019-10-16 12:59:02 688

转载超链接中的onclick和href链接方法

链接的 onclick 事件被先执行，其次是 href 属性下的动作（页面跳转，或 javascript 伪链接）；假设链接中同时存在 href 与 onclick，如果想让 href 属性下的动作不执行，onclick 必须得到一个 false 的返回值。不信，你可以将 goGoogle 函数中的 return false 注释掉；如果页面过长有滚动条，且希望通过链接的 onclick ...

2019-09-04 14:54:40 6428 2

转载 background-size

为什么background-size:100% 100%;和background-size:100%;的效果不一样background-size:这个属性有两个值，第一个值为x轴方向的缩放比例或者px,第二个值为y轴方向的缩放比例或者px，如果只写一个值，则第二个值默认为auto(根据图片原来的比例，以及现有的宽度，来确定高度)比方说：你有一张长宽比例为4:3的图片，有一个width:10...

2019-08-15 11:19:49 305

转载 html5中video标签设置视频的宽度和高度

一般情况下：<video width="320" height="240" controls="controls">1但是有的时候发现设置了视频的高度却并没有发生变化，我们可以设置其父元素的宽高，让video填充满父元素。只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可。object-fit语法...

2019-07-03 09:32:14 31573 2

转载表格花式效果

对于table的一些基础信息不了解的，可以参考我以前写过的一篇《关于table的一些记录》。下面演示的代码，具体的源码可以参考此处。一、表格固定左边与顶部公司最近要做个排期系统，当滚动表格的时候，需要将顶部和左边的分别固定起来。1）固定顶部原理就是用标签模拟出顶部的样式，通过脚本计算出高度，以及各个块的宽度，再将table中的thead的内容覆盖掉。1. 样式：通过绝...

2019-04-18 10:20:06 178

转载总结伪类与伪元素

来源:alloyteam发布时间: 2016-05-23 16:51阅读: 6328 次推荐: 0原文链接[收藏]　　熟悉前端的人都会听过css的伪类与伪元素，然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发，区分这两者的区别，并且列出大部分伪类与伪元素的具体用法，即使你有用过伪类与伪元素，但里面总有一两个你没见过的吧。　　1. 伪类与伪...

2019-02-28 15:54:51 254

转载 display：table的几个用法

DIV+CSS的布局已经让表格布局几乎很少用到，除非表格语义性很强的情况。display：table解决了一部分需要使用表格特性但又不需要表格语义的情况，尤其是DIV+CSS很不方便解决的问题，比如以下两种情况：一、父元素宽度固定，想让若干个子元素平分宽度通常的做法是手动设置子元素的宽度，如果设置百分数不一定能整除，设置具体的数值又限制了父元素的宽度固定，很烦。可以使用d...

2019-02-28 10:48:52 736

转载 display:table和display:table-cell

　　display的table和table-cell一般情况下用的不多，所以很少有人去关注它，但他们两个联手起来会给你惊喜！这里抛出这样一个问题，如下，让块里的多行文字垂直居中？一说到垂直居中就会想到，单行文字垂直居中line-height等于height；块级元素垂直居中，position定位或者flex布局。但这里我介绍display：table和table-cell是如何让多行文字...

2019-02-22 13:38:27 278

K71U8DBPNE-eyJsaWNlbnNlSWQiOiJLNzFVOERCUE5FIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdGlvbiI6IkZvciBlZHVjYXRpb25hbCB1c2Ugb25seSIsImNoZWNrQ...

2019-02-11 09:51:50 2694

转载 echarts中datazoom相关配置dataZoom=[ //区域缩放 { id: 'dataZo

dataZoom=[ //区域缩放 { id: 'dataZoomX', show:true, //是否显示组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。 backgroundColor:"...

2018-12-28 15:26:47 1607

转载实现在HTML页面加载完毕后执行某个JS的两种方法

方式一：window.onload=function(){var userName="xiaoming"; alert(userName); }方式二：$(document).ready(function(){ var userName="xiaoming"; alert(userName); }); 方式二可简写为：$(function(){ var userNa...

2018-12-20 09:41:48 1567

转载收入支出分析

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>关系图案例</title>  <script

2018-12-19 17:39:48 1695

转载 echarts 学习日志之堆叠柱状图对多数据进行统计并显示

工作中需要用到echarts，我也就利用时间学习了以下。在用堆叠柱状图显示多数据的和时，一直有些问题，我在网上查找了一些资料，和同事探讨了一下。一是在外面计算出总数并在series里面在建一个柱状图或者折线代表总数，但不显示出来（设置柱状图的颜色为白色）；二是在series新建的{ 代表总数 }进行编写，需要用到formatter，可参考其它博主的文章。function zjqstc() {...

2018-12-19 17:29:01 1523

转载 cSS选取第几个标签元素：nth-child、first-child、last-child

2018-12-13 10:51:26 298

转载 bootstrap-select插件的使用

引入文件<link href="/bootstrap-select-1.12.4/dist/css/bootstrap-select.min.css" rel="stylesheet" /><script src="/bootstrap-select-1.12.4/dist/js/bootstrap-select.min.js"></script>h..

2018-09-29 15:10:43 12045

转载关于js初始化函数比较

1.ready是等页面所有的dom节点加载完成，监听的是 DomContentload 事件。初始化并解析完成是触发，ready事件是页面中的所有DOM结构已完全加载时执行不需要等待样式表，图片和 iframes 加载完，也就是说当这个事件触发的时候，你就可以通过 JS 获取所有你 html 里的节点了。在大多数情况下，只要DOM结构已完全加载时，脚本就可以运行。传递处理函数给.ready(...

2018-08-20 10:41:13 1369

转载 flex的使用实例

1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现HTML代码：<div class="demo"> <div class="inner"> <p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p> </di

2018-08-16 14:45:18 208

转载 echart 属性含义

// 图表标题title: { x: 'left', // 水平安放位置，默认为左对齐，可选为： // 'center' ¦ 'left' ¦ 'right' // ¦ {number}（x坐标，单位px） y: 'top',...

2018-08-16 10:04:37 458

转载图片居中的方法

<div class=“box”>　　<img /></div>水平居中的常用方式：　　text-align:center ——这可以实现子元素字体，图片的水平居中。　　margin:0 auto —— 这是针对块元素的水平居中方法垂直居中的常用方式：　　 vertical-align: middle;——这个垂直居中属性，只...

2018-08-13 16:10:50 887

转载 div+css的padding和margin问题

1:<div class="I_Top"> <div class="Top_Bg">黑色背景部分宽度为1004px;加上两边红色的边框宽度，整个是1006px</div></div>相应的css：.I_Top{width:100%;text-align:center;}.Top_Bg{width:1004px;border:...

2018-07-18 12:09:42 617

转载 HTML5 移动页面自适应手机屏幕四类方法

1、使用meta标签：viewportH5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页...

2018-07-03 17:38:30 315

转载如何开发手机端网页，如何让网页自适应？

工具/原料一个浏览器方法/步骤先看一个简单的网页代码<html><head><meta charset="utf-8"/></head><body>hello 我不是自适应网页</body></html>在PC电脑端的实现效果如图在移动端的实现效果如图很明显，当在移动端上显示时，它仍然是按照，p

2018-07-03 17:36:34 15980 2

转载 select 标签默认样式在火狐和ie浏览器上下拉箭头难看！谷歌ok！在网上找到的解决下拉箭头的样式

select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #000; /*很关键：将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ ...

2018-06-28 10:01:34 1551

转载 Html+CSS 替换元素与不可替换元素块内元素与内联元素

元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如<div>和<span>就不同，而<strong>和<p>也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。从元素本身的特点来讲，可以分为替换和不可替换元素。...

2018-06-21 16:04:43 284

转载 PS(photoshop)抠图（切图）必备快捷键及要

对于PS来说，小码哥也算是初学者，懂得也仅仅是一些工作上用的最多的常用知识，大家不要鄙视鄙人哈！下面嗫，是小码哥我平时抠图（切图）时，常用的一些工具和快捷键。看似简单，但是，只要用精了，做网站页面编写完全木有问题滴，，，，嘎嘎废话不多说了，看要点：1、H键：鼠标光标转换为“小手”形状，此时，就能点击鼠标左键拖动图像了。2、V键：则会把鼠标光标回复到正常的“箭头”状。用于你对右侧图层选择。3、C键：...

2018-06-19 11:09:36 6668

转载纯css实现箭头

<div class="topArrow"></div>css如下：效果图如下：<div class="bottomArrow"></div>css如下：效果图如下：<div class="leftArrow"></div>css如下：效果图如下：<div class=

2018-06-14 16:54:41 209

转载 css 中<a>标签跳转问题

没有指定<a>的target属性值时，默认是"_blank,可以参考以下代码的设置来控制<a href="#" target="_blank">链接</a>target的值target="_blank":在新窗口中浏览新的页面。 target="_self":在同一个窗口打开新的页面。 target="_parent&quot

2018-06-14 10:50:39 2086

原创如何修改html中列表项li所显示的圆点的颜色？，以及相关样式的设定

这是li标签自带的圆点的颜色改变，代码如下：.centerbt li{ content:"."; color:gray; }在标签li后面加入“@”符号，这里都会使用position，这样可以调整位置。 .centerbt li:after{ content:"@"; color:gray; position:relative; left:200px; botto...

2018-06-14 10:21:41 30770

转载如何根据父级元素进行相对定位

需求：首先有个父级div，若干子元素如何根据父元素的位置进行相对定位？分析：看到这个需求，我首先想到的是position:relative；然而并不能满足需求。大家可以亲手试试，为啥不能满足呢？因为position:relative是指元素相对于在文档流中位置进行移动的，而不是以父元素为基准进行移动的。那如何解决？方法是：将父元素的position设为relative，将子元素的定位方法设为ab...

2018-06-13 14:27:42 10607

转载如何让子div在父div中水平居中？

<!DOCTYPE html><html><head><style>#box{ border: 1px solid gray; width: 100%;} #zhongjian{ height: 120px; width: 340px; background: yellow; margin-left: auto;...

2018-06-13 13:59:27 1394

原创相对定位（relative）和绝对定位(absolute)

一：绝对定位position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对...

2018-06-13 13:16:37 1638

原创 CSS reset重置代码页面初始化问题

CSS Reset是什么？在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE 下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一...

2018-06-13 13:14:27 939

原创子DIV块中设置margin-top时影响父DIV块位置问题

相信很多前端同学在做页面开发的时候都遇到过这样的问题。给一个div内部的div设置一个margin-top，结果它的父级跟着它一起下移了。如下面的代码.a { width:100px; height:100px;}.b { width:50px; height:50px; margin-top:10px;}<div class="a">...

2018-06-13 11:38:29 10993