自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(76)
  • 收藏
  • 关注

原创 vue大坑:v-for的key以及props传参不当导致的闭包

* 为什么props传参在模版中使用没问题,在函数中使用不变化使用传参的方式,就是在调用函数的时候把参数传递进去,避免的闭包。当我们点击上方的月份时,会改变下方加载的卡片信息。* 重新规划v-for的key值。

2023-04-13 20:25:38 620 1

原创 速懂cookie,session,token

注意:cookie可以是web服务器添加的,原理就是在我们进行某一个请求的时候,如果这个请求携带了一些控制cookie的字段,那么就会使得我们浏览器设置了cookie。提供的一种能力,可以在每次发起请求前,带上cookie里面的内容(一些key,value值),当A服务器压力过大,我们的请求被分配到了B服务器,那么B服务器算识别不到我们的。也是一种解决http无状态的方式,是存储了我们用户状态等信息的字符串。在我们第一次发起登录请求的时候,服务器返回给我们一个。的时候,如果我们在A服务器有我们。

2023-03-08 18:14:37 469

原创 monorepo+pnpm单一代码库

简而言之就是把多项目变为一个项目优势:可以抽取更多的公共代码,提高复用率统一工作流程,统一项目规范,只需要搭建一套脚手架,就能管理多个项目快速接入,新项目一行命令就能快速接入apps项目1componentsindex.htmlmain.tsx项目2项目3项目14assets。

2023-03-01 18:46:07 329

原创 whistle+SwitchyOmega配置代理解决白名单跨越

whistle主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应,也可以作为HTTP代理服务器。w2 startw2 stop当我们启动whistle过后,可以访问whistle的控制界面配置代理:在whistle控制界面,我们可以配置我们需要的代理规则,当走到了我们配置代理到上作用:当我们访问的时候,其实是访问的内部的但是发起请求的时候,服务器会认为是发起的,后面会通过这个解决一个跨越是一个chrome浏览器的插件,可以用于配置proxy。

2023-02-23 12:33:58 752

原创 路由跳转同一个界面,但是params不同。页面不刷新?(路由的key)

如果不设置路由的key值,默认情况下是根据路径判断的,就是不包括params值。Home组件内容(父),并且跳转路由到子组件。

2023-01-04 15:51:45 1182

原创 关于小程序编译和真机调试图片能加载出来,但是预览和发布的时候加载不出来的问题

微信小程序图片加载不出来大坑

2022-06-02 17:52:44 596

原创 vantUI弹出框和微信小程序的究极大坑

用小程序开发工具编译完组件后的组件地址: miniprogram(这是根)/miniprogram_npm/@vant/weapp/这下面是全部组件的子目录了 容易犯错的地方: 应该用的文件夹: miniprogram_npm 正确的,这下面其实没有dist目录 node_modules 错误的,这是没用npm构建前的组件目录,没试过删了有没有影响 容易跳坑的地方有2: 1,用了node_modules这个目录下的东西,这下面确实有dist目录所以看官方文档时容易导致选这个这个目录下的东西,但这个是没有用n

2022-06-02 16:48:18 1830

原创 微信小程序-事件传参踩坑【有点坑】

引入在平常写vue项目等等的时候,正常情况都是可以直接绑定事件并且传递参数的 <button @click='m("msg")'> 点我触发事件 <button>m(val){ console.log(val)}坑小程序在小程序中不能边绑定事件边传递参数下面要报错,因为小程序不能!!!<button bindtap='m("msg")'> 点我触发事件 <button>m:function(val){ console.log(v

2022-05-24 20:02:50 421

原创 Promise详解

介绍一.表达1. promise是ES的一门新技术2. 是js中异步编程的新解决方案二.具体1. 从语法上来说:promise是一个构造函数2. 从功能上来说:promise对象用来封装一个异步操作并可以获取成功/失败的结果值异步编程* fs 文件操作* 数据库操作* AJAX请求* 定时传统的解决异步编程都是通过回调函数解决的promise 的状态指的是实例对象中的一个属性【promiseState】* pending 未决定的* resolved / fullfille

2022-05-13 22:02:45 448

原创 微信小程序-真机调试大坑【预览没问题,真机出错】

文章目录真机调试版本大坑解决方法真机调试版本大坑默认使用的真机调试是最新2.0版本,但是当我们使用了promise后,会在控制台报错:Uncaught (in promise) FrameworkError expected not same然后页面加载不出来,空白页面解决方法预览是没有问题的,问题出在真机调试的版本上面把版本号切换为1.0旧版本真机调试就正常了...

2022-05-11 17:48:44 1549

原创 微信小程序-开发究极大坑,调试基础库版本问题,第一次请求成功,后面失败,json字符串解释错误

云开发第一次请求成功,后面失败,报错为json解析错误

2022-05-11 11:04:06 2789

原创 微信小程序-云开发踩坑:errCode: -601031

注意如果报errCode: -601031假如代码没有任何错误,但是报了这个错误,一定一定一定要注意,AppID和环境IDAppID和环境ID一定要一致,意思是必须是同一个账号,不能是我的AppID去使用别人的环境ID,就算设置了管理员权限也不行...

2022-05-09 23:12:07 262

原创 nextTick(),关于Echarts无法通过表格下拉展示出来的问题

文章目录this.$nextTick():将回调延迟到下次DOM更新循环之后执行理由!!解决方案:this.$nextTick():将回调延迟到下次DOM更新循环之后执行在我们使用Echarts的时候,首先要准备一个容器,有了容器我们才能将它渲染出来倘若我们要设计一个表格,然后有一个下拉框,点击下拉框的时候展示出我们的echarts【同理,不仅仅是下拉框,后面vue才添加的元素都算】这种效果如果直接在vue函数中实现的话,代码如下:html代码js代码然而这样会有一个错误,echar

2022-04-11 11:00:08 780

原创 深度选择器/deep/,关于elementui样式修改不了的问题完美解决

深度选择器/deep/在vue-elementui写项目时,时常elementui的效果不理想,但是又没办法直接修改elementui的样式因为我们无法通过普通的选择器获取到我们要更改的标签【elementui自己加了一层】,通常的解决办法是在全局css中,寻找到我们要更改标签的class【elementui自定义的class】,但是这样的话,会影响到所有对应的标签,例如:我更改了el-input__inner的字体颜色,那么所有使用到的el-input颜色都会对应改变,这显然是不合理的在此引出

2022-04-11 10:41:05 4806 1

原创 vue3-快速上手(对比vue2)

对比vue2,来快快速上手vue3

2022-04-08 12:49:44 712

原创 vue-项目完成的项目报告

文章目录项目优化1.生成打包报告2.通过vue.config.js修改webpack的默认配置项目优化1.生成打包报告第一种方法:命令行【不推荐】vue-cli-service bulid --report第二种方式:vue的可视化UI面板直接查看在ui面板中查看打包的项目,并且进行优化2.通过vue.config.js修改webpack的默认配置通过vue-cli 3.0工具生成的项目,默认是隐藏了webpack配置项的,目的是为了让工作中心放在业务逻辑上面然后配置webpa

2022-03-26 17:34:59 2840

原创 微信小程序-快速上手

文章目录一.开发小程序的文件结构二.页面文件结构结构三.数据一.开发小程序的文件结构这5个文件是必备的核心文件,对比Vue的项目结构.wxml对比就是.html.wxss对比就是.css.json文件是配置文件,其中主要有两个重要的配置,page:相当于路由window:更改小程序的外观细节 二.页面文件结构结构一般情况下,把我们所写好的页面存放到一个文件夹里面【page】每一个页面对比vue,就相当于是一个组件每一个页面,都包含4个基础文件(.js .wxss .w

2022-03-21 15:40:26 752

原创 WebPack-快速上手

文章目录一:安装webpack二.基本使用一:安装webpack首先要有nodejs执行npm i webpack -gnpm i webpack-cli -g安装webpack -cil可以让我们再命令行使用webpack命令--gobal:全局安装,让我们在任何目录都可以使用但是不推荐在全局安装webpack,不然你的所有项目webpack都是你全局的版本了,但是可能其他项目的webpack版本不一致,所以推荐局部安装npm i webpack webpack-cli -d3.

2022-03-18 18:09:13 874

原创 vue组件-路由

文章目录零.什么是路由一.基本使用二.注意点多级路由三.路由命名:简化跳转四.query传递参数五.params传递参数六.缓存路由组件七.路由的声明周期钩子八.路由器工作模式【hash和history】九.打包项目npm run build零.什么是路由每一组key-value对应关系,就是一个路由route路由器router,用于管理多个路由用于实现单页面应用vue的一个插件库数据通过ajax请求获取一.基本使用1.安装:npm i vue-router2.使用插件:Vue.us

2021-11-05 17:00:40 485

原创 vue组件-Vuex

文章目录零.什么是Vuex一.如何使用Vuex1. 安装vuex:2. 引入Vuex3. 使用插件4. 创建store文件5.引入store配置6.基本使用二.mapState等4个map用法1.为什么要用map方法2.mapState:2.mapGetters:3.mapActions:4.mapMutations:零.什么是Vuex专门在 Vue中集中式状态(数据)管理Vue的插件多个组件可以共享并且操作Vuex里面的数据一.如何使用Vuex1. 安装vuex:npm i vuex

2021-11-05 16:37:00 246 1

原创 vue组件-插槽

文章目录什么是插槽默认插槽具名插槽作用域插槽:字组件可以向父组件传递数据什么是插槽在子组件的一对<slot>标签,存放父组件写入组件标签的东西当在组件标签里面写内容的时候,这些内容显示在组件的插槽处倘若写了<slot>插槽,但是没有放东西,就会显示插槽里面的内容默认插槽父组件中 <students> <div>xxx</div> </students>字组件中 <template>

2021-11-05 16:07:39 180

原创 vue组件-全局事件总线||消息订阅与发布

文章目录开始子组件通过props函数给父组件传递数据全局事件总线添加方法:使用方法消息订阅与发布开始当我们父给子组件传递东西的时候,可以直接通过props配置项传递但是子给父传递东西该怎么传递?子组件通过props函数给父组件传递数据我们可以由父组件通过props传递一个函数给子组件子组件通过函数的参数给父组件数据但是倘若父级的层级关系太多的时候,这样就显得不太合理了全局事件总线我们通过给所有vm和vc都看得到的地方,添加一个对象,这个对象专门用于给vm,vc通过函数参数的方式传

2021-10-28 21:34:15 95

原创 vue组件-props配置项

功能:让组件能接收外部传入的数据传输数据<School name="xxx" age="xxx" />接收数据先配置全新配置项props第一种: 简单接收 props:['name','age']第二种:限制类型 props:{ name:String age:number }第三种:全能限制 props{ name{ type:String ,

2021-10-28 21:18:25 215

原创 vue组件-ref属性;install插件;mixin混入

什么是ref属性是vue组件标签的唯一标识【相当于id】并且可以通过ref属性,来访问组件标签中的vuecomponent实例对象用法打标识: <shool ref="yyy"> xxx </shool>使用:this.$refs.yyy特点由于我们可以访问到组件的实例对象,使用我们可以通过ref属性,让父元素访问到子元素的内容什么是vue插件可以增强vue的一个(js等)文件这个文件里面是一个对象,对象里面有一个install方法,install方

2021-10-28 21:13:44 192

原创 vue-单文件组件基本使用

模块化就是把一个很大的东西,拆分成一些小的东西vue组件就是把一个大的html文件,拆成了一些小的vue文件这个vue文件里面,包括了html,js,css当要去使用者组件的时候,就需要暴露这些组件【export】,然后引入【import】vue-cil脚手架由于浏览器不认识.vue文件,就需要我们搭建vue脚手架vue脚手架给我们配置好了基本上所有东西,我们直接在里面写项目就可以了单文件组件格式temlate标签里面的内容,必须有一个根标签写入的组件必须要暴露【不然等于

2021-10-28 21:02:11 789

原创 vue-非单文件组件【了解】

文章目录介绍vue中使用组件的三大步骤:一. 如何创建组件【定义组件】二. 如何注册组件三.使用组件例子介绍vue中使用组件的三大步骤:创建组件注册组件使用组件【写组件标签】一. 如何创建组件【定义组件】使用Vue.extend({xxx}),其中的xxx跟new Vue{(xxx)}基本一致局别:不能写el的挂载,因为组件最终都要归顺于vm管理,其中的el挂载对象看vm中的data必须写成函数式、返回对象数据,因为在组件被多个vm使用时,防止数据改变而全部改变的问题注意使用te

2021-10-28 20:49:36 56

原创 vue-生命周期

文章目录什么是生命周期生命周期函数生命周期图什么是生命周期又名:生命回调函数,生命周期函数,生命周期钩子理解:Vue在某一个时刻帮助我们调用一些特殊名称的函数【例如mounted】注意:这些特殊函数的名称不能变,程序员只能改变里面的内容生命周期函数中,this的指向调成了vm 或 组件实例对象生命周期函数一. vm分为4对生命周期(创建,挂载,更新,销毁)创建:创建数据监视,数据代理【注意不是创建vm,vm早就已经创建了】将要创建:beforeCreate()函数

2021-10-28 20:45:25 71

原创 vue-监听属性watch

监视属性:1.使用方法:新添加一个配置项watch在watch配置项里面,创建一个对象(这个对象计算我们要监听属性的名字)在对象里面添加方法:handler(a,b),当属性改变时,这个方法就会被调用(有两个返回值,new和old)2.其他配置属性:深度监视(下面例子详解)deep:true可以监视对象里边的属性立即执行一次immediate:true3.例子 <div> 今天的温度:<span>{{wenDu}}</s

2021-10-28 20:38:07 119

原创 vue-计算属性computed

计算属性:定义:要用的属性不存在,通过已有的属性计算得来(已有的属性:必须是在vue内部的)原理:底层使用了Object.defineproperty方法提供的getter和setterget函数什么时候执行(1)初次读取的时候会执行一次(2)当依赖的数据改变的时候执行一次,并且在此调用(3)get还会自动的把this的指向改变为vm优势:与methods实现相比,内部有缓存机制(复用),效率更高注意:(1)计算属性的结果最终出现在vm上,直接使用即可(2)如果计算

2021-10-28 20:32:21 98

原创 vue-监视的原理

文章目录vue是怎样监视数据改变的(原理):**vue监听的特点(好处):**vue监听的注意事项(坏处):1.监听对象2.监听数组vue是怎样监视数据改变的(原理):就是把我们代码中写的data,通过一定的转换,成为vm中的vm_data这个转换就是,给每个元素新增加了get,set方法其中set方法,还有重新加载的功能(响应式),就是一旦被调用了set(元素被改变),就重新加载页面vue监听的特点(好处):1. 他可以层层深入的,找到每个对象中里面所有对象,进行处理(set),就是对象里

2021-10-17 21:00:35 115

原创 Vue-for指令中,key的重要性

文章目录先看下面一段简单的代码(v-for中没有设置key值)效果图然后我们再点击这个按钮的效果原因:先看下面一段简单的代码(v-for中没有设置key值) <input type="button" value="点我添加人员(无key)" @click.once="add1"> <ol> <li v-for="(p,index) in arry"> {{p.name}}<input type="text"> &l

2021-10-17 20:53:06 63

原创 MVVM模型-vue

文章目录什么是MVVM模型vue中是怎么去体现MVVM模型的关于VM中那些可以出现在V中什么是MVVM模型M:model(模型):数据V:view(视图):模板代码VM:视图模型:Vue实例可以看到的就是“V”看不到的数据就是“M”其中间处理他们两个的就是“VM”vue中是怎么去体现MVVM模型的V:在《body》标签的代码中,写出来的就是VM:在vue内部data里面的数据就是MVM:new Vue这个Vue就是VM,可以通过vue来使得M和V产生关系关于VM中那些可以出

2021-09-15 21:07:07 58

原创 Vue-事件绑定on

使用方法v-on:事件=”方法名“@事件=“方法名”【跟上面是一样的,只是上面的简写】传递参数1.@事件=“方法名(参数1,参数2)”2. 对应的方法:方法名:function(参数1,参数2){ alert("你是"+参数2+参数1) }限定事件1.@事件.限制条件=“方法名”例如: @keyup.enter="ke"...

2021-09-14 14:02:23 164

原创 Vue-数据同步v-model

作用v-model可以使表单内容和vue数据变量同步,相关联使用方法1.v-model=“变量名”例如<input type="text" v-model="message"> message:"我可以改变"那么我input里面的内容就是message的内容,并且当我改变input里面的数据时,message也会随之改变...

2021-09-14 13:55:33 401

原创 Vue-循环指令v-for

作用可以循环打印数组用法1.v-for: ( 变量名 ,索引名) in 数组名例如:v-for:(a,index) in array【那么它就会循环执行,a与index就是数组的每一个元素和索引】2.v-for: 变量名 in 数组名例如:v-for:a in array效果1.在列表标签中,它就会自动添加列表例如:<ul> <li v-for="(a,index) in arr">{{index+1+":"+a}}</li>

2021-09-14 13:47:13 718

原创 Vue-做一个网页

网页的成果图,和讲解在b站这个链接里https://www.bilibili.com/video/BV1KM4y1G7Zk?share_medium=android&share_plat=android&share_session_id=118a759a-e227-44d1-a58c-44e8c21c6829&share_source=QQ&share_tag=s_i&timestamp=1631099611&unique_k=xYxOgX一些展示图片,有

2021-09-08 19:35:57 2318

原创 Vue-更改属性(v-bind),显示切换(v-show和v-if)

Vue显示切换显示切换有两种指令v-show:‘bool’v-if:‘bool’他们的区别是:v-show的实质是改变了元素的diplay属性,只是隐藏了元素,元素本身并没有在代码中消失v-if的实质是吧元素从dom中删除,直接没有了这个元素,使用我们看不见它了在平常使用的过程中,频繁切换显示的话就用v-showv-show和v-if用法在进行是否隐藏和显示的时候,主要看的就是里面的值是否为true或者false那么我们可以有多种方法进行判断真假v-show:“ag

2021-09-03 13:45:08 2925

原创 Vue-入门(运行第一个vue,el挂载点,data数据对象)

什么是VueVue是一个js的框架简化了我们DOM操作具有响应式数据驱动Vue如何的使用首先要导入vue框架<script src="../kj/vue.js"></script>//这里我的vue在kj/vue.js里面在script标签中创建new Vue({…}})el挂载点1.el用来设置vue管理元素的2.vue会管理el选中的元素及其内部元素3.推荐使用id选择器,也可以用其他选择器4.只能作用于双标签【但html和body标

2021-09-02 12:03:17 115

原创 Jquery-on绑定事件和动态事件

文章目录Jquery-on绑定事件on可以绑定多个事件on倘若多个事件的效果相同Jquery-on绑定事件on可以绑定多个事件在传统的绑定事件中,只能绑定一个事件,例如:$(" div ") . click ( function(){…} )用on可以绑定多个事件,例如:$("div") . on( { click:function(){ ... }, mouseleave:function(){ ... }, mouseenter:function(){

2021-08-31 21:56:06 442

原创 Jquery-事件对象

1.什么是事件对象?2.事件对象中常用的3个坐标3.阻止事件冒泡和时间行为4.获取用户按下的键盘

2021-08-31 19:09:46 184

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除