- 博客(40)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 Vue-router的安装使用详细讲解
特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path的路径写法配置,必须使用name配置!跳转
2022-09-21 17:14:37
1461
原创 【Vuex】Vuex搭建及多组件共享
利用vuex自带的{mapState,mapGetters,mapMutations,mapActions}来方便快捷的生成代码.vuex4版本只支持vue3.0,所以在vue2.0中使用,需要npm i vuex@3 指定版本。首先在需要的组件文件中引入。
2022-09-16 11:23:02
361
原创 组件-组件间通信的几种情况
父子组件的传值有多种方法, 兄弟组件的通信也有自己的写法一种组件间的通信方式,适用于: 子组件传递给父组件使用场景: A是父组件,B是子组件,B给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中).绑定自定义事件:第一种方式,在父组件中: 或 第二种方式,在父组件中:触发自定义事件:解绑自定义事件:或清空所有组件上也可以绑定原生DOM事件,需要使用native修饰符注意:通过绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题!!!.....
2022-06-09 16:36:19
196
原创 添加鼠标右键 “使用vscode打开“
鼠标右击文件或者文件夹，可直接用VSCode打开，非常方便。但如果我们在安装VSCode的时候没有勾选这些选项，那就享受不到这个便捷的功能了，那么怎么办呢？
2022-06-05 16:40:17
576
原创 【JS】中 reduce() 的用法
一、语法arr.reduce(function(prev,cur,index,arr){…}, init);其中，arr 表示原数组；prev 表示上一次调用回调时的返回值，或者初始值 init;cur 表示当前正在处理的数组元素；index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；init 表示初始值。乍一看感觉很复杂，但是没关系，这只是看起来而已，其实常用的参数只有两个：prev 和 cur。二、实例先提供一个原始数组：let ar
2022-05-16 10:09:20
202
原创 【Git】OpenSSL SSL_read: Connection was aborted, errno 10053
OpenSSL SSL_read: Connection was aborted, errno 10053报错解决办法1、Git默认限制推送的大小，运行命令更改限制大小即可 增加缓冲 git config --global http.postBuffer 524288000 2、更改网络认证设置 git config --global http.sslVerify "false"...
2022-05-12 20:53:08
5339
转载 Javascript 同步,异步:微任务和宏任务
1.javascript是单线程的语言javascript是一门单线程执行的编程语言。也就是说，同一时间只能做一件事情。如下：如果有多个任务要执行，执行其他任务时，其他任务都要进行等待1.1 单线程执行任务队列的问题如果前一个任务非常耗时，则后续的任务不得不一直等待，从而导致程序假死的问题。2.同步任务和异步任务为了防止某个耗时任务导致程序假死的问题，javascript把待执行的任务分为了两类。同步任务又叫做 非耗时任务，指的是在主线程上排队执行的那些任务只有前一个任务执行完毕，才能
2022-05-10 16:09:13
1725
7
原创 【Vue】监测数据改变的原理
Vue监视数据的原理：Vue会监视data中所有层次的数据。如何监测对象中的数据？通过setter实现监视，且要在 new Vue时就传入要监测的数据。（1）对象中后追加的属性，Vue默认不做响应式处理。（2）如需给后追加的属性做响应式，请使用如下API：Vue.set(target,propertyName/index,value) 或vm.$set(target,propertyName/index,value)例如:Vue.set(this.student,'sex','
2022-04-29 15:04:17
215
原创 【Vue2.xx】绑定class和样式
Vue中的绑定1．class样式写法：class=“xxx” xxx可以是字符串、对象、数组。字符串写法适用于：类名不确定，要动态获取。对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。2．style样式:style="{fontSize：xxx}"其中xxx是动态值。注意:font-size要用驼峰命名法:style="[a,b]"其中a、b是样式对象。3.代码案例Html
2022-04-26 09:45:58
494
原创 【Vue2.xx】侦听(监视)watch属性
侦听(监视)watch属性案例天气小案例小技巧事件绑定可以写较为简单的函数，但是使用的必须是Vue实例所包含的数据或函数。<body> <div id="root"> <!--也可以用三元表达式--> <h2>今天天气很{{info}}</h2> <!--只能用vm里有的方法,仅限于做的事情很简单--> <!--<button @click="
2022-04-25 19:25:21
349
原创 【Vue3.xx】基础讲解
Vue3基础1. Vue3的介绍Vue设计的初衷就包括可以被渐进式地采用 ，所以Vue3支持2中的大部分特性 (迁移指南)。Vue3新增特性:性能虚拟DOM的重写打包大小减少( tree shaking)初次渲染快内存使用减少(compositionAPI)新增语法(compositionAPI)ref和reactivecomputed和watch新的生命周期函数自定义函数-Hooks函数(像React Hooks)…其它
2022-04-20 16:15:51
662
原创 【Vue】使用vue-cli与路由的基本使用
基础-vue-cli 工具-介绍介绍: vue-cli是一个辅助开发工具=> 代码编译 + 样式 + 语法校验 + 输出设置 + 其他 …作用: 可以为开发者提供一个**标准的项目开发结构** 和配置 开发者不需要再关注其他vue-cli 一个**命令行工具,最新版本也支持图形化**操作,可快速搭建大型网页应用基础-vue-cli-安装**说明:**vue-cli本质上是一个npm包,也需要通过npm去安装下载npm i -g @vue/cli // 全局安装脚手架 默认安
2022-04-14 16:52:22
207
原创 【Vue】路由的原理与基本用法
基础-组件-组件和模块的区别模块：侧重于功能或者数据的封装组件：包含了 template、style 和 script，而它的 script 可以由各种模块组成基础-单页应用(简称SPA)传统模式 每个页面及其内容都需要从服务器一次次请求 如果网络差, 体验则会感觉很慢SPA模式, **第一次**加载 会将所有的资源都请求到页面 **模块之间切换**不会再请求服务器SPA优点：用户体验好,因为前端操作几乎感受不到网络的延迟完全组件化开发 ,由于只有一个页面,所以原来属于一个
2022-04-14 09:36:40
67
原创 【Vue】组件的入门
基础-组件-组件体验场景: 重复的页面结构,数据,逻辑 都可以抽提成一个组件特点 简单 高效 不重复基础-组件-组件特点组件和实例相似之处: data/methods/computed/watch 等一应俱全注意：data和Vue实例的区别为组件中data为一个函数且需要返回一个对象组件没有el选项template 代表其**页面结构** (有且只要一个根元素)每个组件都是**独立**的 运行作用域、数据、逻辑没有任何关联基础-组件-全局组件全局和局部: 注册
2022-04-13 19:30:53
94
原创 【Vue】axios发送网络请求
在Vue中实现发送网络请求原理: Vue.js中发送网络请求本质还是ajax，我们可以使用插件方便操作。vue-resource: Vue.js的插件，已经不维护，不推荐使用axios :不是vue的插件，可以在任何地方使用，推荐说明: 既可以在浏览器端又可以在**node.js**中使用的发送http请求的库，支持Promise ，不支持jsonp如果遇到jsonp请求, 可以使用插件 jsonp 实现基础-axios-介绍-及基本使用用法:// 基本用法axios.get(
2022-04-13 16:23:56
806
原创 【Vue】进阶语法
基础-系统指令-v-bind基本用法作用: 绑定标签上的任何属性场景: 当标签上的属性是变量/动态/需要改变的用法:// ID为数据对象中的变量值 <p v-bind:id="ID"></p> // 简写<p :id="ID"></p> 基础-系统指令-v-bind绑定class(对象)用法: 绑定class对象语法 :class=“{ class名称: 布尔值}”<p class="obox" :class="{
2022-04-13 10:03:33
76
原创 【Vue】基础语法
Vue基础基础-了解什么是vue目前前端**必备**技能传统方式已经不能适应目前越来越**复杂**的开发需求用vue的开发方式会简单、高效三大框架(vue、react、angular)基础-vue 能做什么不用操作DOM单页面应用web项目(SinglePageApplication 项目，例如https://worktile.com/）简称:SPA传统网站开发 一般来说 需求不大当下各种新框架都采用了类似Vue或者类似React的语法去作为主语法, 微信小程
2022-04-11 10:48:03
85
原创 【Js】JavaScript作用域
JavaScript作用域1. 什么是作用域作用域是代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的生命周期和可见性。变量在作用域之外是不可见的。JavaScript 的作用域包括：全局作用域模块作用域函数作用域块作用域词法作用域2. 全局作用域在任何函数、块或模块范围之外定义的变量具有全局作用域。具有全局作用域的变量可以在程序的任意位置访问。创建全局作用域，这里分两种情况来说:一种是在具有模块系统的情况
2022-04-08 08:56:18
146
原创 移动端适配
移动端适配媒体查询rem01. 媒体查询作用：感受到屏幕的变化；可以根据屏幕不同的宽，从而获得不同的样式，然后实现不同的样式显示；1. CSS3 新语法，是一个查询屏幕的过程，通过查询当前屏幕尺寸属于哪个范围，从而有哪个范围的样式生效；2. 感受屏幕变化，屏幕变化就是宽度的变化，通过预设置，当屏幕到了我已经预设置的变化的范围，就会把我提前设置好的样式进行生效；语法:CSS样式：/*mediatype 查询类型:-----------------all 所有设备
2022-04-07 20:00:19
61
原创 【移动端】Flex+vw进行布局
移动端页面demo1. 项目介绍项目共包含三个页面首页设备页我的 每个页面都有一个公共的底部Tab，由于我们还没有讲到Vue和路由，所以这里不做成SPA(单页应用)，而是把footer放到每一个页面中。这是一个移动端项目，为了适应移动端设备，需要首先自适应的布局，布局方式，主要使用了flex弹性盒和vw作为单位。项目开发分为两个阶段，第一阶段，实现页面布局，第二阶段，通过jQuery的ajax，请求数据，然后使用art-template模板引擎渲染。2. 页面布局实现2.1单
2022-04-07 19:56:22
1001
原创 【布局】flex布局
flex布局01. flex的介绍对比:传统布局：兼容性好、布局繁琐、浮动（清除浮动）有局限性不能在移动端很好的布局flex布局：操作方便，布局极其简单，移动端使用比较广泛PC端浏览器支持情况比较差使用：如果是PC端页面布局，采用传统方式；如果是移动端或者是不考虑兼容的PC端则采用flex布局；特点：任何一个标签都可以指定使用 flex 布局。当为父标签设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属
2022-04-07 19:44:31
500
原创 【Js】JavaScript数据类型隐式转换
类型相同基本类型，直接比较值引用类型比较指针类型不同，尝试转成number类型，先调用valueOf()转成number不行就再用toString()方法转成stringnull、NaN、undefined单独一套规则。
2022-04-07 19:34:05
10530
3
原创 【Js】异步编程
异步编程Promise Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。基本用法:ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。const promise = new Promise(function(resolve, reject) { // resolve(value); 成功 // reject(er
2022-04-07 19:23:28
59
原创 【Js】数组(包括es6)方法大集合
文章目录数组方法（包括es6）1、arr.push()2、arr.pop()3、arr.shift()4、arr.unshift()5、arr.splice(i,n)6、arr.slice(start,end)7、arr.concat()8、arr.join()9、arr.sort()10、arr.reverse()11、arr.forEach(callback)12、arr.map(callback)13、arr.filter(callback)14、arr.every(callback)15、arr.s
2022-04-07 19:20:57
3128
3
原创 【布局】 Grid网格布局
Grid布局CSS Grid 网格布局介绍CSS Grid 布局是 Web 的第一个真正的布局系统。它的目的是将内容组织成行列的形式，最终使开发人员能高度控制我们眼前屏幕上页面的显示效果。CSS Grid 布局不仅仅可以使复杂的布局和精美的排版成为可能，而且还可以使其变的干净利落可维护。基础知识和浏览器支持 截至2022年3月，大部分浏览器都提供了对 CSS Grid 的原生支持，而且无需加浏览器前缀：Chrome（包括 Android ），Firefox，Edge，Safari（包括iOS）和
2022-04-07 14:36:52
1651
原创 前端跨域解决方案
跨域解决方案1. 什么是跨域1.1 什么是同源策略？同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AKi42U2z-1649311382172)(img/ky.png)]1.2 同源策略限制内容有:Cookie、LocalStorage、IndexedDB
2022-04-07 14:04:45
67
原创 【Js】ES6模块化 Module使用
① 概述历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import。但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。在 ES6 之前，社区制定了一些模块加载方案：最主要的有 CommonJS 和 AMD 两种。前者用于服务器node.js，后者用
2022-04-07 14:00:10
1129
原创 【Webpack】进阶
核心打包原理打包工作的主要流程如下：需要读到入口文件里的内容分析入口文件，递归的去读取模块所依赖的文件内容，生成AST语法树根据AST语法树，生成浏览器能够运行的最终代码具体细节:获取主模块内容分析模块内容安装@babel/parser包（转AST）对模块内容处理安装@babel/traverse包（遍历AST）安装@babel/core和@babel/preset-env包（Es6转Es5）递归所有模块生成最终代码手写loaderloader本质上就是一个
2022-04-07 13:55:59
745
原创 【Webpack】入门基础资料
Webpack资料介绍 webpack是一个前端构建工具。 前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说，开发环境的代码是为了更好的阅读，而运行环境的代码则是为了能够更快地执行。因此开发环境和运行环境的代码形式也不相同。比如，开发环境的代码，要通过混淆压缩后才能放在线上运行，这样代码体积更小，而且对代码执行也不会有任何影响。一般需要构建工具处理的几种情况：前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说，开发环境的代码是为了更好的阅读，而运行环境的代码则是为了能够更快
2022-04-06 19:01:18
89
原创 npm常用命令
npm set registry https://registry.npm.taobao.org # 替换npm模块为淘宝镜像npm set disturl https://npm.taobao.org/dist # node-gyp 编译依赖的node源码镜像npm cache clean --force # 清空缓存npm install -g cnpm --registry=https://registry.npm.taobao.org #安装淘宝镜像 之后就可以使用cnpm安装npm lis
2022-04-06 15:42:31
2563
3
原创 webpack打包错误:webpack-cli configuration.output has an unknown property
Webpack：webpack有一个插件，可以实现同时打包/(复制)index.html到达dist目录，并自动就引入所需要的.js文件，我们要做到的事情就是直接运行打包好的模板文件即可.问题描述明明没有报出语法错误却无法运行：在 webpack.config.js 中配置 html-webpack-plugin 插件const HtmlWebpackPlugin = require("html-webpack-plugin"); const path = require("path")
2022-04-05 20:41:10
1840
转载 【Js】JavaScript中的多维数组与对象
基本的数组结构一维数组var Province =new Array('江苏','浙江','安徽'); 或者var Province = ['江苏','浙江','安徽'];多维数组二维数组var Province=new Array();Province[0]=new Array();Province[0][0]="南京";Province[0][1]="苏州";Province[1]=new Array();Province[1][0]="杭州";Province[1][1]="
2022-03-21 19:53:55
552
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人