Sheng6666的博客

原创 合并数组对象中相同的属性值

面试题中往往会遇到这样的笔试题，将以下数组对象合并相同值var arr = [{ "name": "语文", "fraction": 80 }, { "name": "数学", "fraction": 70 }, { "name": "语文", "fraction"

原创 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...

原创 vuex结合composition Api

1.使用state里面的数据2.执行mutation方法3.使用getters方法4.执行actions方法

原创 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，分开两个不同的模块，两个模块的方法和定义不要重复，不然会同时触发获取模块里的数据...

原创 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...

原创 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中路由跳转...

原创 vue3.x集成Typescript与组合式API一起使用

1.引入需要的api,然后定义接口，传入的参数是字符串或者是数字等其他类型2.使用setup实现接口的第一张写法3.使用方法并传入参数4.使用setup实现接口的第二种方法5.第三种实现接口的方法6.使用ref实现接口7.计算属性的写法...

原创 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双向数据绑定，子组件如果改变数据，父组件也会发生改变...

原创 vue3.x Composition API computed

1. setup中computed计算属性2.setup中readonly '深层' 的只读代理,会使原本响应式数据变成非响应式数据3.setup中watchEffect,无论数据会不会改变，都会触发一次4.setup中的watch监听，只有数据发生变化，才会触发...

原创 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...

原创 Vue3.x 使用teleport 可以将模板内容移动到组件之外的DOM中

原创 Vue3.x中的Mixin实现组件功能的复用，全局配置Mixin

1.在src下新建一个新的Mixin目录，在里面新建一个js文件，并将其暴露出去2.在需要的组件中引用并使用mixin3.引用后可以直接使用其变量和方法4.注意点：如果组件里的变量或函数名字和mixin里面定义的相同，会采用组件里的变量或函数5.全局配置Mixin，在main.js中全局配置后，在组件内就不用引用，直接使用即可...

原创 this.$nextTick的作用，仅在渲染整个视图之后运行的代码

如果改变一个值，而视图没有发生变化，可以使用this.$nextTick根据上面的函数，打印出的获取的innerHtml的结果

原创 点击tabs切换不同的内容

1.通过v-for遍历posts,然后渲染数据2.定义currentTabs变量3.运用computed计算属性4.点击按钮时，切换下边的内容5.点击切换tabs时，高亮当前tabs4.将切换tabs的文件封装成组件，可以使用keep-alive进行缓存数据5.使用keep-alive触发的生命周期函数...

原创 Vue3.x的生命周期函数

与Vue2.x唯一不同的是beforeDestroy变成beforeUnmount,destroyed变成unmounted

原创 使用jsonp函数防抖实现搜索

1.输入框v-model数据双向绑定2.在data中定义变量3.一开始就清除定时器，然后再设置定时器请求接口达到防抖功能var api=链接+this.keyword4.输入框为空时，清空list数组

原创 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...

原创 封装并全局使用localStorage

1.在models目录下新建storage.js 文件2.在storage.js中封装好get,set,remove方法，然后暴露出去3.在main.js文件中全局引用封装好的storage方法4.在需要的文件中使用storage方法

原创 Vue3全局引用使用axios

1.安装npm install axios --save或者yarn add axios或者cnpm install axios --save2.全局引用3.使用全局axios请求接口