![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
初叙
这个作者很懒,什么都没留下…
展开
-
前端页面遇到的坑
(1)子div属性display: inline-block,排列为一行后中间有间隙。原因:这个间隙是inline-block产生的一个空格,这个间隙的大小取决于父div的字体大小。为了消除这个间隙可以将父div的字体大小设置为0,然后在子div中设置字体大小。(2)div不显示内容原因:同上,显示不出来很有可能是为了消除inline-block的间隙,设置了字体为0,这样内部元素的大小字体就会发生变化。所以当设置了字体0时。一定不要忘记设置子div的字体大小。(3)给div设置了z-ind原创 2020-08-29 12:39:07 · 321 阅读 · 0 评论 -
开启前端之路的知识体系
学习还是要系统一点,这篇用来记录一下参考资料什么的王福朋大佬的知识体系大全:https://www.cnblogs.com/wangfupeng1988/p/4649709.html原创 2020-07-09 09:44:45 · 116 阅读 · 0 评论 -
vue使用Props实现组件数据交互
在Vue中,组件的props属性用于定义组件可以接收的外部数据,这些数据来自父组件并传递给子组件。原创 2024-06-27 10:19:25 · 241 阅读 · 0 评论 -
vue自定义事件传递数据
emit是Vue实例的一个方法,它用于触发自定义事件。这些事件可以被父组件监听到,从而实现子组件向父组件的通信。这种方法的好处在于,它可以让数据的流动保持单向,有助于维护组件之间的清晰界限。$emit()方法有两个参数,第一个参数代表触发事件的名称,第二个参数代表跟随事件要发送的数据。父组件想要拿到数据,需要监听子组件中自定义的事件,在事件方法中拿到数据进行操作。页面应用一个组件,采用自定义事件来传递参数。2、在方法中进行数据发送。原创 2024-06-27 09:50:32 · 143 阅读 · 0 评论 -
前端开发之webpack
安装与入门原创 2024-06-25 10:15:59 · 342 阅读 · 0 评论 -
vue中filters中方法调用
vue中filters中方法调用原创 2023-01-04 14:43:52 · 322 阅读 · 0 评论 -
修改自动填充的input背景色
修改input框背景色为透明原创 2022-06-09 16:31:07 · 1650 阅读 · 3 评论 -
vue项目部署至服务器报错vue is not defined
vue项目部署至服务器报错vue is not defined,有几个文件访问不到:刚开始不知道,找不着文件,后面搜到了cdn。应该是cdn挂了,替换了另一个cdn网站:bootcdn.cn本地打包部署系统就通了,关于cdn也是今天刚知道,后面了解一下。这个配置在vue.config.js里面:const assetsCDN = { // webpack build externals externals: { vue: 'Vue', 'vue-router'.原创 2022-05-23 14:42:28 · 2543 阅读 · 0 评论 -
layui表格下拉选择、日期选择
改动三个地方:下拉选择模板 数据渲染 下拉选择监听填充数据//表格{ title: '是否棚改房<span class="titletips">*</span>', field: 'sfpgf', align: 'center', width: 110, // edit: 'text', templet: function (d) { return '<select name="sfpgf" clas原创 2022-04-12 10:55:08 · 3404 阅读 · 2 评论 -
vue项目启动
转备好node.js和yarn从码云上下载压缩包,解压之后用vscode打开file-》open folder打开命令窗口:terminal->new terminal下载包及运行项目,遇到报错解决:项目成功启动。原创 2022-03-15 13:57:06 · 1304 阅读 · 0 评论 -
elementUI数据表编辑(输入、下拉选择、添加行、删除行、上移、下移)
功能:可以进行编辑的表格,加入输入框和下拉选择进行数据的修改,独立添加按钮每次添加一行填写数据,操作栏包括上移、下移、删除。效果如下:页面:<el-table :header-cell-style="{background:'#f2f2f2'}" border ref="historyTable" :data="layerData" width="99vw" size="small"> <el-table-column prop="name" lab...原创 2022-02-10 09:32:03 · 3977 阅读 · 0 评论 -
vue在nginx下部署的坑——页面图片不显示
描述:在使用nginx部署vue项目时,在nginx上给服务器图片配了一个代理/img/,项目启动后服务器地址的图片没有问题,但是在项目静态资源的图片不显示,路径都对。原因:项目图片资源路径也是/img/开头的,应该是这两种访问重复了,导致找不到图片。解决办法:为了方便我将服务器那个名称换了一个,完成。...原创 2021-08-30 16:21:49 · 3242 阅读 · 4 评论 -
vue在nginx下部署后页面刷新问题解决
问题描述:部署好项目后用地址+端口直接打开项目,加载首页后地址http://127.0.0.1:1888/home,当页面刷新的时候报错404,感觉是vue路由没有生效。本人新手,就找了找网上的办法,修改nginx配置文件问题解决,如下:在代理中加入一行try_files $uri $uri/ /index.html;...原创 2021-08-16 10:13:30 · 1121 阅读 · 0 评论 -
vue打包nginx部署
描述:从未部署的vue项目,开始准备了tomcat和nginx,最后发现nginx比较方便,nginx部署的话只准备nginx就可以了。nginx部署过程:1、下载nginx的压缩包,直接解压到目的路径就可以。2、将vue项目打包后的文件夹放在nginx安装路径下的html文件夹中。3、配置nginx的配置文件(\conf\nginx.conf)如图,改三个地方 (1)项目启动地址端口:listen:vue启动端口 ...原创 2021-08-12 11:11:10 · 2352 阅读 · 0 评论 -
vue引入element-ui
1、安装依赖(yarn安装)yarn add element-ui2、在main.js中引入import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI);写一个表格<template><!-- 古树群 --> <div class="trees-container"> <!--古原创 2021-08-02 16:19:01 · 177 阅读 · 0 评论 -
vue el 表格自定义模板
1、自定义序号<el-table-column prop="reasonNum" label="序号" type="index" width="50"><template slot-scope="scope"> <!--将序号填入模板中--> <span class="reasonNum" :title="scope.row.index">{{scope.$index+1}}</span></template>原创 2021-07-16 11:31:25 · 463 阅读 · 0 评论 -
html页面动态操作总结
(1)给父元素中填充新的元素//创建新的子元素var li_f = document.createElement("li");//元素添加样式li_f.className = a===0?"layui-nav-item layui-nav-itemed":"layui-nav-item";//填充到父元素中treelayer.appendChild(li_f);(2)修改元素的classif ($li.className.search("layui-nav-itemed") >原创 2021-05-27 09:59:38 · 590 阅读 · 0 评论 -
饼图总结
series: [ { name: "农村宅基地", type: "pie", radius: "75%",//饼图半径大小 center: ["50%","45%"],//饼图中心点的位置 label: { position: "inner",//标签位于圆内 fontSize: 14,//字体大小 formatter: "{c}...原创 2021-05-27 09:48:28 · 376 阅读 · 0 评论 -
echarts饼图图例总结
icon:图例形状,类型包括 circle,rect, line,roundRect,triangle,diamond,pin,arrow,nonelegend: { orient: "vertical",//图例的布局,水平布局、垂直布局 itemWidth: 8,//图例宽度 itemHeight: 8,//图例高度 itemGap: 30,//图例之间的间隙 bottom: "bottom",//图例位置 textStyle: {//图例字体样式原创 2021-05-27 09:25:08 · 4569 阅读 · 0 评论 -
echarts模块引入报错
将echarts的js文件放在最前面原创 2021-05-25 14:09:11 · 436 阅读 · 0 评论 -
给元素添加删除class
给元素添加删除class//添加li_f.classList.add("layui-this");//删除$checkedMenu[0].classList.remove("layui-this");原创 2021-05-19 11:43:18 · 468 阅读 · 0 评论 -
动态改变元素的图片路径
一个.html页面引用的.js代码动态修改资源路径时,用.html对应的路径!!!原创 2021-04-16 15:24:28 · 221 阅读 · 0 评论 -
layui弹出层子页面动态生成元素
获取子页面元素var second_menu = $(layero).find('iframe').contents().find('#second_menu');在该元素内添加子元素second_menu.append(li_dd);注:append方法,layer内的元素用append。父页面获取的元素用appendChild()...原创 2021-04-06 19:59:46 · 515 阅读 · 0 评论 -
layui table数据表格使用经验
(1)操作栏按钮事件监听table.on('tool(zongdi_extra_table)', function (obj) { if (obj.event == 'del') {//绑定的事件 var tableData = table.cache['zongdi_extra_table']; obj.del();//删除一行表格元素样式 tableData.splice(index, 1);//删除表格数据缓存 }}(2)单元原创 2021-01-09 18:39:00 · 540 阅读 · 0 评论 -
页面跳转传递参数获取参数的方法
function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if (r != null) return unescape(r[2]); retu..原创 2020-11-20 20:01:49 · 797 阅读 · 0 评论 -
动态修改单选框
通过js代码来改变单选框的选中状态://选中$("#id").attr('checked',true);//第2种写法$("#id").attr('checked','checked');注:checked的值为true或false没有引号,设置为'checked'时不能忘记引号。//不选中$("#id").attr('checked',false);...原创 2020-10-09 10:05:27 · 383 阅读 · 0 评论 -
前端html调用高德地图
(1)引入高德的url,需要提前申请key。(2)在页面中写一个div,起一个id。(3)创建一个map对象,用之前的id。var map= new AMap.Map('id',{ center:[111,111],//中心位置坐标 zoom:15//地图缩放});这几步就可以显示出地图,随后可以创建marker、title等添加在地图上。给map添加一个marker:map.add(marker);//将创建好的marker放到地图上面marker:原创 2020-09-16 15:00:52 · 3613 阅读 · 0 评论 -
Cannot read property ‘prototype‘ of undefined错误解决
前端使用element报错:Cannot read property 'prototype' of undefined找到原因:引入js的顺序不合适,如下:https://blog.csdn.net/love_onefly/article/details/80612499原创 2020-09-16 14:32:32 · 19782 阅读 · 1 评论 -
div动态水平居中的解决
想让子div在父div中水平居中,但是父div的宽度是变化的,直接设置margin就不行。最后尝试成功了,方法如下:父div设置绝对定位,采用弹性布局。<div style="position: absolute;width: 100%;bottom: 175px;display: flex;justify-content: center">justify-content讲解:https://blog.csdn.net/iefreer/article/details/50775原创 2020-07-29 19:21:27 · 581 阅读 · 0 评论 -
VUE——@click系列
绑定监听@click = "param"@click = "function(param)"事件冒泡:html元素是嵌套结构,触发内部元素时,外部事件也会由内到外触发,这种现象叫做事件冒泡。 默认事件:标签跳转就是默认事件。阻止事件冒泡@click.stop = ""...原创 2020-07-13 18:11:02 · 2259 阅读 · 0 评论 -
VUE——v-for的使用
(1)迭代整数v-for = "n in 10"(2)迭代数组v-for = "item in arr"(3)绑定数组到数组v-for = "item in [arr1,arr2]"原创 2020-07-13 17:40:15 · 390 阅读 · 0 评论 -
Vue(二)——语法
{{data}}用于数据绑定v-html用于输出html代码v-bind:data中use属性为true采用class1的样式,否则不使用这个类。缩写:<div v-bind:class="{'class1': use}"> v-bind:class 指令</div>绑定参数和属性<div id="app"> <pre><a v-bind:href="url">菜鸟教程</a></pre&原创 2020-06-23 11:46:50 · 132 阅读 · 0 评论 -
VUE.js(一)——实例化
通过new创造一个实例:var vm = new Vue({ el:, //div的id data:{ //定义数据对象的属性 }, methods:{ //定义函数,return返回 } })双大括号{{}}用于输出对象属性核函数返回值,外层表示JS语句,内层添加的大括号表示里面的内容是变量。Vue提供的实例属性以及方法都有前缀$,与我们自己定义的区分开来。...原创 2020-06-23 11:10:05 · 463 阅读 · 0 评论 -
CSS属性(一)—— pointer-events
控制事件失效原创 2020-06-16 11:55:02 · 124 阅读 · 0 评论