- 博客(19)
- 收藏
- 关注
原创 合并数组对象中相同的属性值
面试题中往往会遇到这样的笔试题,将以下数组对象合并相同值var arr = [{ "name": "语文", "fraction": 80 }, { "name": "数学", "fraction": 70 }, { "name": "语文", "fraction"
2022-03-01 15:10:37
1410
原创 vuex搭配typescript
1.将store.js改成store.ts2.在typescript官方文档,copy代码3.复制到store.ts文件中将createStore和store合并4.在interface中声明state中的变量的类型5.mutation里面也要定义类型6.在组件内使用vuex7.如果有警告信息,可以安装vue 3插件8.在组件内也需要定义类型9.运用mutations方法10.getters11.actio...
2021-12-20 13:36:15
573
原创 vuex结合composition Api
1.使用state里面的数据2.执行mutation方法3.使用getters方法4.执行actions方法
2021-12-20 11:08:10
210
原创 vuex中的 getters actions modules
1.在vuex目录下的store.js中使用getters方法2.在组件内使用this.$store.getters.reverseMsg方法使用mapState方法3.如果改变state里面的数据,会触发getters,相当于计算属性4.actions 执行mutations里面的方法,异步操作5.触发actions里面的方法或者6.modules,分开两个不同的模块,两个模块的方法和定义不要重复,不然会同时触发获取模块里的数据...
2021-12-17 11:39:35
259
原创 vuex中的state和mutation
1.安装依赖包 npm install vuex@next --save 或者 yarn add vuex@next --save2.src目录下面新建一个vuex的文件夹,vuex文件夹里面新建一个store.js3.定义数据并暴露出去4.全局挂载vuex5.在组件内使用vuex定义的数据 this.$store.state.count或者可以直接在template模板中直接调用 {{$store.state.count}}6.在v...
2021-12-16 11:25:17
1078
原创 vue3.x 中的路由基本配置
1.安装路由模块 npm install vue-router@next --save2.新建home.vue /news.vue/user.vue等组件3.新建routes.ts文件,引入组件配置文件并将其暴露出去4.在main.ts中引入并挂载路由5.在app.vue中使用router-view动态挂载路由6.使用npm run serve运行代码,在浏览器中手动输入不同地址动态挂载不同的组件7.在app.vue中路由跳转...
2021-12-15 10:20:41
1096
原创 vue3.x集成Typescript与组合式API一起使用
1.引入需要的api,然后定义接口,传入的参数是字符串或者是数字等其他类型2.使用setup实现接口的第一张写法3.使用方法并传入参数4.使用setup实现接口的第二种方法5.第三种实现接口的方法6.使用ref实现接口7.计算属性的写法...
2021-12-15 09:53:33
891
原创 vue3.x 通过provide inject实现组件之间的传值
1.非组合式api1.1 在app.vue文件中通过provide定义变量1.2 在需要的组件中通过inject接收数据1.3 如果在父组件改变数据,子组件不会改变2.通过组合式api2.1父组件使用setup来定义数据2.2子组件也要通过setup接收数据2.3父组件改变数据,子组件也会发生改变2.4父组件也可以传递对象2.5 通过v-model双向数据绑定,子组件如果改变数据,父组件也会发生改变...
2021-12-13 15:04:46
684
原创 vue3.x Composition API computed
1. setup中computed计算属性2.setup中readonly '深层' 的只读代理,会使原本响应式数据变成非响应式数据3.setup中watchEffect,无论数据会不会改变,都会触发一次4.setup中的watch监听,只有数据发生变化,才会触发...
2021-12-13 14:32:01
244
原创 Vue3.x Composition API setup ref reactive toRefs 详解
1.要引入需要的的API,注意vue时小写的vue,不要写成Vue2.setup类似于data可以定义变量,但是同时可以定义方法function3.ref定义响应式数据,可以定义字符串,number,Boolean,数组,reactive也是定义响应式数据,可以定义数组。4.如果需要在模板中使用,setup中定义的变量和方法,需要将其return出去5.在模板中使用setup中定义的变量6.setup中也可以定义方法,同时也需要return出去,在模板中使用与vu...
2021-12-09 10:23:19
208
原创 Vue3.x中的Mixin实现组件功能的复用,全局配置Mixin
1.在src下新建一个新的Mixin目录,在里面新建一个js文件,并将其暴露出去2.在需要的组件中引用并使用mixin3.引用后可以直接使用其变量和方法4.注意点:如果组件里的变量或函数名字和mixin里面定义的相同,会采用组件里的变量或函数5.全局配置Mixin,在main.js中全局配置后,在组件内就不用引用,直接使用即可...
2021-12-08 14:20:38
395
原创 this.$nextTick的作用,仅在渲染整个视图之后运行的代码
如果改变一个值,而视图没有发生变化,可以使用this.$nextTick根据上面的函数,打印出的获取的innerHtml的结果
2021-12-08 13:56:26
306
原创 点击tabs切换不同的内容
1.通过v-for遍历posts,然后渲染数据2.定义currentTabs变量3.运用computed计算属性4.点击按钮时,切换下边的内容5.点击切换tabs时,高亮当前tabs4.将切换tabs的文件封装成组件,可以使用keep-alive进行缓存数据5.使用keep-alive触发的生命周期函数...
2021-12-08 11:53:52
800
原创 Vue3.x的生命周期函数
与Vue2.x唯一不同的是beforeDestroy变成beforeUnmount,destroyed变成unmounted
2021-12-08 11:17:24
434
原创 使用jsonp函数防抖实现搜索
1.输入框v-model数据双向绑定2.在data中定义变量3.一开始就清除定时器,然后再设置定时器请求接口达到防抖功能var api=链接+this.keyword4.输入框为空时,清空list数组
2021-12-08 11:08:03
171
原创 Vue3.x中使用fetch-jsonp请求jsonp接口
axios不支持jsonp请求,如果我们要用jsonp来请求数据可以使用fetch-jsonp这个模块1.安装fetch-jsonpnpm install fetch-jsonp --save2.在main.js中全局引用3.在文件中使用4.要注意this的指向,function改成箭头函数 或者可以 var that=this...
2021-12-08 10:41:56
2544
原创 封装并全局使用localStorage
1.在models目录下新建storage.js 文件2.在storage.js中封装好get,set,remove方法,然后暴露出去3.在main.js文件中全局引用封装好的storage方法4.在需要的文件中使用storage方法
2021-12-08 10:13:06
282
原创 Vue3全局引用使用axios
1.安装npm install axios --save或者yarn add axios或者cnpm install axios --save2.全局引用3.使用全局axios请求接口
2021-12-08 10:02:15
452
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人