前端小技巧，记录贴

置顶请叫我欧皇i

已于 2023-04-20 16:41:09 修改

阅读量239

点赞数

分类专栏： vue2 Element 文章标签： vue.js elementui 前端 javascript Powered by 金山文档

于 2023-03-07 15:36:32 首次发布

本文链接：https://blog.csdn.net/qq_44278289/article/details/129382992

版权

vue2 Element 专栏收录该内容

79 篇文章 31 订阅

订阅专栏

transition标签使用，就是一个过渡的标签动画

1---transition只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素

2---mode的“out-in”和“in-out”代表的意思

out-in：在前一个组件离开之后下一个组件开始进入

in-out：下一个组件进入，前一个组件才离开

<transition mode="out-in" name="fade">
              <router-view
               
              ></router-view>
            </transition>

直接把当前时间渲染到页面

{{value1}}

value1: new Date(),获取当前时间

局部插件导入简写，vue-fullcalendar：日历插件

  components: {
    "full-calendar": require("vue-fullcalendar")
  },

使用，名字和属性名对应上就可以。
<full-calendar
          class="test-fc"
>
 <template slot="fc-event-card" slot-scope="f" v-if="isshow">
           <p>{{ f.event.title }}</p>
          </template>
     </full-calendar>

New FileReader()

New FileReader()：读取上传文件的内容，实例

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>图片本地预览示例</title>
</head>

<body>
  <h3>，，，图片本地预览示例</h3><input type="file" accept="image/*" onchange="loadFile(event)" /><img id="previewContainer" />
  <script>
    const loadFile = function (event) {
      // 我们创建了一个 FileReader 对象并为该对象绑定 onload 相应的事件处理函数
      const reader = new FileReader();
      // 当文件读取完成后，会触发绑定的 onload 事件处理函数，在该处理函数内部会把获取 Data URL 数据赋给 img 元素的 src 属性，从而实现图片本地预览。
      reader.onload = function () {
        const output = document.querySelector("#previewContainer");
        output.src = reader.result;
      };
      // 然后调用 FileReader 对象的 readAsDataURL() 方法，把本地图片对应的 File 对象转换为 Data URL。 
      reader.readAsDataURL(event.target.files[0]);
    };
    </script>
</body>

</html>

Js String.fromCharCode() 函数

String.fromCharCode()函数用于从一些Unicode字符值中返回一个字符串，该函数属于String对象。例如：

String.fromCharCode(71)//G
Unicode字符值也就是unicode编码方式，可以搜索一下

Object.keys()

Object.keys()可以获取到对象的属性名，可以用作筛选表头数据,引用大神的举例

1-对象就是获取属性名，数组就是按照索引排，字符串就是拆分成数组的形式

let person = {name:"张三",age:25,address:"深圳",getName:function(){}}
Object.keys(person) // ["name", "age", "address","getName"]

详细看这位大神写的object.Keys()

Math.sqrt()，Math.pow，Math.round()

Math.sqrt()：算平方根的，如果Math.sqrt(9),那么结果是3，因为33得9

math.pow(x,y)的作用是取x的y次幂

例如：

math.pow(4,2) 就是(4²)输出的结果为16，4*4

math.pow(10,3) 就是(10³)输出的结果为1000，10*10,*10

math.round(x)的作用通俗讲就是对x进行"四舍五入",对0.5要进行判断对待。

math.round()的原理是对传入的参数+0.5之后，再向下取整得到的数就是返回的结果。这里的向下取整是说取比它小的第一个整数或者和它相等的整数

例如：

Math.round(-1.5)的结果是-1.5 + 0.5 再向下取整，即-1.0取整，结果是-1.。

Math.round(-1.4)的结果是 -1.4 + 0.5 即-0.9 向下取整，结果是-1。

同理，Math.round(1.5)即为 1.5 + 0.5 再向下取整，结果是2。

原文链接：https://blog.csdn.net/weixin_49372881/article/details/114374417

网页下载（跳转功能实现）

获取后台报表下载，全程后端操作，后端的下载链接
根据下载按钮的点击事件中
创建标签a，添加href跳转，拼接连接，触发点击事件，完成下载。
let a = document.createElement("a");
                a.href = "后端下载文件地址拼接文件名" + filename;
                a.click();

Array.reverse()

array.reverse()，数组元素倒序，也就是数组[1,2,3]，变成321

linq插件

下载直接cnpm i linq -S

linqjs插件，可以对数据库内容进行增删改查，通过命令实现

条件匹配，感兴趣的可以搜索下。

var Enumerable = require('linq')
Enumerable.from(that.cal_total_List)
          .where(n => n.fail_type === 0)
          .toArray()

11-解决npm下载慢问题

npm下载巨慢，之后cnpm下载的话可能会出现很多莫名其妙的bug，所以解决如下

npm install --registry=https://registry.npm.taobao.org

12-mysql安装踩坑

跟着博主(82条消息) MySQL 5.7.27详细下载安装配置教程_mysql5.7下载_ZZZhonngger的博客-CSDN博客，写的很详细但是跟着做还是报错了

1-mysql的安装路径不要有中文

2-运行报错

E:\MYSQL\mysql-5.7.41-winx64\bin>mysqld -install
The service already exists!
The current server installed: E:\MYSQL\mysql-5.7.41-winx64\bin\mysqld MySQL

解决：先删再重新下载就完事了

E:\MYSQL\mysql-5.7.41-winx64\bin>sc delete mysql
[SC] DeleteService 成功
E:\MYSQL\mysql-5.7.41-winx64\bin>mysqld -install
Service successfully installed.

2-运行初始mysql报错

E:\MYSQL\mysql-5.7.41-winx64\bin>mysqld --initialize
2023-04-11T07:54:25.187930Z 0 [ERROR] --initialize specified but the data directory has files in it. Aborting.
2023-04-11T07:54:25.188161Z 0 [ERROR] Aborting

解决：把my.ini文件放在mysql-5.7.41-winx64的bin目录下再运行就可以了

最后启动成功

C:\Users\Administrator>net start mysql
MySQL 服务正在启动 .
MySQL 服务已经启动成功。

13-向下取整Math.floor(),向上取整Math.ceil()

向下取整就是如果是正数例如10.99，不看小数点，直接把小数点切了，得到10

负数就切掉小数位再-1

console.log(Math.floor(5.21));//5
console.log(Math.floor(10.98));//10
console.log(Math.floor(-3.1));//-4
console.log(Math.floor(0));//0
console.log(Math.floor("7.18"));//7
console.log(Math.floor(1.5));//1
console.log(Math.floor(-1.5));//-2

向上取整和向下取整相反

向上取整正数，只要有小数位，直接去掉小数位后+1,

负数有小数位就切掉

console.log(Math.ceil(5.21));//6
console.log(Math.ceil(10.98));//11
console.log(Math.ceil(-3.1));//-3
console.log(Math.ceil(0));//0
console.log(Math.ceil("7.18"));//8
console.log(Math.ceil(1.5));//2
console.log(Math.ceil(-1.5));//-1

请叫我欧皇i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端小技巧，记录贴

1---transition只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素。Object.keys()可以获取到对象的属性名，可以用作筛选表头数据,引用大神的举例。1-对象就是获取属性名，数组就是按照索引排，字符串就是拆分成数组的形式。2---mode的“out-in”和“in-out”代表的意思。New FileReader()：读取上传文件的内容，实例。out-in：在前一个组件离开之后下一个组件开始进入。in-out：下一个组件进入，前一个组件才离开。
复制链接

扫一扫