Sunshine0508-CSDN博客

原创 gitHub 访问并提速

Mac前往host文件：打开访达（Finder），点击选择文件夹，快捷键按住【Shift+Command+G】组合按键；输入 /etc/hosts ，如果没有修改权限右击etc跟hosts 显示简介修改权限。会得到CDN和IP地址，对应github.global.ssl.fastly.net。3、配置hosts中gitHub映射。1、修改本地的hosts文件。2、获取gitHub最新IP。

2023-04-27 14:55:53 705

原创 git不提交node_modules文件

git不提交node_modules文件

2022-08-10 17:42:50 1157

module.exports = { root: true, env: { node: true }, extends: [ "plugin:vue/recommended", "plugin:vue/vue3-recommended", "plugin:vue/vue3-essential", "eslint:recommended", "@vue/typescript/recommended", ], parserOptions:.

2021-11-09 10:26:22 3247

原创 Vue常见面试题汇总

一. 请谈谈Vue中的MVVM模式MVVM全称是Model-View-ViewModelVue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。 ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时作用域某个HTML元素上的这个HTML元素可以是body，也可以是某个id所指代的元素。DOMLi...

2021-11-04 16:20:08 251

原创 angular——侧边导航栏随窗口滚动切换选中，点击对应内容元素滚动到浏览器窗口的可视区域内

html<div class="content"> <div class="left"> <div class="navLi" *ngFor="let item of navList;let idx = index" [ngClass]="{'active':num==idx}" (click)="navClick(idx)"> {{item.navName}} </div> </div> &l

2021-06-28 16:56:02 718

原创关于做angular引入echarts

1.安装ngx-echartsnpm install echarts --savenpm install ngx-echarts --save2.在项目中引入echarts在项目包配置文件中引入js脚本//angular-cli.json文件{ "apps": [{ "scripts":[ "../node_modules/echarts/dist/echarts.min.js", "../node_modu

2021-04-30 10:23:16 312 1

原创 js——excel导出

//res是返回的值，name是文件名export const exportExcelFile = (res = {}, name) => { const blob = new Blob([res], { type: 'application/octet-stream' }); // , { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' } cons.

2021-03-22 14:13:05 651

原创 JS——深拷贝的封装函数

function deepClone(obj){ let objClone = Array.isArray(obj)?[]:{}; if(obj && typeof obj==="object"){ for(key in obj){ if(key in obj){ if(obj.hasOwnProperty(key)){ //判断obj子元素是否为对象，如果是，递.

2021-03-19 15:19:56 111

原创图片添加棱角边框

<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <style> .cli.

2020-12-21 17:17:41 280

原创 CSS 文字跑马灯效果

<div class="footer"><span>这是一段文字</span></div><style lang="less">@keyframes notice-data-v-5140b967 { 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }}.footer { .

2020-12-21 17:05:06 565

原创 VUE——element checkbox（全选，半选，全不选）

官网实例：<template> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <div style="margin: 15px 0;"></div&gt...

2020-05-08 13:42:21 3324

原创 APP——uniApp针对图片获取节点并标识

demo<template> <view> <view class="warp"> <image :id="ImgId" @click="mouseClick" class="image" src="../../../static/image/bg_login.p...

2020-04-09 20:09:33 1205 1

原创 APP——uniAPP 中ifdef #ifndef #endif 的用法，可以处理平台的兼容性

1.#ifdef #ifndef #endif三者的意思#ifdef 仅在某个平台上使用 #ifndef 在除了这个平台的其他平台上使用(非此平台使用） #endif 结束条件编译 #ifde2.平台标识的意思标识平台 APP-PLUS 5+App MP 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序 MP-W...

2020-03-12 15:53:23 5073 1

原创 APP——语音识别

//HubuilderX 语音识别插件配置: https://ask.dcloud.net.cn/article/35059封装的工具类speech.jslet instance = null;class Speech { constructor() { if (!instance) { instance = this; } return in...

2020-03-09 14:04:55 1094 1

原创 Vue——Observer的用处

在state.js的initData()函数中，使用的是observe()方法来为数据对象绑定一个Observer对象，Observer对象执行defineReactive()方法为数据对象设置 setter 和 getter。而在initProps()函数中，通过遍历props选项直接对数据执行了defineReactive()方法来设置 setter 和 gett...

2020-02-26 20:55:57 917

原创 JS 常用正则表达式

验证数字：^[0-9]*$验证n位的数字：^\d{n}$验证至少n位数字：^\d{n,}$验证m-n位的数字：^\d{m,n}$验证零和非零开头的数字：^(0|[1-9][0-9]*)$验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$验证非零的正整数：^\+?[1-9][0-9]*$验证非零的负...

2019-12-16 11:22:54 298

转载 MySQL 连接出现 Authentication plugin 'caching_sha2_password' cannot be loaded

很多用户在使用Navicat Premium 12连接MySQL数据库时会出现Authentication plugin 'caching_sha2_password' cannot be loaded的错误。出现这个原因是mysql8 之前的版本中加密规则是mysql_native_password,而在mysql8之后,加密规则是caching_sha2_password, 解决问题方法有...

2019-09-20 12:48:09 323

原创 VSCode快速生成vue模板

添加用户代码片段打开 vsocde 的首选项 > 用户代码片段，输入vue，选择代码片段文件为 vue.json。输入以下内容。{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>$0</div>", "</templ...

2019-09-05 17:15:24 422 1

原创 js——每隔1秒打印数字

方法一：自执行函数for (var i=0; i<5; i++) { (function (i) { setTimeout(() => console.log(i), 1000*i) })(i) }方法二： es6块级作用域letfor (let i=0; i<5; i++) { (function (...

2019-08-14 17:25:05 4773

原创 Vue常见面试题汇总

2019-08-08 10:29:56 263

原创前端常见的浏览器兼容性问题及解决方案

市场上浏览器种类很多，不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，内核更加倾向于说渲染引擎。常见的浏览器内核：常见的浏览器内核可以分四种：Trident、Gecko、Blink、WebkitIE浏览器： Trident内核，也成为IE内核 Chrome浏览器： Webkit内核，现在是...

2019-08-07 14:45:15 830

原创 vue——router解决首次加载资源过多导致的速度缓慢的问题（懒加载）

懒加载：延迟加载，即在需要的时候进行加载，随用随载。像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。简单的说就是：进入首页不用一次加载...

2019-08-05 14:39:31 1524

原创 js——获取data-id 的值

jsdocument.getElementById('fun').dataset.appId = 'hsfun' // <div data-app-id="hsfun"></div>var f2 = document.getElementById('fun').dataset.appId // hsfunjqueryvar f1 = $(this).dat...

2019-08-01 16:58:56 3773

原创 vue——图片懒加载

原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。1、安装插件： npm install vue-lazyload -...

2019-07-31 10:34:28 1238

原创移动app的兼容性

1、防止手机中网页放大和缩小<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">2、上下拉动滚动条时卡顿、慢body {-webkit-overflow-scrolling:touch; overflow-scro...

2019-07-25 10:06:10 543

原创 css——BFC与IFC的理解

BFC（Block Formatting Context）即“块级格式化上下文”IFC（Inline Formatting Context）即“行内格式化上下文”。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生作用BFC是W3C CSS 2.1 规范中的一个...

2019-07-15 11:05:14 355

翻译前端的恶意攻击方式及预防方法

一、XSS【Cross Site Script】跨站脚本攻击恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。防御方法：1.过滤关键字：script javascript等 /** * [hasIllegalChar 判断是否含有script非法字符] * @pa...

2019-07-12 10:09:13 1001

原创微信小程序官方示例

获取微信官方出得小程序源码：使用微信客户端 6.7.2 及以上版本。自行下载即可

2019-07-10 09:33:24 1760

原创 vue——vue2-filters

安装npm install vue2-filters在main.js里引入import Vue from 'vue'import Vue2Filters from 'vue2-filters'Vue.use(Vue2Filters)要在组件中使用预定义的方法之一（如limitby、filterby、find或orderby），需要将vue2filters.mixin添加到...

2019-06-21 13:45:34 868

翻译 vue+Typescript ——插件vue-class-component、vue-property-decorator的使用总结

安装npm install vue-class-component vue-property-decorator --save-dev其次，咱来说说它们的区别与联系：vue-property-decorator社区出品；vue-class-component官方出品vue-class-component 是 vue 的官方库，作用是用类的方式编写组件，提供了Vue、Compone...

2019-06-21 12:32:30 4481

翻译 vue-vuelidate框架自定义验证规则

Vuelidate是一款简单轻量级的基于模块的Vue.js验证插件。安装npm install vuelidate --savenpm i -S vuelidate //简写导入到main.js中import Vue from 'vue'import Vuelidate from 'vuelidate'Vue.use(Vuelidate)使用其实使用起来真的很方...

2019-06-21 10:42:33 1615

翻译 vue——webpack针对发布新的版本有浏览器缓存的解决方法

路径中使用 hash，每次构建时会有一个不同 hash 值，避免发布新版本时线上使用浏览器缓存module.exports = { // ... output: { filename: '[name].js', path: __dirname + '/dist/[hash]', },}...

2019-06-20 15:34:54 2198

原创 Vue问题——webpack `Invalid Host/Origin header`

怎么解决webpackInvalid Host/Origin header问题问题原因：这是webpack本身出于安全考虑，因为不检查主机的应用程序容易受到DNS重新绑定攻击。但是，在我们的开发环境下，可以禁用掉disableHostCheck这一配置项。webpack相关版本package.json "html-webpack-plugin": "^3.2.0"...

2019-06-19 17:34:28 977

翻译 vue——vueRouter 的params和query传参的区别与使用

$router和$route的区别//$router : 是路由操作对象，只写对象//$route : 路由信息对象，只读对象//操作路由跳转this.$router.push({ name:'hello', params:{ name:'word', age:'11' }})//读取路由参数接收t...

2019-06-12 13:40:50 934

原创 HTML 布局的方式

1、浮动2、定位3、分栏布局 column-count：auto | 整数；---控制栏数　 column-width： auto | length；---每栏的宽度 column-gap : length ;---两栏之间的间距 column-rule : 宽度，线型，颜色；---栏与栏的间隔线类似border，solid | dott...

2019-06-04 15:39:41 154

原创 vue——三种常见的传值方式，子传父、父传子、同级传值

父组件向子组件传值父组件<template> <div> 父组件: <input type="text" v-model="name"> <br> <br>  <child :inputName="name"></chi...

2019-05-30 11:26:39 5015 1

原创 html css3 漂浮动态星星特效

图片素材：https://download.csdn.net/download/sunshine0508/11184893代码如下：<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" con...

2019-05-17 15:41:22 3722 2