- 博客(271)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 第三十三章 Vue路由进阶路由模块封装
在上一个章节中，我们将所有的路由配置都堆在main.js中来实现路径组件的路由，这样做的话非常不利于我们后期对项目的维护。因此正确的做法是将路由模块抽离出来。，拆分模块，更利于维护和扩展。
2024-11-03 15:16:39
60
原创 第三十二章 Vue组件分类及存放位置
我们通过前面几个章节的学习会发现，一个Vue工程中的vue文件，有些是存放于components路径下，有些存放于views路径下。都是.vue文件本质无区别，之所以这么分类存放是为了区分页面组件（views）和复用组件（components），便于后续的维护。src/components文件夹。- 页面展示 - 配合路由用。- 展示数据 - 常用于复用。src/views文件夹。
2024-11-03 14:51:48
22
原创 第三十一章 Vue之路由（VueRouter）
一、引言1.1. 路由介绍Vue中路由就是路径和组件的映射关系，通过指定路径和组件的对应关系，实现单页面应用中的跳转显示（即页面内容的切换）。My.vue组件Friend.vue组件。
2024-11-03 14:44:21
144
原创 第三十一章 单页与多页应用程序概念
单页面应用(SPA):所有功能在一个HTML页面上实现，如网易云音乐。通过多个HTML页面组合实现整个应用网站的功能。
2024-11-03 13:14:06
40
原创 第三十章 章节练习商品列表组件封装
props父传子 $emit子传父 v-model。商品列表的实现封装了2个组件（标签组件和表格组件）(4) 内容修改，回车 → 修改标签信息。(1) 双击显示输入框，输入框获取焦点。2. my-table 表格组件封装。（2）$nextTick 自定义指令。1. my-tag 标签组件封装。（3）插槽：具名插槽，作用域插槽。(2) 失去焦点，隐藏输入框。(1) 动态传递表格数据渲染。(2) 表头支持用户自定义。(3) 主体支持用户自定义。(3) 回显标签信息。
2024-11-03 12:58:56
116
原创 第二十九章 Vue之插槽
我们在企业级项目开发过程中，经常会碰到PC端管理后台中有些列表的列头和列题在不同的条件下会动态的变更，以外的开发实现上可能会使用判断条件语句来实现，如果动态变更的种类条件很多的情况下，代码就会相当复杂和冗余。这种情况下我们可以将对话框相同公用的部分抽取封装成一个组件，内部的会变动的提示语信息（组件的内容）通过插槽进行定制化传入参数，从而实现组件的复用。前面我们讲的默认插槽，它只支持组件内只有一处内容不同需要自定义的情况。我们通过插槽实现内容的定制，同时插槽还支持设定默认的内容，即插槽后备内容。
2024-11-03 12:03:00
391
原创 第二十八章 Vue之自定义指令
2.1. 自定义指令-全局注册使用全局注册使用自定义指令2.2. 自定义指令-局部注册使用局部注册使用自定义指令// 消息提示的环境配置，设置为开发环境或者生产环境，生产环境一般设置不提示常见错误和陷阱// 全局注册指令// inserted 会在指令所在的元素，被插入到页面中时触发// el 就是指令所绑定的元素el.focus()})new Vue({// 消息提示的环境配置，设置为开发环境或者生产环境，生产环境一般设置不提示常见错误和陷阱new Vue({
2024-11-03 00:45:00
330
原创 第二十七章 Vue异步更新之$nextTick
需求：编辑标题, 弹出显示编辑框自动聚焦1. 点击编辑，显示编辑框2. 让编辑框，立刻获取焦点我们常规的思路可能会编写如下代码来实现：问题："显示之后"，立刻获取焦点是不能成功的！Vue是异步更新DOM (提升性能)，当执行获取焦点这段代码时，前面显示输入框在渲染时还没执行结束。二、完整代码new Vue({
2024-11-02 23:56:09
181
原创 第二十六章 Vue之在当前组件范围内获取dom元素和组件实例
我们过去在想要获取一个dom元素的时候，一般会使用到document.querySelector('class样式')这种全页面范围的查找方式。如果在页面比较复杂（如有多个组件且可能存在相同样式）的情况下，通过这种方式就获取就难以定位一个dom元素。因此Vue为我们提供了ref和$refs。querySelector 查找范围 →整个页面利用ref和$refs可以用于获取dom元素或组件实例。查找范围 →当前组件内 (更精确稳定)二、获取dom2.1. 具体步骤。
2024-11-02 23:32:16
321
原创 第二十五章 Vue父子通信之sync修饰符
前面的章节我们讲到，通过v-model我们可以实现父子组件间的通信，但是使用v-model的时候，子组件接收的prop属性名必须固定为value，很多场景下我们可能需要自定义属性名，这个时候sync修饰符就可以满足我们的需求。.sync 修饰符可以实现子组件与父组件数据的双向绑定，简化代码。prop属性名，可以自定义，非固定为value封装弹框类的基础组件，visible属性true显示 false隐藏就是:属性名和@update:属性名合写父组件 (使用方式)
2024-11-02 22:32:35
352
原创 第二十四章 v-model原理及v-model简化表单类组件封装
一、v-model 原理一、v-model 原理v-model本质上是一个语法糖。例如应用在输入框上，就是value属性和input事件的合写。提供数据的双向绑定①数据变，视图跟着变:value②视图变，数据跟着变@input$event用于在模板中，获取事件的形参。
2024-11-02 00:18:40
272
原创 第二十三章 Vue组件通信之非父子组件通信
注：在使用跨层级进行父组件和子孙组件进行共享数据时，能够进行简单数据类型（非响应式）及复杂数据类型（响应式）的共享，但是实际使用过程中，我们建议使用复杂类型来做数据共享，因为该类型的数据是响应式的，因此其他组件在获取使用时能够直接生效。前面几个章节我们重点讲解了在Vue中组件的关系类别及父子组件的通信解决方案，本章内容将详细讲解关于非父子组件间的通信解决方案。1. 创建一个都能访问到的事件总线 (空 Vue 实例) → 在utils包下创建EventBus.js。1.2.1. 实现步骤。
2024-10-30 22:54:53
665
原创 第二十二章 章节练习记事本之组件通信和单向数据流
本章节通过一个简单的记事本练习，来回顾和巩固前面章节学习的组件关系、组件间通信及单向数据流的知识点。收集数据 v-model → 监听事件 → 子传父传递任务 → 父组件 unshift。监听删除携带 id → 子传父传递 id → 父组件 filter 删除。提供数据(公共父组件) → 父传子传递 list → v-for 渲染。清空功能：监听点击 → 子传父通知父组件 → 父组件清空。新建组件 → 拆分存放结构 → 导入注册使用。底部合计：父传子传递 list → 合计展示。1.1. 运行效果图。
2024-10-30 22:00:13
228
原创 第二十一章 Vue组件通信之prop校验及单向数据流
在上一个章节中，我们讲解了组件之间的关系以及组件之间父子通信的解决方案，其中就提到了props的概念，父子关系可以通过props进行通信。那么什么是Prop呢？Prop其实是组件上注册的一些自定义属性，它可以用来向子组件传递数据。Prop的特点：1. 可以传递任意数量的prop2. 可以传递任意类型的prop。
2024-10-30 20:17:03
576
原创 第二十章 Vue组件通信之父子通信
1. 两种组件关系分类和对应的组件通信方案父子关系 → props & $emit非父子关系 → provide & inject 或 eventbus通用方案 → vuex2. 父子通信方案的核心流程2.1 父传子props：① 父中给子添加属性传值 ② 子props 接收 ③ 子组件使用2.2 子传父$emit：① 子$emit 发送消息 ②父中给子添加消息监听 ③ 父中实现处理函数。
2024-10-30 19:16:17
403
原创 第十九章 Vue组件之data函数
在Vue CLI脚手架中一个组件的data选项必须是一个函数，以此保证每个组件实例，维护独立的一份数据对象。每次创建新的组件实例，都会新执行一次data 函数，得到一个新对象。对于Java后端开发的同学相信一定很熟悉，这就是面向对象的概念。data函数的使用与我们前面章节讲到的data对象的使用方法是一样的。
2024-10-30 16:56:22
560
原创 第十八章 Vue组件样式范围配置之scoped
前面的几个章节在介绍组件的时候我们提到过，Vue组件是由<template>、<style>和<script>三大部分组成，那么本章节我们将对组件中的样式做一个再深入讲解。日常开发过程中，我们经常会碰到一些HTML元素样式冲突的情况，且排查和管理比较耗费精力，那么Vue在组件的样式方面，是怎样处理冲突的呢？我们在日常项目开发的过程中，要注意的是组件应该有着自己独立的样式，因此推荐加上scoped属性，：写在Vue组件中的样式会全局生效 → 因此很容易造成多个组件之间的样式冲突问题。scoped的原理如下。
2024-10-30 15:19:44
1088
原创 第十六章 Vue组件化开发及组件局部/全局注册
一个页面可以拆分成多个组件，每个组件有着自己独立的结构、样式、行为。好处：便于维护，利于复用 → 提升开发效率。组件分类：普通组件、根组件。整个应用最上层的组件，包裹所有普通小组件App.vue 文件（单文件组件）的三个组成部分1.2.语法高亮插件1.3. 组件内部组成组件内部由三部分组成：template：结构 （有且只能一个根元素）script: js逻辑style： 样式 (可支持less，需要装包)1.4. 让组件支持 less。
2024-10-29 23:39:26
884
原创 第十五章 Vue工程化开发及Vue CLI脚手架
Vue CLI 是 Vue 官方提供的一个全局命令工具，它解决了以往工程化开发模式的主要问题，生成标准化的配置，可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】1. 开箱即用，零配置2. 内置 babel 等工具3. 标准化。
2024-10-29 12:39:17
757
原创 第十四章 章节练习echarts饼图渲染
目录一、引言二、完整代码 三、总结通过前面几个章节的学习，再结合日常项目中经常会使用到的echarts图，来完整以下功能需求，增强对知识点的巩固：运行效果图如下： 代码中的后端接口为我本地机子部署的服务，大家可根据自身情况，在本地创建一个简单的SpringBoot或者传统的JavaWeb工程服务，涉及到简单的增删改查接口，字段主要有creator、name、price：三、总结
2024-10-29 11:25:45
310
原创 第十三章 章节练习生命周期之mounted应用
在Vue中，要让一个控件（输入框获取焦点），我们首先要在DOM渲染完成后才能对控件进行操作，否则页面上的控件元素都还没渲染完成（没出来），我们是无法操作指定目标对象的。因此这里我们就可以采用mounted方法，在挂载阶段，模板渲染完成后操作输入框获取焦点。
2024-10-28 23:03:48
301
原创 第十二章 章节练习生命周期之created的应用
构建一个新闻的页面，页面在响应式数据准备好之后（即created），就向后台接口请求获取新闻数据列表，然后赋值给Vue实例中的list列表，这个请求逻辑我们就写在created方法中。后台接口是我在本地机子上部署的服务，大家也可以在自己本地机子上搭建一个简单的SpringBoot工程，返回相关的图片和文字数据即可。
2024-10-28 22:52:20
268
原创 第十一章 Vue生命周期及生命周期的四个阶段
在这个过程中，组件经历了一系列的阶段，每个阶段都有其特定的生命周期钩子函数，这些钩子函数允许在不同的阶段插入开发人员自定义的代码逻辑。Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码。实例已经挂载到DOM上后调用，此时期已经和DOM进行了关联，可以用$el访问到挂载的DOM元素。实例创建后调用，此时已经完成了数据的观测，但是尚未挂载DOM，$el属性尚不可用。：在挂载之前调用，相关的render函数首次被调用，可以在此时对实例进行渲染。
2024-10-28 15:08:31
878
原创 第十章 Vue实现简单购物车的案例
1. 渲染功能： v-if/v-else v-for :class2. 删除功能: 点击传参 filter过滤覆盖原数组3. 修改个数：点击传参 find找对象4. 全选反选：计算属性computed 完整写法 get/set5. 统计选中的总价和总数量: 计算属性computed reduce条件求和6. 持久化到本地： watch监视，localStorage，JSON.stringify, JSON.parse。
2024-10-28 14:00:07
439
原创 第九章 Vue之watch监听器
作用：监视数据的变化，一旦数据发生变化则执行相应的业务逻辑或异步操作。① 简单写法 → 简单类型数据，直接监视。初始化立刻执行一次handler方法。② 完整写法 → 添加额外配置项。
2024-10-28 11:44:23
507
原创 第七章 Vue之computed计算属性与methods方法对比
computed计算属性更加侧重于处理数据、获取结果，而且它可以对结果进行缓存；methods方法更加侧重于提供业务逻辑。
2024-10-27 21:34:53
454
原创 第五章 Vue常用指令
增加:key和不增加:key的区别在于，不加的话，比如多个元素的列表，我们删除一个时，并不会删除该，而是把下面的值进行位移。加了的话则是把该元素删除。" → 动态解析标签、设置元素 最终效果同。" → 动态解析标签、设置元素 最终效果同。四、v-else 和 v-else-if。= 添加监听 + 提供处理逻辑。三、v-show 和 v-if。辅助v-if 进行判断。辅助v-if 进行判断。Vue 会根据不同的。，针对标签实现不同的。动态的设置html的。
2024-10-27 13:33:13
516
原创 第四章 开发者工具安装
2. 极简插件: 下载 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件。安装Vue开发者工具：装插件调试Vue应用。1. 通过谷歌应用商店安装 （国外网站）
2024-10-27 10:57:56
313
原创 第二章 Vue之插值表达式
{{ 表达式 }}利用表达式进行插值，渲染到页面中。1. 表达式是可以被求值的代码，JS引擎会将其计算出一个结果。2. 使用的数据必须存在于 (data)3. Vue支持的是表达式，而非语句，比如：if for语句等等4. 不能在标签属性中使用{{ }}插值，如
2024-10-26 14:23:59
436
原创 第一章 初识Vue
Vue 是一款用于快速构建用户界面的渐进式框架，采用自底向上增量开发的设计，核心库只关注视图层。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。Vue完全有能力驱动采用和Vue生态系统支持的库开发的复杂应用。Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建，是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数。
2024-10-26 13:45:50
892
原创 第十一章 Mybatis之SSM整合
本文通过搭建一个简单的Spring+SpringMVC+Mybatis工程来演示三个框架的整合过程，其中包含一个简单的User作为基础业务。十三、MyBatis映射文件：User。5. 编写Service接口实现类。6. 编写Controller。4. 编写Service接口。3. 编写Mapper接口。
2024-10-26 09:23:16
664
原创 第十章 Mybatis之注解开发
实现复杂关系映射之前我们可以在映射文件中通过配置<resultMap>来实现，使用注解开发后，我们可以使用@Results注解，@Result注解，@One注解，@Many注解组合完成复杂关系的配置。MyBatis 注解开发是指在 MyBatis 中使用注解来代替 XML 配置文件的方式，通过。使用注解开发方式，这样我们就可以减少编写Mapper.xml映射文件了。@Results：可以与@Result 一起使用，封装多个结果集。@One：实现一对一结果集封装。2.1. 用户实体类。
2024-10-25 21:32:09
1564
原创 第九章 Mybatis多表操作之多对多配置
多对多与多对一的主要区别在于，多对多引入了中间表，通过这张中间表，用户可以查询出自己对应的多个角色，角色也可以查询出自己对应的多个用户，我们只需要在角色实体类里增加对用户的集合列表的引用，RoleMapper.xml按照UserMapper.xml中类似的配置形式，再新增一个查询角色对应的用户接口即可。
2024-10-25 13:17:28
1196
原创 第八章 Mybatis多表操作之一对多配置
在上一章节中我们讲到了日常业务场景开发中碰到的一对一查询，其中就提到了关于用户和订单表的例子，一笔订单关联一个用户，那么反过来一个用户其实会对应多笔订单，这就是我们本章要讲解的一对多查询。在MyBatis中，一对多查询也是通过配置映射文件中的来实现的。1. 一个订单只从属于一个用户，但是一个用户有多个订单，用户表id关联多个订单表uid。2. 一对多查询的需求：查询一个用户，与此同时查询出该用户关联的所有订单。
2024-10-24 19:54:57
360
原创 第七章 Mybatis多表操作之一对一配置
在我们日常开发中，经常会碰到多表连接查询的业务场景，比如查询某一笔订单（包含所属用户信息），这种我们称之为一对一查询。在MyBatis中，一对一查询通常是通过配置映射文件中的。1. 一个用户有多个订单，一个订单只从属于一个用户，订单表uid关联用户表id。2. 一对一查询的需求：查询一个订单，与此同时查询出该订单所属的用户。
2024-10-23 23:45:05
405
原创 第六章 Mybatis之Plugin插件配置
<plugin></plugin><plugin></plugin><plugin></plugin><plugin>
2024-10-23 19:58:09
354
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人