itBellah-CSDN博客

原创浏览器兼容性问题，前端性能优化、SEO优化

目录一、常见浏览器兼容性问题及解决二、前端性能优化三、SEO优化一、常见浏览器兼容性问题及解决不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，内核更加倾向于说渲染引擎。不同浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异。常见的浏览器内核：1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同解决方案：使用css 里增加通配符 * { margin:

2021-05-10 15:47:56 1698 1

原创前端所用各类工具的使用和配置

4- node的安装和配置配置环境变量的原因是安装全局模块时，会默认安装到C盘的路径C:\Users\GD20161102\AppData\Roaming\npm 中所以这边配置全局安装模块（node_global）以及缓存目录的环境变量（node_cache）两个文件夹在 node 根目录中win + R -->cmd 输入以下命令npm config set prefix “...

2020-10-19 10:23:07 311

转载对前端工程化、模块化、组件化开发的理解

提到前端往往很多人的映像就是入门简单,HTML、CSS加一起一个星期基本上就能大概上手,JS难一点但也能很快写一些简单的小效果,在网上随便一搜索各种特效代码随意用,一个新手前端也能在很短的时间里写出炫酷的页面效果,然而入门简单并不意味着前端这碗饭很好吃,做惯了切图、布局、扣特效的前端新同学在向前发展的路上越来越觉得吃力,而没有任何编程思想和软件开发基础很多人对前端工程化、组件化、模块化、MVC这些“高大上”的词汇云里雾里。本文用最简单的语言介绍一下我对工程化、组件化、模块化的理解,面向的对象是前端新手,所

2020-08-18 10:24:55 2135

原创 HTML快速编写代码

快捷键，然后按Tab键<ul> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> &lt

2020-08-05 10:12:22 264

原创 vue项目开发常见错误整理

出现报错信息： [Vue warn]: Property “visible” must be accessed with “data.visible"becausepropertiesstartingwith"data.visible" because properties starting with "data.visible"becausepropertiesstartingwith"” or “_” are not proxied in the Vue instance to prevent conf

2020-08-03 10:46:19 1681

原创国内知名IT互联网公司名单

北京微软百度腾讯阿里网易滴滴新浪美团爱奇艺小米牛客网完美世界 360 搜狐字节跳动金山亚马逊当当口袋购物聚美优品去哪网人人网豌豆荚优酷乐视 ...

2020-06-15 16:53:39 3655

原创 vue路由懒加载和拓展的组件懒加载

vue-cli 路由的懒加载？一、为什么要使用路由懒加载为实现更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。二、定义懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。三、使用常用的懒加载方式有两种：即使用vue异步组件和 ES中的import，具体实现如下：/*** vue异步组件实现懒加载* 方法如下：component：resolve=>(require(['需要加载的路由的地址'])，resolve)*//* 此处省去之前导入通过 ```im

2020-06-04 11:08:52 188

原创 JS 实现类似F11全屏效果

1\ 效果展示初始图片全屏2\ 代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

2020-04-27 20:00:19 460

原创在 vue 中 input 输入框自动获取焦点

1\ 效果图页面初始就自动获得焦点2\ 代码实现<template> <div> <el-input v-model="plate" type="number" id="plateInput" placeholder="请输入搜索关键字"></el-input> </div></template>...

2020-04-24 17:06:14 4240 1

原创在 vue-cli3.X 中自定义表格复选框全选、反选和单选

1\ 需求分析选中表头中的复选框按钮，则表格中对应的每个子项都被选中表头中的复选框按钮选中后又取消选中，则表格中对应的每个子项都不被选中表格子项中的复选框状态全都相同，则全选按钮为对应的状态类型2\ 效果图展示3\ 代码实现<template> <div class="table-list"> <div ...

2020-04-20 14:20:54 731 2

原创在 vue-cli3.X 项目中自定义元素鼠标右键菜单

1\ 为元素绑定 contextmenu 事件<template> <button @contextmenu.prevent.native="openMenu($event)"></button></template>2\ 在页面编写右键菜单内容<ul v-show="rightMenuVisible" :style="{left:...

2020-04-20 10:46:07 774

原创在 vue-cli3.x 项目中引用自定义的 .js 文件

1\ 项目目录结构2\ 引用如想在 about.vue 中调用 about.js里定义的函数第一步，写好自定义方法第二步，在需要的组件中通过 import 引入，并在需要的地方调用第三步，查看结果，已正确引入3\ 拓展，当定义了多个方法时输出结果4\ 或者通过以下方法引入多个方法...

2020-04-16 09:24:53 1615 1

原创在 vue-cli 项目中渲染数据到页面时一些数据处理方法的封装

1\ 封装处理条件为假的数据<script>methods: { judgeNull1(data) { if (data == undefined || data == null || data == "null") { return ""; } else { return data; } }}&...

2020-04-09 18:56:19 316

原创 JS中 Try-Catch 的使用

测试案例：function handleTryCatch() { //try_catch好处：发现错误但不让程序终止，继续执行之后的语句 try { //先从上到下执行try里面的语句，一旦发现错误则跳出try，并且不再执行try下面的语句 console.log('a') console.log(b) con...

2020-04-09 18:42:01 348

原创在 vue-cli 项目中当格式化文档与 Eslint 代码规范检查相冲突解决

在根目录下(即与 package.json 同级)，新建一个 .prettierrc 文件目录，如下在此目录中写入代码{ "semi": false, "singleQuote": true}完成。

2020-04-07 14:13:32 750

原创关于 Vue 脚手架

目录导读：1\ Vue 脚手架的基本用法2\ Vue 脚手架生成的项目结构分析3\ Vue 脚手架的自定义配置1\ Vue 脚手架的基本用法Vue 脚手架用于快速搭建 Vue 项目基础架构，官网地址：https://cli.vuejs.org/zh/使用步骤基于 3.x 版本的脚手架创建 Vue 项目1- 全局安装 3.x 版本的 Vue（通过 win + R --> ...

2020-04-02 15:17:02 213

原创接口调用--axios 和 async/await 用法

目录导读：1\ axios 基本特征2\ axios 基础用法3\ axios 响应结果4\ axios 全局配置5\ axios 拦截器1\ async/await 基本用法2\ async/await 处理多个异步请求接口调用 — axios 用法1\ axios 基本特征axios (官网：https://github.com/axios/axios) 是一个基于 Pr...

2020-04-01 13:56:10 3783

原创针对不同版本的谷歌浏览器设置跨域问题

首先要确定 Chrome 的版本号1\ 打开 Chrome，点击地址栏右侧的设置按钮，选择帮助 - -> 关于Google Chrome，打开页面。2\ 即可看到 Chrome 的版本的信息。版本号是 49 之前的设置跨域一定是 Chrome 的快捷方式，点击右键 --> 属性，在目标一栏里加入 --disable-web-security （- - 前一定要有空格）...

2020-03-26 16:54:06 2214

转载关于工作

原文链接：https://juejin.im/post/5d3a6d9e51882570d50f5566初级大部分时间都在工作，那么如何合理的利用好 8 小时工作时间呢。熟悉业务不要仅仅埋头写代码，也需要对业务了解，认真参与需求评审环节，明确自己所做的任务。熟悉工作流程要熟悉从需求-开发-联调-测试-上线的每个工作环节，认真按照规范来执行，对上线要有敬畏心。提升效率...

2020-03-26 15:42:31 136

原创在 vue-cli 项目中使用 Element-UI 组件遇到的问题总结

Element-UI 中文官网问题总结1\ 使用日期时间选择器，控制当天之后的时间为禁止选中效果图代码实现<template> <el-date-picker v-model="dateVal" type="daterange" unlink-panels range-separator="至" start-placeholde...

2020-03-26 11:02:24 650

原创在 vue-cli 项目中使用 WebSocket 实时获取数据信息

WebSocket 入门教程方法一调用时只需调用 this.initWebSocket() 即可，this.websock 上绑定的其他方法都是自调用的methods: { initWebSocket() { this.websock = null; //判断当前浏览器是否支持WebSocket if ("WebSocket" in window) ...

2020-03-25 16:10:24 5054

原创在 vue-cli 项目中添加标签页图标 favicon

说明：本文所基于的项目目录结构如下方法一直接在 public --> index.html 中通过 link 标签添加<head>  <link rel="shortcut icon" type="favicon" href="./logo.png"> <...

2020-03-25 11:36:20 775

原创在 vue-cli 项目中通过 v-model 绑定 el-input 输入内容不渲染

通过 @input 事件发现可以拿到当前输入的值，所以应该是数据改变了但是视图没更新<el-input type="text" v-model="formData.reason" @input="change"></el-input><script>methods: { change() { this.$forceUpdate() // 强制...

2020-03-24 15:28:17 3093

原创在 vue-cli 项目中在前端导出 excel 表格数据

1\ 通过 post 接口请求methods: { excelExport() { let qinfo = { data: "" }; let url = "/ip"; // 接口地址 this.$axios .post(url, qinfo, { headers: { ...

2020-03-19 16:05:28 517

原创关于 Vue 中 vm.$nextTick、vm.$set 的使用和理解

vm 表示 new Vue 实例对象vm.$nextTickvue官网中关于 nextTick 的介绍：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。$nextTick() 返回一个 Promise 对象（自2.1.0），所以可以使用新的 ES2017 async/await 语法完成相同的事情。在实际开发项目中，有时需要基于更新后的...

2020-03-19 15:35:49 1684

原创在 vue-cli 项目中关于请求参数加密和响应数据解密，添加请求头信息方法的总结

基于 Base64 的加密解密安装依赖npm install --save js-base64在 main.js 中引入let Base64 = require("js-base64").Base64;使用在 main.js 中通过把方法挂载到 vue 原型对象 prototype 上，其中参数以对象的形式进行传输，加密两次，解密一次。// 加密Vue.protot...

2020-03-17 14:18:48 3215

原创 vue 的生命周期函数总结与使用

vue官网上的生命周期的方法，大致划分一下分为创建前/后，挂载前/后，更新前/后，销毁前/后这四个阶段。各个阶段的状态总结如下：beforeCreate：在beforeCreate生命周期执行时，data和methods中的数据还未初始化，所以此时不能使用data中的数据和methods中的方法create：data 和 methods初始化完毕，此时可以使用methods 中的方法和...

2020-03-17 09:52:16 732

原创使用高德地图做经纬度转换( 把GPS 转高德的经纬度 )

自定义经纬度转换function GPSchange(lngX, latY) { var gpsJson = new WGS84_to_GCJ02().transform( parseFloat(lngX), parseFloat(latY) ); return gpsJson;}高德自带new AMap.Ln...

2020-03-14 14:02:19 4955 1

原创在 vue-cli 项目中出现 http://ip:8080/sockjs-node/info?t=1556418283950 net:: ERR_CONNECTION_REFUSED 报错

network里一直在调用这个不存在的接口，所以导致一直报错。解决：1、node_modules/sockjs-client/dist/sockjs.js2、代码的1605行注释// self.xhr.send(payload);

2020-03-13 10:39:50 1085

原创在 vue-cli 项目中渲染表格使 thead 固定, tbody出现滚动条并优化

项目需求：1\ 支持日期选择下的查询，并使用表格展示数据2\ 当数据较多时，页面整体会因为高度超出，出现浏览器默认的滚动条，同时不好查看

2020-03-12 16:24:57 773

原创在 vue-cli 项目中使用 vue-awesome-swiper 实现轮播效果

1\ 安装npm install vue-awesome-swiper --save2\ 引入// 在main.js中全局引入import Vue from "vue";import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSw...

2020-03-12 15:00:55 350

原创项目中遇到的JS 基础知识小结

// 添加类名if (_this.$refs.tableTr.length > 0) { _this.$refs.tableTr.forEach(item => { item.classList.remove("cur"); }); _this.$refs.tableTr[i].classList.add("cur");}Typ...

2020-01-11 18:28:46 267

itBellah的博客