- 博客(137)
- 收藏
- 关注
RSS订阅原创 vue3搭建项目的两种方式@vue/cli和vite
vue3搭建项目有两种方式：vite和@vue/cli1、@vue/cli搭建方式见文章：https://blog.csdn.net/qq_40015826/article/details/89249086PS: 使用cli版本需要高于4.5.x//全局安装npm install -g @vue/cli# ORyarn global add @vue/cli//全局卸载npm uninstall -g vue-cli# ORyarn global remove vue-cli//升级
2022-04-02 14:44:12
3336
原创 vue-cli4配置标题title和图标favicon.ico
1、配置全局默认标题（1）首先，在index.html页面增加配置<title><%= htmlWebpackPlugin.options.title %></title>（2）vue.config.js文件配置module.exports = { //配置主路径 publicPath: '/web', chainWebpack: config => { //设置标题 默认不设置的话是项目名字 co
2021-12-27 10:26:20
1693
转载 ajax中的withCredentials使用效果
XMLHttpRequest.withCredentials 有什么用?跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)也可以简单的理解为，当前请求为跨域类型时是否在请求中协带cookie。XMLHttpRequest.withCredentials 怎么用?withCredentials属于XMLHttpRequest对象下的属性，可以对其进行查看或配置。查看withCredentials:var xhr = new XMLHttpRequest();xhr.ope
2021-12-16 20:12:12
646
转载 ajax、axios、fetch优缺点对比
1.jQuery ajaxAjax即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。用法：$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {}});本身虽然简单，但常常会涉及到一些问题：如
2021-12-10 14:53:33
477
转载 Fetch超时设置和终止请求
1.基本使用Fetch 是一个新的端获取资源的接口，用于替换笨重繁琐XMLHttpRequest.它有了Request 和 Response 以及Headers对象的概念，与后端语言请求资源更接近。一个简单的GET请求fetch('https://www.baidu.com') .then(resp=>resp.text()) // 转换成文本对象 .then(resp=>console.log(resp)) // 输出请求内容 .
2021-12-10 14:31:35
2444
原创 vue3.0使用ref获取dom元素
1、Vue 2.x获取DOM<div ref="myRef"></div>this.$refs.myRef2、Vue 3.0获取单个DOM<template> <div ref="myRef">获取单个DOM元素</div></template><script>import { ref, onMounted } from 'vue';export default { setup() {
2021-12-09 16:21:10
970
原创 VueRouter中query与params传参区别
在Vue中提供了两种方法来进行路由传参：query 和 params ，下面来看看它们两个的区别在哪里1、query语法：this.$router.push({path:"地址",query:{id:"123"}}); 这是传递参数this.$route.query.id； 这是接受参数2、params语法：this.$router.push({name:"地址",params:{id:"123"}}); 这是传递参数this.$route.params.id; 这是接受参数以上就是这
2021-12-01 16:56:56
713
转载 route与router当前与全局路由
vue-router中经常会操作的两个对象route和route和router两个。1、$route对象$route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。1.$route.path** 字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。2.$route.params** 一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。3.rout
2021-12-01 16:52:59
1069
转载 ES6-Array.from与Array.of
1、Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。（1）将类数组对象转换为真正数组：let arrayLike = { 0: 'tom', 1: '65', 2: '男', 3: ['jane','john','Mary'], 'length': 4}let arr = Array.from(arrayLike)console.log
2021-11-30 10:29:29
115
转载 vue3中watch与watchEffect区别
watch和watchEffect都是监听器，但在写法和使用上有所区别。watch在监听 ref 类型时和监听reactive类型时watch函数的写法不一样。1、watch在监听 ref 类型时，代码如下：<script>import {ref, watch} from 'vue'export default { setup() { const state = ref(0) watch(state, (newValue, oldValue)
2021-11-26 20:12:23
531
转载 vue3中toRaw使用
1、toRaw使用场景ref/reactive数据类型每次修改都会被追踪，都会更新UI界面，但是这样是非常消耗性能的，所以如果我们有一些操作不需要追踪，不需要更新UI界面，那么这个时候我们就可以通过toRaw方法拿到它的原始数据，对原始数据进行修改，这样就不会被追踪，这样就不会更新UI界面，这样性能就好了。reactive:<template> <p>{{state}}</p> <button @click="myFn">按钮点击<
2021-11-26 18:09:13
4345
原创 vue3中的shallowReactive
1、shallowReactive监听了第一层属性的值，一旦发生改变，则更新视图;其他层，虽然值发生了改变，但是视图不会进行更新<template> <h3>shadowReactive:</h3> <p class="state1">{{state}}</p> <button class="btn1" @click="change1">change1</button> <button
2021-11-26 17:19:23
1181
转载 vue3中ref与toRef的区别
1、ref是复制,视图会更新如果利用ref将某一个对象中的某一个属性值变成响应式数据我们修改响应式数据是不会影响原始数据的;同时视图会更新。ref就是复制 复制是不会影响原始数据的<template> <div> <div> <div>{{stateObj}}</div> <button @click="func1">按钮</button> </div> &
2021-11-25 20:24:15
865
原创 如何运行单个.vue文件
1、全局安装vuecnpm install -g @vue/cli2、查看vue版本vue -V //version--4.5.153、全局安装下面的扩展cnpm install -g @vue/cli-service-global4、在 .vue 文件所在的目录下运行vue serve About.vue发现报错，提示错误信息如下：5、使用全局命令安装@vue/compiler-sfccnpm install -g @vue/compiler-sfc接着运行v
2021-11-24 20:55:31
5681
1
原创 vue中父组件调用子组件方法
父组件调用子组件方法，使用ref获取，代码如下：//父组件<template> <div class="home"> <HelloWorld ref="mychild"></HelloWorld> <div @click="clickParent">click me</div> </div></template><script> import HelloWorld
2021-11-24 11:32:20
288
转载 Object.is()
ES5 比较两个值是否相等，只有两个运算符：相等运算符（两个“=”）和严格相等运算符（三个“=”）。它们都有缺点：前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。JavaScript 缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等。ES6 提出“Same-value equality”**（同值相等）**算法，用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。Object.is('fo
2021-11-16 19:45:21
221
原创 js几种继承的方式
一、为什么要有JS继承假如每一个实例对象，都要有自己的属性和方法的副本。这不仅无法做到数据共享，也是极大的资源浪费。（这就和我们现实中会继承父母的资产一样，你是可以选择不继承的，但是浪费钱啊）二、JS继承的三种方式1.原型继承//构建一个父类 function Person(name) { this.name = name } //父类原型对象上添加一个函数sayHi Person.prototype.sayHi = function () {
2021-11-02 15:02:02
73
原创 js关于instanceof
1、js中的instanceof运算符instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上2、语法obj instanceof Object; //Object的构造函数是否存在于obj的原型链上3、描述instanceof 运算符用来检测 constructor.prototype 是否存在于参数 obj 的原型链上。4、实例（1）instanceof的普通的用法，obj instanceof Object 检测Obj
2021-11-02 11:50:10
461
原创 js中new一个对象的过程
介绍new一个对象的过程，示例代码如下：function ClassA(){ this.name = "123"}var p = new ClassA();1、 创建空对象； var obj = {};2、 设置新对象obj的constructor属性为构造函数的名称，设置新对象obj的__proto__属性指向构造函数的prototype对象； obj.proto = ClassA.prototype;3、 使用新对象调用函数，函数中的this被指向新实例对象： ClassA.
2021-11-02 10:36:07
4371
转载 html5 fetch API 的原理
1、说明fetch是基于原生的XMLHttpRequest对象来实现数据请求的。同时，fetch也是基于Promise实现链式调用的。那么，实现fetch的本质：就是实现ajax的封装以及Promise的实现。2、ajax的封装在原生的api中，XMLHttpRequest对象是封装ajax的核心。其最简单的封装步骤如下：function ajax(url,suc,fail) { var xhr = new XMLHttpRequest(); xhr.open('GET',url,
2021-10-29 17:47:38
336
原创 根据webpack的版本安装不同版本的css-loader、style-loader
webpack是前端常见的模块打包工具，但是webpack只能用来处理js代码及其间的依赖。而前端除了js外还有很多文件，包括css、图片等等，这些文件的打包需要webpack的扩展来实现，这个扩展就是loader。遇到了这样一个问题，webpack安装的版本为3.12.0，使用命令进行全局安装：cnpm indtall [email protected] -g 同时要在js文件中引入css文件的话，需要安装css-loader和style-loader对应的依赖，执行以下命令安装cnpm instal
2021-10-21 17:59:14
6017
2
原创 http、https、tcp三次握手
HTTP，HTTPS和TCP介绍：HTTP（超文本传输协议是一种发布和接收 HTML 页面的方法，被用于在 Web 浏览器和网站服务器之间传递信息。是用于www浏览的一个协议。HTTPS（超文本传输安全协议） = HTTP + SSL/TSL(安全层)，HTTPS 经由 HTTP 进行通信，但利用 SSL/TLS 来加密数据包。HTTPS 开发的主要目的，是提供对网站服务器的身份认证，保护交换数据的隐私与完整性。TCP（传输控制协议）：是机器之间建立连接用的到的一个协议。HTTP本身是一个协议，一般
2021-10-19 14:26:23
1635
原创 2021-10-15
今天下载了mysql（版本:mysql-8.0.26-winx64）来使用，在修改root密码时总是提示语法错误第一种方法：mysql> set password for root@localhost = password('123');具体报错信息如下（提示语法错误）：第二种方法：mysql>alter user 'root'@'localhost' identified by '123';在尝试了许多种修改密码的方式后还是会提示语法错误，，，，，，，经过不断的尝试，终于找
2021-10-18 16:44:03
38
转载 Vue slot-scope
鉴于还是有不少的同学搜到这篇文章，而这篇文章又是笔者早期写的，现在回过头来看发现有太多的不足，为避免误人子弟，重新撰写了一篇Vue slot 详解 ，有需要的同学可以去浏览一下。 百度上已经有很多的关于slot-scope的文章，但我感觉都是那些以前没学好，又回头学的人，他们都使用了.Vue文件，我觉得有点不适合初学者，所以我...
2021-08-19 10:39:52
599
原创 nvm安装及配置（vite+vue3构建项目报错 zlib_1.brotliCompressSync is not a function）
nvm安装及环境配置1、背景说明使用vite+vue3构建前端项目的时候，必须要求node版本
2021-08-03 11:27:25
696
原创 Eslint 超简单入门教程
Eslint 超简单入门教程目标学习完本教程希望对下面这个 .eslintrc.js 文件能够做到心里有数。// .eslintrc.js module.exports = { "extends": "airbnb", "rules": { "semi": [2, "never"], "no-console": 0, "comma-dangle": [2, "always-multiline"], "max-len": 0, "react/jsx-fi
2021-07-28 17:24:26
701
原创 BFC的原理
一、常见定位方案在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:普通流 (normal flow)在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。浮动 (float)在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽
2021-02-04 18:17:20
117
原创 css清除浮动的几种方法
清除浮动的几种方法标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒 子高度为0。（浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开）。为什么要清除浮动呢？清除浮动的本质是什么？ 清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。清除浮动的方法：1. 额外标签法：给谁清除浮动，就在其后额..
2021-02-04 16:42:05
118
转载 {*zoom:1；}作用
{*zoom:1;}作用 zoom:1的常见作用： zoom是IE专用属性，firefox等是不支持的。它的本来作用是设置或检索对象的缩放比例，但这作用几乎用不到。 可以让网页实现IE7中的放大缩小功能。比如你想让你的网页缩小为原来的一半，那么就在body中加入style="zoom:0.5" 设置zoom:1可以在IE6下清除浮动、解决margin导致的重叠等问题。 通常，当浮动子元素导致父元素塌陷的时候，只要给父元素加上overflow: hidden;来解决，但是..
2021-02-04 11:33:11
2368
转载 js中同步和异步的理解
你应该知道，javascript语言是一门“单线程”的语言，不像java语言，类继承Thread再来个thread.start就可以开辟一个线程，所以，javascript就像一条流水线，仅仅是一条流水线而已，要么加工，要么包装，不能同时进行多个任务和流程。那么这里说的同步和异步到底是什么呢？如果你真的不懂，我希望你认真读完这篇文章。其实我个人觉得js官方的文档在使用两个词的时候并不准确，包括...
2019-06-14 20:08:41
289
转载 Javascript是单线程，浏览器非单线程
为什么JavaScript是单线程的却能让ajax异步发送和回调请求，还有setTimeout也看起来像是多线程的？还有non-blocking IO, event loop等概念很不清楚。Javascript是单线程的因为JS运行在浏览器中，是单线程的，每个window一个JS线程，既然是单线程的，在某个特定的时刻只有特定的代码能够被执行，并阻塞其它的代码。而浏览器是事件驱动的（Event ...
2019-06-14 20:04:39
666
原创 axios发送请求，全局处理异常
之前用ajax的时候，jquery中的ajax处理全局异常，通过设置ajaxSetup方法：$.ajaxSetup({ headers: {'Authorization': header}, //添加请求头 complete:function(xhr,data){ //执行完success或者error方法后均要执行这个complete函数，可以用来捕获...
2019-05-30 20:25:59
2400
1
原创 js屏蔽掉调试时写的console.log
这属于代码级别的修改，重写console.log(），下面贴代码，有详细的注释： <script> var Debugger = function () { }; //开关，是否显示输出 Debugger.switch = true; Debugge...
2019-05-10 20:12:08
2665
转载 js中的运算符&&和||
js中的逻辑判断符号&& || 用处很大1、基本用法if(a&&b){ //code...}如果a成立并且b也成立，则执行后面的代码if(a||b){ //code...}如果a或者b成立，则执行后面的代码2、&& ||也可以用来设置函数执行顺序先来看几个例子function a() { ...
2019-05-10 20:04:12
592
原创 layui结合json viewer实现代码格式化
需要实现这个一个功能，就是查看详细的json代码，最好是实现json代码的折叠与展示功能，在页面弹出层用到了layui中的layer组件，在组件中展示的内容就是json格式的代码,实例如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit...
2019-05-09 17:38:15
6344
1
转载 前后端分离与不分离有哪些区别
前后端不分离概念在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。前后端分离概念前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果。至于前端用户看到什么效果，从后端请求的数据展现都是后端通过异步接口(AJAX/JSONP)的方式...
2019-04-24 19:39:57
2105
原创 git上传文件出错[rejected] master -> master (fetch first) error: failed to push some refs to
在使用github上传代码到远程仓库时，执行以下命令之后：git add . //把所有文件添加到暂存区git commit -m "" //将文件提交到暂存区里面的master分支git remote add origin [email protected]:2233616114/learn.git //与远程仓库建立连接git push -u origin master //提交...
2019-04-03 17:32:33
2239
转载 nodejs环境配置express-generator安装
1. nodejs是为服务端的javascript提供运行环境，相当于运行java的jvm。 node.js下载：https://nodejs.org/en/download/ windows 安装版：x64 .msi 下载后 ，进行默认安装，默认安装目录...
2019-04-02 17:01:11
1038
原创 jQuery绑定事件的几种方式
jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。这几种方式之间的区别：1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；2.bind()函数在jquery1.7版本以前比较受推崇，1.7版...
2019-03-22 11:37:02
2975
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人