旺仔布丁-CSDN博客

原创碳排放管理项目

登陆尾部布局flex <el-form-item class="btns"> <el-button type="primary" @click="login">登录</el-button> <el-button type="info" @click="resetLoginFrom">重置</el-button> </el-form-item> .bt

2022-04-21 17:24:49 1032

线性渐变相邻两个区域百分比的差就是这两个颜色渐变过渡的面积占比。（90-末尾100% 是混合颜色）不写该是百分比多少还是多少,末尾不写当成100%，开头不写当成0%写成0就当成0%,比前面小,显示单个颜色如果前面已经是40%了，后面是30%，则比前面小,显示单个颜色 #app { width: 200px; height: 100px; background: linear-gradient(to top right, yellow 50%, green 100%);

2022-04-21 17:23:10 232

原创 split、splice、join

splitsplit()主要是用于对一个字符串进行分割成多个字符串数组。str.split(“”);使用默认的情况下，split（‘’）方法对每个字符进行分割。<script type="text/javascript">var str="How are you doing today?"document.write(str.split(" ") + "<br />")document.write(str.split("") + "<br />").

2022-04-21 15:07:37 231

原创 Vue学习

文章目录Vue创建vue中数据变更页面会自动变化(案例)事件vue中$data $el循环v-model数据的双向绑定todolist(案例)全局子组件(案例)局部子组件(案例)子组件向父组件传值(案例)生命周期及$el模板语法运算computed methods watchvue中的样式绑定条件渲染key列表渲染template组件使用中细节点1.isinnerHTMLapp.innerHTML = ‘hello word’当前文件src="./vue.js"this箭头函数中

2022-04-20 17:26:12 1134

原创 Vue插槽使用

插槽目的：传给子许多标签dom啥的，让子去显示引入： <div id="app"> <child content="<div><p>dell</p></div>"></child> </div> <script> var child = { props: ['content'], // templ

2022-04-20 17:17:52 1568

原创 Vue中事件名组件名props大小写

props v-bind 位置 <div id="app"> <div :title="title" :contents="0">{{message}}</div> //这个传不到子，这个title是个属性。有效果 <zi :title="title" :contents="0"></zi> //只有这样才能传到子，并不会有title属性效果 </div><script>

2022-04-20 14:51:46 854

原创 for of和for in

2022-04-20 13:25:20 55

转载 js事件使用

事件使用方式 <div id="app1" onclick="alert('1')">11</div> <div id="app2" onclick="modify()">22</div> 这里要加（），否则不对，原生要加()。下面写成modify(){}形式也不行 function modify() { alert('2') } <div id="app3">33

2022-04-19 13:57:57 409

原创 flex布局案例

justify-content和align-itemshttps://blog.csdn.net/u014614038/article/details/112062197justify-content:center;水平居中 https://www.jianshu.com/p/b806c97e6512（通过flex-direction确定了主轴方向，justify-content确定了在主轴方向的对齐方式，其控制的目标是间距和排版）align-items:center;垂直居中 https://w

2022-04-19 11:51:59 1122

原创 echarts使用

立即执行函数为了防止变量污染，减少命名冲突，我们可以使用立即执行函数。因为里面的变量都是局部变量。(function () { })();使用步骤：引入echarts 插件文件到html页面中准备一个具备大小的DOM容器<div id="main" style="width: 600px;height:400px;"></div>初始化echarts实例对象var myChart = echarts.init(document.getElementById(

2022-04-18 17:18:29 287

转载在线预览word和pdf文件

一直打不开vue项目下本地的pdf、doc文件，检查了好久才发现问题把pdf文件放在public 文件夹下的static文件下，项目没有static文件夹，新建一个，就能打开了<li><a href="../static/help1.pdf">平台维护人员使用手册</a>...

2022-04-11 17:24:41 334

转载 vue+element刷新使导航条在相应的路由位置

刚进来，导航显示了默认的选项’3-1‘。修改导航栏，导航发生了变化，路由及页面也改变。刷新页面，这时页面不改变，但导航条位置不一样了。:default-active="activeIndex" data() { return { activeIndex: '3-1', }; },把data中的activeIndex去除，改为计算属性，这一步解决纵向导航栏的问题根据路由通过判断返回计算属性的值computed: { activeIndex

2022-04-11 16:47:15 356

转载 input中v-model如何想办法实现绑定数组

报错内容： You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-model on an obj

2022-04-11 15:16:59 2281

原创小图标和文字居中对齐

图片是矢量图标浮动 <style type="text/css"> ul{ margin: 0; padding: 0; list-style-type: none; } li{ float: left; /* 浮动整体li单行显示 */ } svg{ float: left; /* 这里不浮动，文字会跑到图标前面 */ } span{ float: left; line-

2022-04-02 11:06:04 502

原创 disabled的使用

disabled是布尔属性对于布尔 attribute (它们只要存在就意味着值为 true)这个属性在html中，只要出现disabled，那么就会禁用在js中可以控制HTML中都禁用 <p>Last name: <input type="text" name="lname" disabled="disabled" /></p> <p>Last name: <input type="text" name="lname" di

2022-03-31 15:29:59 6271

原创手写js(一）

文章目录一.防抖节流二.深拷贝三.继承一.防抖节流 <button type="button" id="app">按钮</button> <script> // this都指向<button type="button" id="app">防抖</button> // 注意有时候必须要用箭头函数，才能保证this // 一下子好多都执行这个函数 // +(new Date()) 等于 new D

2022-03-25 16:55:41 857

原创 js三栏布局

一先center center宽100%。左中右浮动左右margin-left上去。 container设置左右padding。三个position:relative，左右left right。先定义好header和footer的样式，使之横向撑满。在container中的三列设为浮动和相对定位(后面会用到)，center要放在最前面，footer清除浮动。三列的左右两列分别定宽200px和150px，中间部分center设置100%撑满这样因为浮动的关系，center会占据整个conta

2022-03-25 14:41:44 1148

原创 foreach reduce filter map

这是毫无意义的：collection.forEach(function () { // do something return false;});因为array#forEach根本不关心其worker函数的返回值.它只是为每个数组元素执行worker函数.您可以使用worker函数来设置外部变量：function truthCheck(collection, pre) { var allAreTruthy = true; collection.forEach(function (

2022-03-24 14:39:59 1100

原创管理后台项目

文章目录前端项目初始化后台项目的环境安装配置登录登录技术点登录页面布局删掉不要组件router目录vue实例箭头函数前端项目初始化https://www.cnblogs.com/jimmy2019/p/13961509.html创建项目https://www.cnblogs.com/haitaoli/p/10304193.html安装vue脚手架脚手架创建项目（这就创建好vue项目了）vue create **使用图形化界面 vue ui 命令以图形化界面创建和管理项目

2022-03-24 14:38:43 1066

原创停车小案例知识点

这里写自定义目录标题滚动滚动加载事件触发滚动条overflow-y: auto;手机端手指滑动上拉元素显示与隐藏元素即使display:none了，也能获取到ul li数组为空获取元素querySelector classNameclass写到一起给多个div循环添加点击事件滚动scrollTop：滚动视窗的高度距离window顶部的距离，它会随着往上滚动而不断增加，初始值是0，它是一个变化的值；clientHeight:它是一个定值，表示屏幕可视区域的高度；scrollHeight：页面不能滚

2022-03-24 14:35:09 67

原创实现防抖函数

防抖函数刷新频繁解决办法refresh()调用的很频繁，加载一个图片调一次。我们希望如果1s内多张图片更新了，需要多次调用refresh()了，我们就等待一起来发生一次刷新。而不是只要有一张图片就发生一次刷新。真实项目需求：搜索中有个输入框，搜yifu，根据yifu关键词向服务器发生请求，展示搜索结果，但你输入y就去服务器请求相关进而展示肯定不行，监听这个输入框的改变用改变事件@change，执行后面方法，只有value变化就向服务器发送请求，但这肯定不行，服务器压力很大。对这个东西做个防抖动

2021-10-23 21:17:21 304

原创 JSON

文章目录JSON 与 JS 对象的关系JSON 简介JSON 语法JSON vs XMLJSON 对象JSON 数组JS 中彻底删除 JSON 对象组成的数组中的元素JSON.parse()JSON.stringifyjson使用jsonp 教程JSON 与 JS 对象的关系很多人搞不清楚 JSON 和 JS 对象的关系，甚至连谁是谁都不清楚。其实，可以这么理解：JSON 是 JS 对象的字符串表示法。它使用文本表示一个 JS 对象的信息，（JSON）本质是一个字符串。如：var obj = {a

2021-08-04 19:23:46 121

原创 JavaScript(二)

文章目录document.write改变 HTML 内容改变 HTML 样式改变 HTML 图像验证输入非数字值页面显示数据一条语句，多个变量重新声明 JavaScript 变量let 和 const数据类型constructor 属性对象方法return语句常见的HTML事件在字符串中可以使用转义字符转义的特殊字符：字符串可以是对象typeof 操作符正则表达式JavaScript 错误严格模式运算常见错误用document.form选择表单元素JavaScript 表单验证setCustomValidi

2021-08-04 19:23:12 174

原创 jQuery

@[加粗样式toc]jQuery 选择器“查询”和“查找” HTML 元素$(this).hide() - 隐藏当前元素(重点)$(“p”).hide() - 隐藏所有段落$(".test").hide() - 隐藏所有 class=“test” 的所有元素$("#test").hide() - 隐藏所有 id=“test” 的元素$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素 $("*")

2021-08-04 19:22:38 345

原创 Ajax详解

文章目录AJAX简介AJAX实例AJAX创建XMLHttpRequest 对象AJAX向服务器发送请求AJAX-XMLHttpRequest 服务器响应AJAX-onreadystatechange 事件AJAX简介为什么用ajax，为什么ajax能实现不刷新页面更新数据，看一下这个，特别详细https://www.cnblogs.com/cdf-opensource-007/p/6348108.htmlhttps://www.cnblogs.com/weichao1996/p/9079028.h

2021-07-23 20:45:15 144

原创 JavaScript(一)

目录初识JavaScriptJavaScript书写位置变量1. 变量的使用2. 数据类型3. 获取变量类型typeof及数据类型转换4. 关键字和保留字5. JavaScript基本语法运算符与流程控制1. 运算符(操作符)2. 流程控制2.1. 选择结构2.2. 循环2.2.3. while循环2.2.4. do-while循环2.3. 跳转语句continue、break数组与函数1. 数组1.1. 创建数组1.2. 访问数组元素（索引）1.3. 遍历数组（for循环）1.4. 数组中新增元素（fo

2021-07-22 17:40:04 430

原创 Vue项目开发知识点总结

目录创建项目 github建仓库创建项目 github建仓库创建项目：创建个文件夹LearnVuejs05。创建项目通过脚手架3 vue create supermall(改成supermall1了）,选择最简单的，之后用到什么再加，这样不会生成乱七八糟的目录结构。跑一下 npm run serve（因为项目目录没有config，所以是脚手架3，所以是npm run serve，如果脚手架2是npm run dev，不信可以去package.json看一下)为项目加git：先在g

2021-07-13 20:47:05 1336

原创 HTML与CSS进阶

目录html进阶1. HTML5、XHTML和HTML1.2. HTML5简述1.3. HTML、XHTML 和 HTML 52. id属性和class属性3. 浏览器标题栏小图标4. 图片语义化5. fieldset 标签和 legend 标签6. 列表语义化7. img标签和背景图片区别HTML51. H5新增内容1.1. 什么是HTML51.2. HTML5拓展了哪些内容2. HTML5新增标签2.1. 新增了哪些语义化标签2.2. 新增多媒体音频标签2.3. 新增 input 标签2.4. 新增表单

2021-06-25 11:03:03 231

原创 CSS入门

目录一、CSS的引入方式二、元素的id和class三、CSS选择器2. CSS复合选择器四、CSS字体样式1. font字体2. CSS外观属性2.0. 总结2.1. color2.2. text-align2.3. line-height2.4. text-indent2.5. text-decoration五、标签显示模式转换 display0. 总结1. 块级元素2. 行内元素(内联元素)3. 行内块元素(inline-block)六、CSS背景(background)0.总结1. 背景颜色2. 背景

2021-06-24 11:49:48 529

原创 HTML入门

HTML一、浏览器内核二、标签三、图像四、表格table五、列表六、表单1. input控件2. label标签3. textarea控件4. select下拉列表5. form表单域七、多媒体八、http请求和响应九、简单谈一下get和post区别十、从输入url到页面展示发生了什么十一、浏览器的渲染过程十二、HTML5的form如何关闭自动完成功能？十三、什么是 HTML5 的基本构件（building block）？十四、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？十五、link和@im

2021-06-21 10:23:51 123

hcyhcyhcy_的博客