一片涟漪

原创 this.$set

当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了 Object.keys(ele).forEach(key => { // row[key] = ele[key] this.$set(row, key, ele[key]) })

原创 vue动态获取ref方式

<div v-for="(item,index) in list" :key="index" :class=" circleAnimation === 1 ? 'ball ball'+ (index+1) : 'ball ball1'+(index+1)" ref="circle" @click="oneClick(index)"> <div>{{item.name}}</div> </div&...

原创 js日期转换精准到毫秒

// 精准到毫秒 getNowTime () { const date = new Date() const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() const hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() .

原创 css定位，v-model

定位model

原创 Vue http转换https

在quasar.config文件中开启https devServer: { https:true, port: 8081, open: false , // opens browser window automatically proxy: { '/template': { target: 'https://192.168.101.61:8080', changeOrigin: true,

原创 前端nginx配置https协议

server { # 服务器端口使用443，开启ssl, 这里ssl就是上面安装的ssl模块 listen 443 ssl; # 域名，多个以空格分开 server_name 192.168.100.100; # ssl证书地址 ssl_certificate /home/bigdata/se.

原创 vue 导出文件

把项目中的文件导入电脑本地 // 导出日志 exportClick() { // 可以自定义文件名 const fileName = null // this.$q.dialog({ // title: '', // message: '请输入文件名称', // // prompt: { // // model: fileName, // //

原创 vue 全局路由守卫

看下面注释 ———————— router文件夹下的index.js中export default function ({store, ssrContext}) { const Router = new VueRouter({ scrollBehavior: () => ({x: 0, y: 0}), routes, // Leave these as they are and change in quasar.conf.js instead! // quasa

原创 Echarts 折线图

<template> <div id="main" style="width: 100%;height: 220px"></div></template><script> import * as echarts from 'echarts'; export default { name: "securit", data() { return { lineData:[820, 932,

原创 input file控件 上传本地文件及type分类

本地上传文件用 input file控件操作简单简单介绍下使用流程HTML:<input ref="file" id="file" multiple webkitdirectory type="file" accept=".txt" style="display: none" @change="importFile"/>webkitdirectory: 只上传文件夹 不上传文件夹的可以去掉，accept: 需要上传文件的类型（代码块下面有需传类型模板）JS:打开本地弹框操

原创 登录框正则表达式

用户名：只含有汉字、数字、字母、下划线不能以下划线开头和结尾/^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/^ 与字符串开始的地方匹配(?!_)　　不能以_开头(?!.*?_$)　　不能以_结尾[a-zA-Z0-9_\u4e00-\u9fa5]+　　至少一个汉字、数字、字母、下划线$　　与字符串结束的地方匹配密码：含有6~10位由数字和26个英文字母混合而成的密码/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6

原创 Vue使用keep-alive 达到组件之间切换，数据保持不变

1、routes.js文件中在路由中增加 meta { path: 'GenerateStation', name: 'GenerateStation', component: () => import('pages/LeftBarPages/GenerateStation'), meta:{ keepAlive:true // 通过此字段判断是否需要缓存当前组件 },2、 在控制路由跳转的

原创 js 通过id获取数组中指定对象

this.Array[ id ].对象中属性

原创 js数组根据id删除多个对象

对原数组进行操作，返回改数组// 当是不是数组时 if (!Array.isArray(Array2)){ Array1.splice(Array1.findIndex(v => v.id === Array2.id), 1) } else { for (let i = Array1.length - 1; i >= 0; i--) { for (let j

原创 js二维数组转换一维数组

var arr1 = [[0, 1], [2, 3], [4, 5]];var arr2 = [].concat.apply([], arr1);// arr2 [0, 1, 2, 3, 4, 5]

原创 JS随机生成ID 以及随机生成坐标

随着时间来生成不同ID // 随机生成 IDconst idStr = Date.now().toString(36)this.itemObj.id = idStrconsole.log(this.itemObj.id)每一次的id都不同----结果如图：生成不同坐标 // 随机生成坐标this.itemObj.itemPos = parseInt(Math.random() * 400, 10) + ',' + parseInt(Math.random() * 400, 10)

原创 针对对象属性分割去除小数点后的数字

针对对象属性这种数据的显示第一步：用split方法 用逗号先分割开 [0]是取的第一个数 [1]是取的第二个数this.graphical.itemPos.split(',')[0]this.graphical.itemPos.split(',')[1]第二步：用 parseFloat 方法把字符串数字转换为浮点数 再结合 toFixed 方法可以选择保留到小数点后几位()空的话就把小数点后的数全部清空parseFloat(this.graphical.itemPos.split(',')

原创 js时间转换

原创 代码的积累

if判断的一种思路

原创 富文本编辑器

一个概念性的理解讲述：富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器.它提供类似于 Microsoft Word 的编辑功能，容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱.原理：富文本编辑器又称为WYSIWYG(所见即所得)，其本质就是在一个页面元素中嵌入HTML代码，并且这个元素可以像文档输入框一样进行文本的编辑，它同时还可以设置文本样式。写博客的工具就是一个功能丰富的富文本编辑器，编辑邮件以及论坛发贴都用

原创 web安全及防护(XSS、CSRF、sql注入)

个人理解：web安全防护分为三种XSSCSRFSQL注入XSSXSS攻击原理： 说的是攻击者往web页面插入恶意的html标签或者js代码 然后获取用户的私密信息 这时候我会对用户输入的地方做出相对应的过滤 比如<> ，等CSRFCSRF攻击原理： 跨站请求伪造 是一种常见的web攻击 攻击者发送个A超链接 然后用户点进去到A超链接的页面中 A页面会获取到用户存到本地的个人信息 比如说验证码 在程序和用户交互过程中 账户交易这种核心步骤 强制用户输入验

原创 前端JS面试题简约版

1. javascript原型与原型链：原型：js中每一个函数都有一个proto属性，而且对应的是自身的原型，被称为隐式原型函数中除了proto属性之外还有一个prototype属性，被称为显示原型原型链:当一个对象调用自身不存在的属性和方法时就会去自己的proto的前辈prototype对象上去找，如果没找到就会去prototype的前辈上去找 直到找到或者返回undefiend 这个查找的过程就是原型链最顶层的原型对象：object.prototypeobject.protot

原创 ES6箭头函数

箭头函数是匿名函数，不能作为构造函数，不能使用new 箭头函数没有原型属性 箭头函数中的this 指向父级上下文

原创 vue Router

下面的内容自己理解 简约的不能再简约vue router有两种模式：Hash：Hash:在url中多个#号history:在url中是/new VueRouter 设置路由模式Hash里面还有 HashHistory 它里面有 两个方法 push、replace。HashHistory.push() ： 将新路由添加到浏览器访问历史中。HashHistory.replace()：跟push的区别就是 push是把路由添加到浏览器访问历史中 replace

原创 项目混合开发到打包优化的流程

个人理解：1. 项目用的混合开发：混合开发说白了就是-----网页端调用安卓的原生接口或者功能 安卓原生调用网页的功能 网页端调用安卓用addJavaScriptInterface方法把安卓暴露给页面 页面通过add 还有showToast两种方法调用 方法前面是本地方法类的名称 这样就能嵌套进去 安卓调用网页的话就简单了 直接使用webview里的loadURl （JavaScript+网页方法名） 但是方法一多 就乱了 所以还得创建一个专门管理类的点 就是nati

原创 vue打包优化及项目上线流程（简洁版）

一.打包优化：1. 去除生产环境sourceMapsourceMap文件，存的是打包前后的代码，方便开发使用 。 这个文件也占用不少部分空间module.exports = { // 根据你的实际情况更改这里 publicPath, assetsDir: 'assets', lintOnSave: true, productionSourceMap: false,}2. 对资源文件进行压缩需要下载 compression-webpack-plugin 插件cnp

原创 浏览器兼容性解决方案

什么是浏览器兼容性？不同浏览器的内核不一定相同，所以每个浏览器对网页的解析也有一定的差异浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎浏览器兼容性问题一般指：css兼容、js兼容css兼容:不同浏览器的标签默认的margin和padding不同1.可以用CSS里 *{margin:0;padding:0;}但是性能不好2. 一般我们用引入reset.css样式进行重置1. CSS新属性兼容问题：css3新属性需要加浏览器前缀 ，然后兼容早期浏览器-moz----- 火

原创 JS事件委托简洁版

概念：事件委托说白了就是利用事件冒泡，指定一个事件处理程序，可以管理某一类型的所有事件。当然，如果子元素阻止了事件冒泡，那么委托也就没法实现了。好处：可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件就非常棒例子：<ul id="myLinks"> <li id="goSomewhere">Go somewhere</li> <li id="doSomething">Do something</li>

原创 前端html面试题简约版

1. 盒模型：盒模型可以说是装内容的容器，这个容器由 内容----外边距----内边距----边框组成。盒模型又分为两种：标准盒模型（W3C标准的盒子模型）标准盒模型在页面中的总宽度是由= width +margin+padding+border组成怪异盒模型(IE浏览器)怪异盒模型在页面中的总宽度是由=width+margin组成 （因为在IE浏览器 width里面已经包含了padding、border）标准盒模型与怪异盒模型的转换：box-sizing:conten

原创 元素上下左右居中方式

如何让一个元素在父元素中上下左右居中？共同的dom结构如下： <div id="box"> <div id="x"></div> </div>123方法一：父相自绝后，子分部向左向上移动本身宽度和高度的一半（也可以用 transform:translate(-50%,-50%)）最常用方法 #box{ width: 400px; height: 400px; backg

原创 element-ui分页器

仅供element-ui分页器的使用修改template标签的dete --- :data=“tableData2.slice((currpage -1) * pagesize, currpage * pagesize)”如图： 第二步：修改分页器中的数据进行绑定如图:

原创 字符串中想要拿到传的值 and URL路径

API — url 接口：JS中 转换成字符串形式传入

原创 CSS Hack

什么是CSS Hack?一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。CSS Hack常见的有三种形式：属性Hack、选择符Hack、条件注释Hack， Hack主要针对IE浏览器例如：1、条件Hack<!--[if IE]> <p>你在非IE中将看不到我的身影</p><![endif]--><!--[if IE]><style> .test{color:red;}</

原创 vue-cli4打包优化

一、去除生产环境sourceMapsourceMap资源映射文件，存的是打包前后的代码位置，方便开发使用，这个占用相当一部分空间module.exports = { // 根据你的实际情况更改这里 publicPath, assetsDir: 'assets', lintOnSave: true, productionSourceMap: false,}12345678二、对资源文件进行压缩需要下载 compression-webpack-plugincnpm i co

原创 vue项目优化

一、代码优化1. 使用keep-alive缓存不活动的组件keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。在动态组件中的应用<keep-alive :include="whiteList" :exclude="blackList" :max="amount"> <component :is="currentComponent"></

原创 uni-app搜索记录

个人写法 仅供参考HTML：<template> <view> <view class="sos_box"> <view class="sos_inp"><input type="text" placeholder="搜索" v-model="Nei" @confirm="ondang()" /></view> <view class="sos_qu">取消</view> </v

原创 methods computed watch的区别

computed：computed 计算属性 计算结果会缓存,只有当依赖值改变才会重新计算应用场景（购物车计算价格的时候）watch：watch 监听属性 一个值的改变 需要另一个值的改变而改变,结果不会缓存应用场景（搜索数据）methods：methods 事件方法 调用一次，执行一次,结果不会缓存computed 和 watch 都可以观察页面的数据变化。当处理页面的数据变化时，我们有时候很容易滥用watch。 而通常更好的办法是使用computed属性...

原创 简述href 与 src 的区别

href：href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。src：src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部...

原创 作用域

作用域（定义）变量作用域：就是一个变量可以使用的范围。作用域 （种类）js中首先有一个最外层的作用域，全局作用域；js中可以通过函数来创建一个独立作用域称为函数作用域，函数可以嵌套，所以作用域也可以嵌套；es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）；如下图所示：es6作用域,只适用于const,let自由变量自由变量的概念： 当前作用域没有定义的变量作用域链自由变量的向上级作用域一层一层查找，直到找到为止，最高找到全

原创 vue组件中data为什么必须是函数

下面的属于自己的理解 适合小白因为组件是复用的 如果我第一个组件是以对象的形式调用公共组件的话 当我第二个组件还想调用这个公共组件 这时 这两个组件的内容会一致 但是我不想要这种结果 所以必须得是函数...