Vue学习
文章平均质量分 92
笔记
缘友一世
我是缘友一世博主,热爱技术、热衷于分享。我的博客专注于计算机科学和软件开发领域的学习和实践经验。在博客中,你可以找到各种编程语言的深入解析和实用技巧。我致力帮助读者更好地理解和应用技术。同时,我也关注技术行业的发展趋势和前沿研究。感谢您的关注和支持!部分文章内容辅助使用gpt等人工智能编辑,如果出现错误之处,请指正
展开
-
vue重修之Vuex【下部】
类别直接使用模式借助辅助方法使用state$store.state.模块名.数据项名…mapState(‘模块名’, [‘数据项’]) 或 …mapState(‘模块名’, { 新的名字: 原来的名字 })getters$store.getters[‘模块名/属性名’]…mapGetters(‘模块名’, [‘属性名’]) 或 …mapGetters(‘模块名’, { 新的名字: 原来的名字 })mutations$store.commit(‘模块名/方法名’, 其他参数)原创 2023-10-26 22:16:43 · 403 阅读 · 0 评论 -
vue重修之Vuex【上部】
uex 是一个用于 Vue.js 的状态管理库【状态就是数据】。简言之,Vuex 是一个插件,可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。使用场景优势共同维护一份数据,数据集中化管理响应式变化操作简洁关于Vuex中state、getters、mutations和actions的使用总结:StateGettersMutationsActions用途存储应用程序的数据从state中派生出计算属性修改state中的数据执行异步操作、调用多个mutations。原创 2023-10-25 10:35:49 · 160 阅读 · 0 评论 -
vue重修之自定义项目、ESLint和代码规范修复
安装脚手架 (已安装)创建项目选项?> Manually select features 选自定义手动选择功能选择vue的版本是否使用history模式选择css预处理选择eslint的风格 (eslint 代码规范的检验工具,检验代码是否符合规范)选择校验的时机 (直接回车)选择配置文件的生成方式 (直接回车)是否保存预设,下次直接使用?=> 不保存,输入 N启动项目npm run serve。原创 2023-10-23 23:08:03 · 1182 阅读 · 0 评论 -
vue重修之路由【下】
方式适用场景优点示例查询参数传参传递多个参数时较为方便灵活,可以传递多个参数易于构建和理解URL不限于特定路由配置3. 适用于非动态路由情况动态路由传参传递单个参数时优雅简洁清晰明了,路由中直接体现参数1. 配置:path: “/path/:param”易于维护和理解路由结构利于定义必要参数的路由更有助于RESTful路由设计4. 适用于资源标识和特定路由参数的传递查询参数传参在需要传递多个参数或者不依赖路由结构时更为灵活。原创 2023-10-23 09:38:12 · 170 阅读 · 0 评论 -
vue重修之路由【上】
路径 和 组件的映射关系在Vue中,使用Vue Router来管理路由,Vue Router会根据路由配置将不同的URL地址映射到对应的组件上,从而实现页面的按需加载。Vue Router的路由配置包括路由路径和组件,路由路径指定了访问该路由对应的URL地址,组件则指定了该路由对应的组件。当用户访问该路由的URL地址时,Vue Router会动态加载该路由对应的组件并在页面中呈现,从而实现页面的按需加载和组件化开发。原创 2023-10-22 00:00:56 · 288 阅读 · 0 评论 -
使用nginx方向代理部署Vue项目刷新页面404的问题解决
使用nginx方向代理部署Vue项目刷新页面404的问题解决原创 2023-10-21 23:11:27 · 2060 阅读 · 0 评论 -
vue重修【005】自定义路由、插槽
这都是Vue给咱们内置的一些指令,可以直接使用自定义指令:同时Vue也支持让开发者,自己注册一些指令。这些指令被称为自定义指令。原创 2023-10-17 11:48:19 · 182 阅读 · 0 评论 -
vue重修004【下部】
创建一个都能访问的事件总线 (空Vue实例)B组件(发送方),触发Bus的$emit事件。,这样才能让函数内部的this指向Vue实例。A组件(接受方),监听Bus的 $on事件。$nextTick 内的函数体 一定是。2.子/孙组件 inject获取数据。需求:编辑标题, 编辑框自动聚焦。原创 2023-10-07 08:58:22 · 128 阅读 · 0 评论 -
vue重修004上部
版权声明组件的三大组成部分scoped解决样式冲突scoped原理2.代码演示组件data函数说明演示组件通信组件关系分类通信解决方案父子通信流程子向父通信代props详解props校验props&data、单向数据流小黑记事本(组件版)基础组件结构需求和实现思路完整代码App.vueTodoHeader.vueTodoBody.vueTodoFoot.vue原创 2023-10-03 12:34:28 · 256 阅读 · 0 评论 -
vue重修003
思考:什么时候可以发送初始化渲染请求?(越早越好)什么时候可以开始操作dom?(至少dom得渲染出来)Vue生命周期:就是一个Vue实例从创建 到 销毁 的整个过程。生命周期四个阶段:① 创建 ② 挂载 ③ 更新 ④ 销毁1.创建阶段:创建响应式数据2.挂载阶段:渲染模板3.更新阶段:修改数据,更新视图4.销毁阶段:销毁Vue实例Vue生命周期过程中,会自动运行一些函数,被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码五、案例-小黑记账清单1.需求图示:1.基本渲染2.添加功能原创 2023-09-24 13:39:28 · 605 阅读 · 0 评论 -
vue重修002
代码演示:3. v-model修饰符v-model.trim —>去除首位空格v-model.number —>转数字4. 事件修饰符@事件名.stop —> 阻止冒泡@事件名.prevent —>阻止默认行为@事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为2. 对象语法当class动态绑定的是对象时,键就是类名,值就是布尔值,如果值是true,就有这个类,否则没有这个类适用场景:一个类名,来回切换3. 数组语法当class动态原创 2023-09-23 19:58:52 · 156 阅读 · 0 评论 -
vue重修001
Vue核心包开发场景:局部模块改造Vue核心包&Vue插件&工程化场景:整站开发框架:就是一套完整的解决方案栗子下图是 库 和 框架的对比。框架的特点:有一套必须让开发者遵守的规则或者约束学框架就是学习这些规则 官网Vue框架可以 基于数据帮助我们渲染出用户界面,那应该怎么做呢?比如就上面这个数据,基于提供好的msg 怎么渲染后右侧可展示的数据呢?核心步骤(4步):三 插值表达式 {{}}插值表达式是一种Vue的模板语法,可以用插值表达式渲染出Vue提供的数据表达式:是可以被求值的代码,JS引擎会讲其原创 2023-09-21 16:37:41 · 253 阅读 · 0 评论 -
Vue初识系之Webpack
webpack本质上是一个现代JavaScript应用程序的静态模块打包器(modulebundler)。当webpack处理应用程序时,它会递归地构建一个依赖关系图(dependencygraph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundleWebpack是当下最热门的前端资源模块化管理知打包工具,它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离,等到实际需要时再异步加载。原创 2023-01-10 16:49:45 · 396 阅读 · 0 评论 -
Vue3新特性
/setup中没有this对象,要用context。原创 2023-01-07 22:35:40 · 711 阅读 · 0 评论 -
Vue初识系列【2】内容升级版
v−modeklv-modeklv−modekl指令在表单元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件来更新数据,并在某种极端场景下进行一些特殊处理。组建与组建之间存在来交互PropsPropsProps可以在组件上注册一些自定义属性Peops传递参数是没有类型限制的数据类型为数组或者对象的时候,默认值是需要返回工厂模式自定义事件可以在组件中反向传递数据,可以将数据从父组件传递到子组件。原创 2023-01-07 21:45:59 · 417 阅读 · 0 评论 -
我的第一个基于vue-cli的程序
Vue CLI 是一个基于Vue.js进行快速开发的完整系统。原创 2023-01-05 11:33:30 · 466 阅读 · 0 评论 -
Vue初识系列【2】
组件是可复用的 Vue 实例,说白了就是一组可以重复使用的模板,跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织。计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有 计算 的能力(计算是动词),这里的计算简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)可以想象为缓存!计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销。原创 2023-01-04 00:18:04 · 309 阅读 · 0 评论 -
Vue初识系列【1】
MVVM(Model-View-ViewModel)是一种软件架构设计模式,由微软 WPF(用于替代 WinForm,以前就是用这个技术开发桌面应用程序的)和 Silverlight(类似于 Java Applet,简单点说就是在浏览器上运行的 WPF) 的架构师 Ken Cooper 和 Ted Peters 开发,是一种简化用户界面的事件驱动编程方式。由 John Gossman于 2005 年在他的博客上发表。MVVM 源自于经典的 MVC(Model-View-Controller)模式。原创 2023-01-03 21:13:39 · 241 阅读 · 0 评论