- 博客(77)
- 收藏
- 关注
RSS订阅原创 纯前端下载excel数据（导出）
在你的工具文件夹下新建index.js页面。最后导入虽然也写出来来但是没有搞懂。然后在需要使用的vue页面导入。希望有大神讲解一下共同进步。
2022-11-25 13:12:35
649
原创 css中的@mixin的用法
@mixin指令允许您定义可以在整个样式表中重复使用的样式，而避免了使用无语意的类（class），混入(@mixin)还可以包含所有的 CSS 规则，以及任何其他在 Sass 文档中被允许使用的东西，甚至可以携带 arguments，引入变量等，这就意味着只需少量的混入(@mixin)代码就能输出多样化且不重复的样式。@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。@include 指令可以将混入（mixin）引入到文档中。混入(mixin)通过 @mixin 指令来定义。 @mixin
2022-07-07 17:51:21
2642
原创 如何使用markdown编辑器
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：撤销：Ctrl/Command + Z重做：Ctrl/Command + Y加粗：Ctrl/Command + B斜体：Ctrl/Command + I标题：Ctrl/Command + S
2022-06-16 18:03:17
123
原创 前端如何获取用户经纬度问题(jquery获取用户经纬度问题)
IP定位的优缺点：优点：极简，易懂。不需要⽤户地理位置授权，不需要引⽤插件，⼀个ajax完全搞定。缺点：定位不准确，虽说可定位到区⼀级，但实际上⼀般只能定位到市⼀级，偶尔还只能定位到省⼀级，此时就要⽤到⼿动定位了。1⽰例（此处的开发密钥是我已经在腾讯申请好了的，若要引⽤，烦请去腾讯申请，申请流程很简单。）1.31 jquery实现IP定位...
2022-06-07 22:26:01
887
原创 el-table因为出现垂直滚动条造成多一个td的空白格
el-table因为出现垂直滚动条造成多一个td的空白格效果图解决思路利用deep穿透给倒数第一个表头的右边框去掉，给空白格加上一样的背景颜色就可以了/deep/th { &:nth-child(3) { border-right: 0; } &:nth-child(4) { background: rgb(229, 229, 230); }}解决完后的效果图...
2022-05-18 17:25:58
860
原创 给echarts的提示框添加单位，以及给旁边的文字进行调整
在项目中我们需要的往往是带单位的提示框比如这样的那么去哪里修改呢？其实在tooltip中有函数方法formatter（params）可以进行修改params是你展示的数据比如柱状图你只显示一条柱状可以不用循环直接字符串拼接但是如果有多条需要展示那么就需要使用循环拼接了tooltip: { trigger: 'axis', axisPointer: { animation: false .
2022-04-29 09:51:27
2835
原创 当请求报错后提示多次，怎么让他提示一次？
像这样得提示很多边很烦那么问题原因当用户时间长了不操作时再次请求就会被后端认为token过期了需要重新登录，请求不到数据所以对用户进行提示，但是由于那个页面请求了多次不同的数据所以提示过多问题分析像这样肯定是请求出的问题所以我们往请求方面得文件去找，我这里是请求拦截这个文件出现得问题import axios from "axios";import { MessageBox, Message } from "element-ui";import store from "@/store".
2022-04-25 18:40:40
827
原创 获取当前的域名
在这里插入代码片 window.location.protocol+"//"+window.location.host; // 返回https://mp.csdn.netwindow.location.host; //返回url 的主机部分，例如：mp.csdn.net window.location.hostname; //返回mp.csdn.netwindow.location.href; //返回整个url字符串(在浏览器中就是完整的地址栏)window.location.
2022-04-20 11:11:20
1345
原创 自学js的遗忘方法
随机小数：Math.random()name:Math.random(){直接调用name会生成随机小数}分隔方法用于把一个字符串分割成字符串数组split（）name.aplit('分割'123' ').reverse(反转).join('拼接'){可以使用在templay代码中简单使用}v-html可以识别标签并将其渲染到自身的子元素中，但是v-html会覆盖自身所拥有的子元素<div v-html="name"> <p>123</p> &
2022-04-20 10:03:14
112
原创 echarts项目中真实遇到的修改
这是现在的，然后指示线透明了需要将他给还原成实线下面是代码 tooltip: { trigger: "item", }, legend: { data: [//下面的文字说明 { name: "小汽车", icon: "image://" + img1 + "",//img1是通过import引入的这样文字说明前面的icon图标就有了..
2022-04-20 09:23:11
219
原创 翻牌数字怎么做？（超级详细的来了适合新猿）
很多数据大屏和后台都有HTML <div class="flex pad13 nums"> <img v-for="(item, index) in numList" :key="index" :src="utils.numImg(item)" alt="" srcset="" /> ..
2022-04-20 09:21:43
244
原创 css简单动画
首先在css中去定义动画@keyframes rotatel {from{transform:translate(-50%,-50%) rotate (0deg);}to{transform:translate(-50%,-50%) rotate (360deg);}//以上就是定义好的动画 动画名为rotatel //直接在div盒子里调用.div{ animation: //调用动画 rotatel //动画名 15s // 执行时间 lin
2022-03-21 20:19:25
396
原创 封装自定义指令（拖拽）——局部
<template> <div class='bag' > 159 <div class="a" v-drag> 12312我 </div> </div></template><script>export default { directives:{ drag(el,bind){ el.onmousedown=function(e){ var
2022-03-20 15:06:14
243
原创 拖拽div元素
需要注意要给行内元素left和top，要父相子绝事件为mousedown<template> <div @mousedown="move" class='move'> <img src="../../public/$RAVG6O4.png" /> </div></template><script>export default { data() { return { le
2022-03-20 14:25:54
63
原创 如何获取当前的时间和之前的时间呢？
很实际的一个问题直接复制粘贴就可以使用了在html中写个div类名为showTime <script> var t = null t=setTimeout(time,1000) //开始运行 function time (){ clearTimeout(t)// 清除定时器 dt = new Date(); var y = dt.getFullYear();//获取年
2022-03-19 22:26:08
374
2
原创 后台管理项目总结
电商后台管理系统技术栈：vue element axios true-table前期准备：配置axios得BUSurl前面公共路径，下载axios，element 以及tree-table表格插件项目组成：分为登陆页面、用户管理、权限管理、商品管理、订单管理、数据统计、等几个模块用户列表这是用户列表主要包含的功能有是否禁用用户、以及对用户进行编辑、删除、和分配权限、添加新的用户、角色列表在这个页面主要显示了该用户的所以权限以及对用户的删除权限以及分配权限和删除权限列表这个页面没什么难
2022-02-20 19:22:39
4398
1
原创 时间戳在element中如何转化为标准模式？
在后台获取到的时间一般为123456152类似的时间戳，但是我们前端想要的是20212.12.02类型的或者2021年02月16号这样的，可以用过滤器改变//这是时间戳js过滤器代码 filters: {//与data同级 dataFormat(val) {//val是传递过来的时间戳 let data = new Date(val); let y = data.getFullYear(); let m = data.getMonth() + 1;
2022-02-16 14:55:53
652
1
原创 vue的修饰符
一、事件修饰符.stop阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再
2022-02-11 16:37:30
95
原创 vue的常用指令
1. vue常用指令：v-model 多用于表单元素实现双向数据绑定v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容 同上v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）v-else-if 必须和v-if连用v-else 必须和v-if连用 不能单独使用
2022-02-07 21:15:00
74
原创 v-if和v-show得区别
1. 相同点都可以控制dome元素得显示隐藏1. 区别v-if:控制dom元素得隐藏是将dom整个添加或者删除；v-show控制dom得显示隐藏是因为dom元素添加css3得display设置none或者block，dom元素还是存在的2. 性能比较v-if具有更高的切换消耗，因为它是直接添加或者删除dom的v-show具有更高的初始化渲染消耗，它渲染出来后就一直存在只是被css隐藏了3. 适用场景v-if适合运营条件不大可能改变的场景下v-show适合频繁切换v-if:在请求后台接
2022-02-07 21:00:00
284
原创 vue常用指令
v-model 多用于表单元素实现双向数据绑定v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容 同上v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）v-else-if 必须和v-if连用v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误v-bind 动态绑定 作.
2022-02-07 19:00:40
44
原创 vue的虚拟dom
1. 什么是虚拟dom通过js创建一个Object对象来模拟真实dom结构，这个对象包含标签名（tag）属性（attrs）和子元素对象（children）三个属性，通过vue中的render（）函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中。创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应在vue中如何用虚拟dom定义真实dom<div id="app"> <p class="
2022-02-07 18:33:26
687
转载 vue双向数据绑定原理
答vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile(模板解析器)解析模板指令，将模板中的变量替换成数据，然
2022-02-07 16:51:49
50
原创 mvvm和mvc
mvvm概念：mvvm是Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。以vue为例：view 对应 template，vm 对应 new Vue({…})，
2022-02-01 19:30:00
492
原创 vue组件化开发
一般面试时问道组件怎么回答？**答：**我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功能组件)）首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块
2022-02-01 18:00:00
96
原创 vue组件通信
父传子父组件给子组件传递自定义属性，子组件通过props来接收父组件代码<son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->import son from './Son' //引入子组件data () { return { msg: '父组件', }},components:{son},子组件代码<p>子组件接收到内容：{{ faMsg }}</p>
2022-01-31 16:00:00
64
原创 vue双向数据绑定原理（vue2和vue3的区别）
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile(模板解析器)解析模板指令，将模板中的变量替换成数据
2022-01-30 19:15:00
562
原创 vue深度监听watch
watch可以让我们监控一个值的变化，从而做出相应的反应 <div id="app"> 用户名：<input type="text" v-model='person.name'> <button @click='person.age++'>+</button> <p>你的名字是：{{person.name}}</p> <p>你的年龄是：{{perso
2022-01-30 13:00:00
204
1
原创 vue中Computed、Methods、Watch区别
computed计算属性 计算结果会缓存,只有当依赖值改变才会重新计算对于任何复杂逻辑，你都应当使用计算属性// 而是依赖于属性的,就是一个属性的封装,属性的值不变化,那么不会多次调用computed,所以性能更好计算属性默认只有getter，可以在需要的时候自己设定setter：computed: { fullName: { // getter get: function () { return
2022-01-29 19:37:58
77
原创 vue的虚拟dom
概念：通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中虚拟dom可以简单的用一句话概括，就是用普通的js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的
2022-01-29 19:30:23
82
原创 vue的虚拟diff算法
概念diff算法就是进行虚拟节点对比，并返回一个patch对象用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom而Vue3只比较发生变化的节点 当节点一旦发生改变 会给一个变量 效率大大提高...
2022-01-29 19:26:40
971
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人