![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 84
小婵婵不怕鬼
努力学好前端
展开
-
vue3学习(1)vite、创建vue3项目的两种方式、vue2响应式和vue3响应式的区别、computed、watch、wacthEffect、生命、hooks函数、toRef
将对象类型转换响应式数据,其他基本数据类型仍然使用ref,它接收了该对象之后返回的是一个proxy代理对象,通过代理对象操作源对象内部数据进行操作,并且reactive定义的响应式数据是深层次的。让数据变成响应式数据,需要将数据用ref()包裹,让数据变成引用实现对象,这里利用的是get、set实现,所以在更改数据的值时需要利用.value。vue2的配置项可以拿到vue3的setup内的数据和方法,但是vue3的setup不能拿到vue2的数据和方法,如果两者重名vue3优先,所以不建议混合使用。原创 2023-07-24 14:13:19 · 332 阅读 · 0 评论 -
Uncaught (in promise) value error的错误
就是传参传错了,数据类型错误,后端想要的是JSON类型的参数,所以这时候需要引入axios的一个库qs,引入之后将数据转换成json格式之后再传。根据请求头的设置来判断解决方法。原创 2023-03-08 17:23:12 · 260 阅读 · 0 评论 -
将拿到数据配合element-ui进行分页器展示
上方的this.allData的长度就是这个分页器需要展示的所有的数据及pageTatol。这里的this.tableData就是当前页数真正需要展示的数据,但这些代码是拿到数据初次渲染时需要写的,接下来需要写页码改变时的函数。从服务器拿到了数据,需要将数据进行分类展示,首先根据条件提取到了每一分类的所有数据,将这个数据放进一个data里的空数组。接下来就是截取总数据中某一页需要展示的数据,这里用的是数组的slice方法。拿到当前页码,不需要再发请求,只需要再剪切一遍总的数据即可。原创 2023-03-07 15:13:06 · 320 阅读 · 0 评论 -
Vue项目后台部分5,ECharts,Home首页的制作,权限管理的菜单权限的相关逻辑
将所有路由进行分组,常量路由(任何角色都可以访问的菜单),异步路由(需要管理员分配的菜单),任意路由(不确定会出现,当满足条件时才出,如404)。使用数组的filiter方法过滤出异步路由的路由名与服务器返回数组内一样的字符串,此时返回true,得到了新的数组,然后将新的数组与常量路由和任意路由利用concat方法拼接成最终路由。当登录时,向服务器发送登录用户的信息,服务器会返回一个数组routes,数组由该用户需要访问的路由名称字符串组成。grid中的left,top,right,bottom都设为0。原创 2022-09-17 02:25:56 · 636 阅读 · 1 评论 -
Vue项目后台部分4,分类管理以及详情管理,添加和修改,loading效果,窗体弹出
全局组件三级联动以及它的自定义事件1、静态2、接口3、发请求获取数据并保存4、完成分页器1、三个模块的切换展示2、静态3、接口4、修改分类发送请求获取数据5、点击保存按钮时6、展示数据、收集数据删除分类1、接口2、动态3、发请求1、当跳转至性情实例页面时,就立即获取详情数据2、数据展示和收集数据3、点击保存或取消按钮(1)接口(2)取消添加时,利用自定义事件,父组件通知子组件切换场景,并且清除数据(3)整理收集的数据(4)发请求,成功之后切换场景1、接口2、给按钮绑定原创 2022-09-16 02:09:10 · 840 阅读 · 0 评论 -
Vue学习记录9,路由基本使用,多级路由,路由的query和params参数,命名路由,路由的props配置,replace属性,编程式路由导航,缓存路由组件,路由守卫,路由器的两种工作模式
一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!作用:让不展示的路由组件保持挂载,不被销毁。前端路由:key是路径,value是组件。 作用:让路由组件更方便的收到参数。分类:全局守卫、独享守卫、组件内守卫。配置路由,声明接收params参数。实现路由跳转,让路由跳转更加灵活。作用:可以简化路由的跳转。作用:对路由进行权限控制。...原创 2022-08-08 17:08:17 · 125 阅读 · 0 评论 -
Vue学习记录8,vue脚手架配置代理的两种方式,Github搜索案例,vue-resource,三种插槽,Vuex及搭建Vuex环境,getter和四个map方法的使用, 模块化+命名空间
在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于。概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。对话的方法,即:包含。对话的方法,即:包含。..原创 2022-08-06 02:26:00 · 167 阅读 · 0 评论 -
Vue学习记录7,全局事件总线(GlobalEventBus),TodoList案例_事件总线,消息订阅与发布(pubsub),TodoList案例_编辑,nextTick,Vue封装的过度与动画
接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的。作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的。一种组件间通信的方式,适用于。一种组件间通信的方式,适用于。回调留在A组件自身。回调留在A组件自身。,且每个元素都要指定。...原创 2022-08-04 23:30:03 · 139 阅读 · 0 评论 -
Vue学习记录6,TodoList案例(版本一),webStorage,TodoList的本地存储,组件的自定义事件的绑定和解绑,TodoList使用组件的自定义事件
ListHeader.vueTodoList.vueTodoItem.vueListFooter.vue备注:安装nanoid:用于生成独一无二的id1、组件化编码流程:(1)拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。(2)实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:2、props适用于:(1).父组件 ==> 子组件 通信(2).子组件 ==> 父组件 通信(要求父先给子一个函数)3、使用v-model时要切记:v-model绑定原创 2022-08-03 01:44:00 · 208 阅读 · 0 评论 -
Vue学习记录5,单文件组件,配置Vue脚手架,分析并使用脚手架,render函数,脚手架的默认配置,ref属性,props配置,mixin(混入),插件,scoped样式
正因为vue.runtime.xxx.js没有模板解析器,所以不能使用template这个配置项,需要使用render函数接收到的createElement函数去指定具体内容。备注props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。本质包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。...原创 2022-08-01 23:25:43 · 155 阅读 · 0 评论 -
Vue学习记录4,生命周期及图解,常用的生命周期钩子,关于销毁Vue实例,Vue中使用组件的三大步骤及其注意点和案例,组件的嵌套及其案例,VueComponent的this指向及其内置关系
使用创建,其中options和时传入的那个options几乎一样,但也有点区别;区别如下1.el不要写,为什么?最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。2.data必须写成函数,为什么?避免组件被复用时,数据存在引用关系。备注使用template可以配置组件结构。......原创 2022-07-31 23:48:02 · 147 阅读 · 0 评论 -
Vue学习记录3,Vue监视数据的原理及案例,收集表单数据和v-model的三个修饰符及其案例,过滤器及其案例,内置指令,自定义指令及完成两个需求的自定义指令案例
1、vue会监视data中所有层次的数据。2、如何监测对象中的数据?通过setter实现监视,且要在new Vue时就传入要监测的数据。(1).对象中后追加的属性,Vue默认不做响应式处理(2).如需给后添加的属性做响应式,请使用如下API:3、如何监测数组中的数据?通过包裹数组更新元素的方法实现,本质就是做了两件事:(1)调用原生对应的方法对数组进行更新。(2)重新解析模板,进而更新页面。4、在Vue修改数组中的某个元素一定要用如下方法:(1)使用这些API:、、、、、、reverse原创 2022-07-31 01:06:44 · 270 阅读 · 0 评论 -
Vue学习记录2,计算属性实现姓名案例,监视属性实现天气案例,深度监视,绑定class和style样式, 条件渲染,列表渲染, key作用与原理,列表过滤(模糊查询),列表排序
2、所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm或组件实例对象。(2)如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。(2)旧虚拟DOM中未找到与新虚拟DOM相同的key,创建新的真实DOM,随后渲染到到页面。1、所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象。(key的内部原理)......原创 2022-07-28 23:15:56 · 240 阅读 · 0 评论 -
Vue学习记录1,Vue是什么?搭建开发者工具,关闭生产提示, Vue实例配置,模板语法,数据绑定,el的写法,data的写法,MVVM模型,数据代理, 事件处理,Vue中的事件修饰符,键盘事件
1、修饰符可以连续写< button @click . stop . prevent = "showInfo" > 你好 < / button >2、如果先让两个键同时按下才触发,键名也可以连续绑定。原创 2022-07-27 23:13:23 · 575 阅读 · 5 评论