忆亦何为-CSDN博客

原创（四十七）Vue Router之路由守卫

在Vue Router中，你可以使用全局独享路由守卫来为特定的路由配置独立的守卫。全局独享路由守卫提供了更细粒度的控制，可以在特定路由上执行一些操作或验证逻辑。可以在组件内部定义路由守卫，以便在特定组件中执行相关的操作或验证逻辑。全局后置路由守卫是Vue Router中的一种路由守卫，用于在路由导航完成后执行一些操作。全局解析守卫是一个在路由导航之前触发的守卫机制，用于在路由进入组件之前预加载所需的数据。在当前路由改变，但是该组件被复用时调用，举例来说，对于一个带有动态参数的路径 /foo/:id，在。

2024-07-01 15:42:38 834

原创（四十六）Vue Router组件所独有的两个钩子activate、deactivated

Vue Router提供了两个钩子函数，分别是activated和deactivated。这两个钩子函数可以用于在。您可以在组件内部定义这些钩子函数，并在其中处理与激活状态相关的任务。需要注意的是，这两个钩子函数是，用于捕获路由组件的激活状态，而不是。

2024-06-26 15:34:05 889

原创（四十五）Vue Router之编程式路由导航

创建 a 标签来定义导航链接来进行跳转这一种方法，在现实开发中比较局限，所以在Vue Router里可以借助 router 的实例方法，通过编写代码来实现，而不用通过用户的交互行为（例如点击链接）来触发路由跳转。另外，与router.push和router.replace不同，router.go方法并不接受回调函数参数，因为它是直接操作历史记录的导航操作，而不是触发路由的生命周期钩子。router.go是Vue Router提供的一个方法，用于在路由历史记录中进行前进或后退的导航。方法将不会有任何效果。

2024-06-25 14:48:26 1044

原创（四十四）Vue Router的命名路由和路由组件传参

使用 props 将组件和路由解耦，props配置将会把参数以props的方式传递到目标组件，该配置属性可以是布尔值、对象或函数。在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。props函数写法，该函数返回的对象中每一组数据都会通过props传递过来，可以配合query和params使用。如果 props 被设置为 true，把路由组件收到的所有params参数，以props传递过来。

2024-06-24 16:12:33 904

原创（四十三）Vue Router之嵌套路由

实际生活中的应用界面，有可能由多层嵌套的组件组合而成。在Vue.js中，Vue Router提供了嵌套路由的功能，允许您在应用程序中创建层次化的路由结构。通过嵌套路由，可以在父路由下定义子路由，从而实现更复杂的页面组织和导航。

2024-06-20 15:58:49 519

原创（四十二）Vue之路由及其基本使用Vue Router

它允许您在Vue应用程序中实现客户端路由，通过定义路由规则和组件映射，实现不同路径之间的页面切换和导航。前端路由通过在浏览器中监听URL的变化，并根据URL的路径匹配相应的视图组件来实现页面的切换，而无需进行完整的页面刷新。在计算机科学和网络领域中，路由（Routing）是指确定数据包在网络中传输的路径和方式的过程。以npm为例：如果使用npm install vue-router命令默认安装最新版本，也就是vue-router4，如果需要安装vue-router3版本需要加个版本。在Vue组件中，使用。

2024-06-18 17:58:48 502

原创 java算法：插入排序

在传统的插入排序中，为了将当前元素插入到正确的位置，需要将较大的元素逐个向后移动，直到找到合适的位置。然而，我们可以通过将较大的元素向右移动一位，并将当前元素直接插入到正确位置来减少交换操作。然而，在处理大规模数据时，插入排序的性能可能不如其他更高效的排序算法。插入排序是一种简单直观的排序算法，它的工作原理是将待排序的数组分为已排序和未排序两部分，逐步将未排序部分的元素插入到已排序部分中的正确位置，直到整个数组有序。在传统的插入排序中，为了找到当前元素的正确插入位置，需要逐个比较已排序部分中的元素。

2024-06-17 18:00:21 738

原创（四十一）Vuex之模块化与命名空间

在 Vuex 模块中，默认情况下，mutation、action 和 getter 的名称是全局的，即它们在整个应用中是唯一的。模块重用允许你在多个地方注册相同的模块，以便在不同的上下文中共享模块的状态和功能。，即可启用命名空间。要实现模块重用，你可以在 Vuex 的模块定义中使用工厂函数，该函数返回模块对象，以便可以在不同的地方多次调用。来创建多个模块实例，通过模块重用，能够提高代码的可维护性和重用性，减少重复的代码和逻辑。，用于指定模块在 state 树中的位置，module 是一个包含模块的对象。

2024-06-17 17:26:47 1141

原创 java算法：选择排序

选择排序（Selection Sort）是一种简单直观的排序算法。它的基本思想是每次从待排序的元素中选择最小（或最大）的元素，放置在已排序的部分的末尾，直到所有元素都排序完成。遍历数组，将当前位置作为最小值的索引（假设为minIndex）。在未排序部分中遍历数组，从当前位置开始，找到最小值的索引。将最小值与当前位置的元素交换位置。这样，最小值将会被放置在已排序部分的末尾。重复步骤2和3，直到整个数组排序完成。// 遍历数组i < n - 1;i++) {// 当前位置作为最小值的索引。

2024-06-14 16:08:27 891 1

原创（四十）vuex之四个map辅助函数

Vuex辅助函数是一组用于简化在Vue.js应用程序中使用Vuex状态管理库的函数。这些辅助函数可以帮助我们在组件中更轻松地访问和操作Vuex存储中的状态。mapState：将Vuexstore中的状态映射为组件的计算属性。它接收一个数组或对象作为参数，用于指定要映射的状态。使用这个函数可以在组件中直接访问Vuex store中的状态，而无需手动编写getter函数。mapGetters：将Vuex store中的getter映射为组件的计算属性。

2024-06-14 15:43:49 805

原创 java算法：冒泡排序

然而，尽管这些优化方法可以减少比较和交换的次数，冒泡排序的时间复杂度仍然是O(n^2)，因此对于大规模数据集来说，并不是最优的排序算法选择。传统的冒泡排序是从左到右逐个比较并交换相邻元素的位置，而鸡尾酒排序是交替进行从左到右和从右到左的遍历，将较大的元素从末端冒泡到首端，再将较小的元素从首端冒泡到末端。在每一趟遍历中，通过记录最后一次交换的位置，将该位置作为下一趟遍历的边界。为了优化冒泡排序，可以引入一个标志变量来记录是否发生了交换操作，如果某一趟遍历中没有发生交换，就说明数组已经有序，可以提前结束排序。

2024-06-13 17:18:47 658 1

原创（三十九）Vue之集中式的状态管理机制Vuex

Vuex提供了一个集中式的状态管理机制，将组件的共享状态抽离出来，以一个全局的状态树来管理。在Vuex的图示中，Actions通常表示为箭头指向Mutations的方法，表示通过Actions来触发Mutations的执行。在Vuex的图示中，Mutations通常表示为箭头指向State的方法，表示通过Mutations来修改State的数据。在Vuex的图示中，State通常表示为一个状态树，它是一个JavaScript对象，包含应用程序的所有状态数据。它是同步的操作，用于更新状态树中的数据。

2024-06-13 16:55:04 970

原创 java算法：快速排序

在上述代码中，quickSort()方法是快速排序的入口方法，它调用了私有的辅助方法quickSort()和partition()。quickSort()方法通过递归调用对子数组进行排序，而partition()方法用于将数组分区并返回基准元素的最终位置。快速排序是一种常用的排序算法，它利用分治的思想将一个数组分成两个子数组，然后递归地对子数组进行排序，最终将整个数组排序完成。可以看到，快速排序算法成功地对数组进行了排序。快速排序的平均时间复杂度为O(nlogn)，其中n是数组的长度。

2024-06-12 17:27:21 406 3

原创深入理解java设计模式之单例模式

单例模式确保一个类在应用程序中只有一个对象实例存在，并提供一种全局访问该实例的方式。

2024-06-12 16:46:06 1927

原创（三十八）Vue之插槽Slots

在之前的文章中，我们已经了解到组件能够接收任意类型的值作为 props，在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段，由此就有了插槽。作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。分类：默认插槽、具名插槽、作用域插槽。

2024-06-11 20:47:04 591

原创（三十七）vue 项目中常用的2个Ajax库

先看一个github搜索案例有一个搜索框，输入相关用户名，就能模糊搜索出用户，展现到下方第一步：我们用到了第三方样式库bootstrap，首先需要在public文件夹见一个css文件夹，放入样式库，然后在index.html页面进行引入第二步：拆分组件，搜索跟文本框为一个组件Search，展示用户为一个组件List。

2023-02-20 20:18:28 522 1

原创（三十六）Vue解决Ajax跨域问题

我们知道vue脚手架默认是在localhost：8080这个端口运行，而我们需要访问上面两台服务器，一般来说请求会被CORS策略阻止。若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）其次准备两台服务器，这里使用node.js+express搭建。vue脚手架提供一种解决方案，那就是使用代理服务器代理发送请求。那么再次请求学生资源时就会优先匹配文件students的内容。vue跨域访问，被CORS策略阻止。启动服务器server1。启动服务器server2。

2023-02-18 22:54:35 2568

原创（三十五）Vue之过渡与动画

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库，如 Velocity.js。

2023-02-17 14:46:35 558

原创（三十四）Vue之新生命周期钩子nextTick

首先先看这一个需求，给每个任务项新增一个编辑按钮当编辑按钮点击时，任务项就会变成文本框，并且自动获取焦点。

2023-02-16 23:34:14 286

原创（三十三）Vue之消息订阅与发布

我们把给Item组件与App组件的交互从全局事件总线替换成消息订阅与发布。这种方式的思想与全局事件总线很相似，一种组件间通信的方式，适用于。第五步：App组件在beforeDestroy钩子中取消消息订阅。需要引入一个消息订阅与发布的第三方实现库: PubSubJ。第五步：在beforeDestroy钩子中取消消息订阅。第二步：在Item组件与App组件使用。把第三方实现库PubSubJ安装。第三步：Item组件接收数据。第四步：App组件提供数据。第二步：在用到的组件使用。

2023-02-15 15:03:56 1053 1

原创（三十二）Vue之全局事件总线

，它不属于任何一个组件，跟任何组件都没关系，任何两个组件想传信息都需要通过这个组件，譬如组件A向组件B传递信息，首先组件B给组件X绑定自定义事件，这个事件的回调在组件B身上，然后在A组件去触发组件X身上的组件B绑定的自定义事件，把数据传过去，组件B的回调就收到了数据，这样就实现了任意组件的通信。我们给Item组件与App组件的交互改成全局事件总线，之前Item用App的数据通过props先传给List组件，List组件再传给Item组件进行使用。全局事件总线一种组件间通信的方式，适用于。

2023-01-06 20:39:27 733

原创（三十一）Vue之自定义事件

自定义事件一种组件间通信的方式，适用于：子组件 ===> 父组件例如：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。我们把Footer组件与App组件的交互从props改为自定义事件第一步：在App组件里给Footer组件绑定自定义事件第二步：定义回调，这个回调之前已经定义好了，直接调用即可第三步：在Footer组件定义触发第四步：在App组件解绑。

2023-01-01 22:58:32 314

原创（三十）Vue之回顾本地存储webStorage

我们可以考虑把数据存储在localStorage里，页面加载时读取localStorage里的数据，读取不到就赋给一个空数组，然后采用监视属性，对todos进行深度监视，当todos发生改变时，把数据重新写入localStorage里。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.用于长久保存整个网站的数据，保存的数据没有过期时间，需要手动清除才会消失。该方法会清空存储中的所有数据。

2022-12-31 20:10:39 1707

原创（二十九）Vue之组件化编码流程

先看一个需求：TodoList案例功能：添加任务；任务项可以勾选，表示已完成任务；鼠标移动到任务项高亮并显示删除按键，点击删除按键可以进行删除单个任务项；左下角展示已完成和全部的任务项数，有一个勾选框，勾选可以让任务项全部勾选上，有一个清除已完成任务的按钮，点击可以清除勾选的任务项。下面我们就来完成这个功能。

2022-12-30 23:23:01 665

原创（二十八）Vue组件的样式

在vue开发过程中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。），通过观察渲染的DOM结构可以发现，在DOM结构以及css样式上加了唯一的标识，使样式唯一且只作用于含有该属性的DOM。如果把App组件的scoped去掉：则会影响内部组件的样式，DOM节点不会给App组件里的内容添加标识。还有一个lang属性，是指定使用哪种语言作为样式语言，若未指定样式语言，默认使用CSS样式。

2022-12-29 12:17:00 594

原创（二十七）Vue之插件

通过import引入后，然后在调用 new Vue() 之前通过 Vue.use(插件名) 注册插件；插件通常用来为 Vue 添加全局功能（增强Vue）。插件的功能范围没有严格的限制。一般会在这里面定义全局过滤器、全局指令、全局混入（合）、添加实例方法等等。需要实现什么功能只需要写在install里面即可。插件一个js文件，这个js文件就是插件文件，

2022-12-28 21:52:29 145

原创（二十六）Vue之mixin混入/合

效果：同样是x的属性名相同以组件为主，影响注册之后所有创建的每个 Vue 实例，Student组件、School组件、App组件及Vue实例，所以输出4个666，并且通过vue开发者工具我们都能发现每个实例都有数据x和y。在有些业务逻辑中，发现在多个组件的功能业务逻辑一样，可以把多个组件共用的配置提取成一个混入对象，通过配置将这些混入对象配置进组件里，这些混入将会被合并到最终的选项中。使用Vue.mixin()配置，这种配置全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。

2022-12-27 17:46:12 338

原创（二十五）Vue之props配置项

如果组件也对props进行修改，那么就会打破数据流的单一性，因为从组件来看没法确保这个值的生产过程是一致的，从而引入混乱，进而导致组件可能会变得很难维护，所以不建议组件本身去修改props，而是只读取props的值就好。约定props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么可以复制props的内容到data中一份，然后去修改data中的数据。当然，要传值的时候是数字类型，要使用v-bind的形式。父组件：使用在组件标签里使用。

2022-12-26 22:26:18 555

原创（二十四）Vue之ref属性

一般来说我们可以使用document.getElementById()，获取上方的DOM元素，但是我们使用的是vue，是用来简化对DOM的操作的，我们亲自去操作DOM，就没有体现出vue的作用，所以要使用ref。作用：应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象。如果在组件上使用ref，那么输出的是改组件的VueComponent实例对象。第一步：在需要操作的DOM节点使用ref打标识，标识名称随意。第二步：使用$refs.标识名获取改元素的DOM节点。

2022-12-25 15:23:05 181

原创（二十三）Vue之脚手架的使用

Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。脚手架是基于webpack。官方文档:。

2022-12-24 21:53:08 459

原创（二十二）Vue之单文件组件

注意：我们打开index.html页面什么都没有，这是因为我们使用了ES6语法，浏览器识别不了，需要在webpack或官方的脚手架里运行才行，这个以后再说。而单文件组件就是真正意义上的局部功能代码和资源的集合，整合形成一个个的.vue文件。把之前的在非单文件组件定义的Student组件和School组件用单文件组件定义。vue文件写完之后，需要使用ES6模块化暴露给外界，让需要使用的文件引入。非单文件组件是在一个文件里面定义众多组件，这会使得结构混乱。将一个js文件按照功能作用分解为多个js文件。

2022-12-23 15:45:17 413

原创（二十一）Vue之非单文件组件

使用Vue的API extend，传一个配置对象，这个配置项几乎和实例Vue一样，但也有点区别；1.el不要写，为什么？——— 因为最终所有组件都要被一个vm管理，由vm决定服务于哪个容器。2.data必须写成函数，为什么？———— 避免组件被复用时，数据存在引用关系。备注：使用template可以配置组件结构。

2022-12-22 16:41:22 468

原创（二十）Vue之组件和模块概念

组件是可复用的 Vue 实例, 把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可，我们可以将其抽出为一个组件进行复用。

2022-12-21 14:05:06 439

原创（十九）Vue之生命周期

挂载流程，更新流程、销毁流程挂载流程将要创建：调用beforeCreate函数创建完毕：调用created函数将要挂载：调用beforeMount函数挂载完毕（重要）：调用mounted函数更新流程将要更新：调用beforeUpdate函数更新完毕：调用updated函数销毁流程将要销毁（重要）：调用beforeDestroy函数销毁完毕：调用destroyed函数1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

2022-12-20 15:43:46 409

原创（十八）Vue之自定义指令

(1).局部指令：在new Vue实例中配置directives:{指令名:配置对象} 或 directives{指令名:回调函数}(2).全局指令：在new Vue实例外配置Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)回调函数函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。el: 指令所绑定的元素，可以用来直接操作 DOM。

2022-12-17 22:16:48 304

原创（十七）Vue之内置指令

当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。效果：点击超链接会把用户的cookie携带过去，如果这个网址是一个非法网址，俗称钓鱼网站，就会严重产生安全问题。与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。效果：v-text会替换掉节点中的内容，而插值表达式不会。效果：不管怎么加，v-once修饰的节点都不会再更新。严重注意：v-html有安全性问题！

2022-12-16 23:01:53 119

空空如也

空空如也