章小絮
这个作者很懒,什么都没留下…
展开
-
vue3的响应式原理
Vue 会在“next tick”更新周期中缓冲所有状态的修改,以确保不管你进行了多少次状态修改,每个组件都只会被更新一次。当你在 Vue 中更改响应式状态时,最终的 DOM 更新并不是同步生效的,而是由 Vue 将它们缓存在一个队列中,直到下一个“tick”才一起执行。2.不能替换整个对象:由于 Vue 的响应式跟踪是通过属性访问实现的,因此我们必须始终保持对响应式对象的相同引用。Ref 可以持有任何类型的值,包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构,比如 Map。原创 2024-07-15 15:27:33 · 231 阅读 · 0 评论 -
vue3中的props和emit
首先我们要明确props和emit是在父子组件(嵌套组件)中使用的。想要在父组件中渲染出子组件里的内容,需要在父组件中导入子组件,并在模板中渲染子组件。那父子组件中如何通信呢?就需要使用到props和emit。原创 2024-07-15 14:21:54 · 256 阅读 · 0 评论 -
大事件管理系统(vue3)compositionAPI/pinia/pinia持久化处理/Element Plus/pnpm包管理器/Eslint+prettier/husky(Git hooks)
在线演示:https://fe-bigevent-web.itheima.net/login接口文档: https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835接口根路径: http://big-event-vue-api-t.itheima.net本项目的技术栈 本项目技术栈基于 ES6、vue3、pinia、vue-router 、vite 、axios 和 element-plus一些优势原创 2024-05-22 16:43:10 · 1147 阅读 · 0 评论 -
vue3状态管理之Pinia
Pinia 是 Vue 的专属的最新状态管理库 ,是 Vuex 状态管理工具的替代品。原创 2024-05-18 11:30:51 · 400 阅读 · 1 评论 -
Vue3新特性之组合式API/setup选项/ref和reactive/computed/watch/生命周期函数/父子通信/模版引用/provide和inject
父传子父传子的过程中通过什么方式接收props?defineProps( { 属性名:类型 } )setup语法糖中如何使用父组件传过来的数据?const props = defineProps( { 属性名:类型 } )props.xxx子传父子传父的过程中通过什么方式得到emit方法?defineEmits( [‘事件名称’] )怎么触发事件emit(‘自定义事件名’, 参数)原创 2024-05-18 10:22:54 · 877 阅读 · 0 评论 -
移动端智慧商城项目(vue2)之组件库vant/移动端vw适配/request封装/storage封装/api请求封装/请求响应拦截器/嵌套路由配置/路由导航守卫/路由跳转传参vuex分模块管理数据
接口文档:https://apifox.com/apidoc/shared-12ab6b18-adc2-444c-ad11-0e60f5693f66/doc-2221080演示地址:http://cba.itlike.com/public/mweb/#/目标:查看项目效果,明确功能模块 → 完整的电商购物流程1.安装脚手架 (已安装)2.创建项目选项手动选择功能选择vue的版本是否使用history模式选择css预处理选择eslint的风格 (eslint 代码规范的检验工具,检验代码原创 2024-05-14 19:55:21 · 845 阅读 · 0 评论 -
vue2(7)之vuex使用/state状态//mutations修改数据/getters/模块化module/获取模块内的数据state&getters与方法
目标:明确Vuex是什么,应用场景以及优势state: {count: 0},// 定义mutations})getters: {// getters函数的第一个参数是 state// 必须要有返回值,返回值就是getters的值// }原创 2024-05-06 17:47:33 · 1335 阅读 · 0 评论 -
vue2(6)之声明式导航router-link类名&传参/路由重定向/路由两种模式hash&history/编程式导航路径跳转&传参/案例面经基础版/vueCli自定义创建项目/eslint
router-link的两个高亮类名 太长了,我们希望能定制怎么办声明式导航跳转时, 有几种方式传值给路由页面?查询参数传参(多个参数)动态路由传参(一个参数,优雅简洁)keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件中。在组件切换过程中把切换出去的组件保留在内存中防止重复渲染DOMApp.vue原创 2024-05-06 12:54:05 · 662 阅读 · 1 评论 -
vue2(5)之自定义指令v-focus&v-color&v-loading/默认插槽/具名插槽/作用域插槽/路由vueRouter基础使用/路由的封装与抽离
这都是Vue给咱们内置的一些指令,可以直接使用自定义指令:同时Vue也支持让开发者,自己注册一些指令。这些指令被称为自定义指令每个指令都有自己各自独立的功能概念:自己定义的指令,可以封装一些DOM操作,扩展额外的功能全局注册// // 1. 全局注册指令// inserted 会在 指令所在的元素,被插入到页面中时触发// el 就是指令所绑定的元素el.focus()})局部注册//在Vue组件的配置项中"指令名": {// 可以对 el 标签,扩展额外功能el.focus()原创 2024-05-04 23:44:27 · 936 阅读 · 0 评论 -
vue2(4)之scoped解决样式冲突/组件通信/非父子通信/ref和$refs/异步更新/.sync/事件总线/provide和inject
style的默认样式是作用到哪里的?scoped的作用是什么?style中推不推荐加scoped?data写成函数的目的是什么?组件通信,就是指组件与组件之间的数据传递组件的数据是独立的,无法直接访问其他组件的数据。想使用其他组件的数据,就需要组件通信组件关系分类有哪两种父子组件通信的流程是什么?父向子子向父组件上 注册的一些 自定义属性1.非父子组件传值借助什么?2.什么是事件总线3.发送方应该调用事件总线的哪个方法4.接收方应该调用事件总线的哪个方法。原创 2024-05-02 22:40:30 · 823 阅读 · 0 评论 -
vue2(3)之vue生命周期钩子/工程化开发脚手架/组件化开发/组件的局部注册和全局注册
Vue CLI 是Vue官方提供的一个全局命令工具可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】虽然脚手架中的文件有很多,目前咱们只需认识三个文件即可main.js 入口文件App.vue App根组件index.html 模板文件整个应用最上层的组件,包裹所有普通小组件App组件包含哪三部分?1.全局注册组件应该在哪个文件中注册以及语法是什么?① 局部注册:(1) 创建.vue组件 (单文件组件)原创 2024-05-02 11:58:18 · 689 阅读 · 0 评论 -
vue2(2)之watch 侦听器/computed 计算属性/指令修饰符 / v-bind对于样式操作的增强 / v-model应用于其他表单元素
所谓指令修饰符就是通过指明一些指令后缀 ,不同的后缀封装了不同的处理操作 —> 简化代码代码演示:3.v-model修饰符 ——去除首位空格-——转数字4.事件修饰符 ——阻止冒泡——阻止默认行为——可以连用 即阻止事件冒泡也阻止默认行为三、v-bind对样式控制的增强-操作class为了方便开发者进行样式控制, Vue 扩展了 v-bind 的语法,可以针对 class 类名 和 style 行内样式 进行控制 。2.对象语法当class动态绑定的是对象时,键就是类原创 2024-04-27 17:10:04 · 1059 阅读 · 0 评论 -
vue2(1)之Vue 概念 / 创建实例 / 插值表达式 / 响应式特性 /vue8个重要指令(内容/条件/列表渲染,事件/属性/双向绑定)
概念:Vue (是一套 **构建用户界面 ** 的渐进式框架基于数据渲染出用户可以看到的界面所谓渐进式就是循序渐进,不一定非得把Vue中的所有API都学完才能开发Vue,可以学一点开发一点所谓框架:就是一套完整的解决方案举个栗子如果把一个完整的项目比喻为一个装修好的房子,那么框架就是一个毛坯房。我们只需要在“毛坯房”的基础上,增加功能代码即可。提到框架,不得不提一下库。库,类似工具箱,是一堆方法的集合,比如 axios、lodash、echarts等。原创 2024-04-26 16:17:00 · 889 阅读 · 0 评论