Vue2
文章平均质量分 55
Vue2
盖盖衍上_染染熊
研发怪
展开
-
vue-项目打包、配置路由懒加载
在现代前端开发中,Vue.js因其简洁、灵活和高效的特点,已经成为许多开发者的首选框架。在Vue项目中,打包部署和路由懒加载是两个非常重要的环节。打包Vue项目是为了将源代码转换为浏览器可以解析的JavaScript文件,以便在服务器上部署和用户端加载。原创 2024-01-20 21:49:57 · 788 阅读 · 0 评论 -
vuex-跨模块访问
假设我们有一个Vuex store,其中包含user模块和cart模块。当用户点击退出登录按钮时,我们需要调用user模块中的方法来清除用户信息,同时还需要清除cart模块中的购物车数据。若需要在全局命名空间内分发 action 或提交 mutation,将。首先,我们需要在Vuex store中定义user模块和cart模块。会作为第三和第四参数传入 getter,也会通过。如果你希望使用全局 state 和 getter,在user.js中调用cart.js中的方法。对象的属性传入 action。原创 2024-01-20 18:33:08 · 536 阅读 · 0 评论 -
vue-Mixin-复用代码片段
在软件开发中,代码复用是一个重要的原则,它可以帮助我们避免重复的代码,提高代码的可维护性和可读性。在Vue.js中,我们可以使用mixins来复用代码片段。Mixin可以包含任何组件选项。当组件使用Mixin时,所有Mixin对象的选项将被混入到该组件的选项中。原创 2024-01-20 18:07:20 · 632 阅读 · 0 评论 -
vue路由-全局前置守卫
全局前置守卫网址对于支付页,订单页等,必须是登录的用户才能访问的,游客不能进入该页面,需要做拦截处理,跳转到登录页面全局前置守卫的原理:全局前置守卫是一种路由守卫,它在路由被访问之前进行拦截。它允许我们在路由被访问之前进行一些处理,例如权限验证、请求参数预处理等。在Vue Router中,我们可以通过在路由配置中添加beforeEnter守卫来实现全局前置守卫。原创 2024-01-20 14:47:06 · 539 阅读 · 0 评论 -
axios封装-reques.js
参考网址:http://www.axios-js.com/zh-cn/docs/#axios-create-config在现代的前端开发中,我们经常需要与后端API进行交互,而axios是其中的一个非常流行的选择。为了简化请求的处理和增强代码的可读性,我们经常需要对axios进行封装。我们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置(比如: 配置基础地址,请求响应拦截器等等)一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用。原创 2024-01-20 14:17:09 · 718 阅读 · 0 评论 -
vant组件库的简单使用
是一款 PostCSS 插件,用于将 px 单位转化为 vw/vh 单位。说明:viewportWidth:设计稿的视口宽度。原创 2024-01-20 13:47:31 · 678 阅读 · 0 评论 -
vuex的核心使用-2
Mutation:用来修改state的唯一途径。在Vuex中,任何对state的修改都必须是显式提交mutation。mutation必须是同步函数。类似于:methodsAction:类似于mutation,可以包含任意异步操作。Getter:对state进行更复杂的数据操作,例如计算属性。这些计算属性的值是基于state的计算得出的。1. state --> $store.state.模块名.数据项名2. getters --> $store.getters['模块名/属性名']原创 2024-01-17 00:25:59 · 817 阅读 · 0 评论 -
vuex的初步使用-1
Vuex 是一个 Vue 的 状态管理工具,状态就是数据。简单讲:Vuex 就是一个插件,可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。相对于一个仓库:存放组件共享的数据。原创 2024-01-16 17:58:07 · 439 阅读 · 0 评论 -
vue-ESlint代码规范及修复
ESLint:是一个代码检查工具,用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时,我们使用的是代码风格的规则。规范网址:https://standardjs.com/rules-zhcn.html。原创 2024-01-15 22:37:22 · 1092 阅读 · 0 评论 -
VueCli-自定义创建项目
选择eslint的风格 (eslint 代码规范的检验工具,检验代码是否符合规范)是否保存预设,下次直接使用?=> 不保存,输入 N。是否使用history模式:这里暂时选择hash模式。选择vue的版本:这里选择vue2.x的版本。选择配置文件的生成方式 (直接回车)1.安装脚手架 (已安装可以跳过)选择css预处理:选择Less。手动选择功能:如下 选择四个。选择校验的时机 (直接回车)等待安装,项目初始化完成。原创 2024-01-15 22:19:27 · 834 阅读 · 0 评论 -
Vue-组件缓存-keep-alive
在Vue.js中,组件的复用和缓存是一个重要的优化手段。当我们频繁切换组件时,频繁的销毁和重建会带来一定的性能开销。为了解决这个问题,Vue提供了一个名为keep-alive的抽象组件。下面我们将深入探讨keep-alive的工作原理、使用场景和最佳实践。keep-alive是什么keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。原创 2024-01-15 12:40:20 · 1295 阅读 · 0 评论 -
Vue-路由-编程式导航
这里路由为在还是需要配置动态路由:key。原创 2024-01-14 21:09:49 · 419 阅读 · 0 评论 -
Vue-路由-常见设置
在Vue应用中,路由管理是至关重要的。当用户访问某个URL时,我们需要确保他们看到正确的页面。有时候,出于各种原因,我们可能需要将用户从一个URL重定向到另一个URL。在Vue Router中,重定向功能非常实用,可以帮助我们轻松实现这一需求。Vue Router允许我们在路由配置中使用重定向来改变用户的导航路径。这可以通过两种方式实现:全局重定向和组件内的局部重定向。全局重定向:在全局范围内应用重定向,可以在整个应用中影响路由导航。这通常在应用的路由配置中进行设置。局部重定向。原创 2024-01-14 20:24:53 · 526 阅读 · 0 评论 -
Vue-路由-声明式导航
vue-router 提供了一个全局组件 router-link (取代 a 标签)修改类名:router-link 的 两个高亮类名 太长了,我们希望能定制怎么办?我们发现 router-link 自动给当前导航添加了 两个高亮类名。动态路由传参: (优雅简洁,传单个参数比较方便)查询参数传参: (比较适合传多个参数)接收参数:对应页面组件接收传参数。接收参数:对应页面组件接收传参数。原创 2024-01-14 19:41:10 · 512 阅读 · 0 评论 -
Vue-路由-配置
存放原则:分类开来 更易维护。原创 2024-01-13 17:14:14 · 466 阅读 · 0 评论 -
Vue-插槽(Slots)
在Vue.js中,插槽是一种强大的功能,它允许你创建可重用的模板,并在使用该模板的多个地方插入自定义内容。插槽为你提供了一种方式,可以在父组件中定义一些“插槽”,然后在子组件中使用这些插槽,插入自己的内容。原创 2024-01-12 17:02:29 · 628 阅读 · 0 评论 -
vue自定义指令
Vue.js 提供了自定义指令(Directives)的特性,允许开发者自定义 HTML 标签的行为。自定义指令是 Vue 的一种高级特性,它使你可以扩展 HTML 标签的行为。通过自定义指令,你可以添加、修改或删除元素的某些行为。vue存在许多的内置指令:如:v-html、v-model、v-for 等等。那么如何进行自定义指令呢?详见后面你可以在全局范围内或组件内部注册自定义指令。全局注册的指令会影响到该 Vue 实例下的所有组件,而局部注册的指令只影响特定的组件。如下:案例。原创 2024-01-12 16:26:52 · 437 阅读 · 0 评论 -
vue的异步更新 $nextTick
【代码】vue的异步更新 $nextTick。原创 2024-01-11 14:16:45 · 678 阅读 · 0 评论 -
vue中 ref 和 $refs的使用
利用 ref 和 $refs 可以用于 获取 dom 元素, 或 组件实例。原创 2024-01-11 14:12:19 · 558 阅读 · 0 评论 -
vue组件通信
组件通信, 就是指 组件与组件 之间的数据传递。注:组件的数据是独立的,无法直接访问其他组件的数据。所以需要了解组件通信口诀:谁的数据谁处理实现指定属性名进行组件数据的双向绑定。原创 2024-01-11 14:01:14 · 1168 阅读 · 0 评论 -
Vue 中 watch监听器的使用
vue 的 watch 监听器使用原创 2024-01-07 23:27:03 · 403 阅读 · 0 评论 -
vue组件开发
① 组件化:一个页面可以拆分成一个个组件,每个组件有着自己独立的结构、样式、行为。好处:便于维护,利于复用 → 提升开发效率。组件分类:普通组件、根组件。② 根组件(App.vue):整个应用最上层的组件,包裹所有普通小组件。原创 2024-01-09 22:39:44 · 684 阅读 · 0 评论 -
vue cli脚手架
介绍如下图:重点是:图中 颜色不同的三个文件。原创 2024-01-09 22:02:50 · 466 阅读 · 0 评论 -
Vue生命周期图解
生命周期四个阶段:图解:原创 2024-01-09 21:43:48 · 659 阅读 · 0 评论 -
vue-计算属性
vue-计算属性原创 2024-01-07 15:13:37 · 434 阅读 · 0 评论 -
v-bind(:) 对样式控制<class/style>
如:详见 3. 案例说明。如:详见 3. 案例说明。原创 2024-01-07 00:49:06 · 700 阅读 · 1 评论 -
vue中常用的指令修饰符
在Vue.js中,指令修饰符用于在指令后面以点号(.)形式添加特殊后缀,以表示对指令的特定行为或修饰。这些指令修饰符提供了在特定情境下更精细控制指令行为的方式。原创 2024-01-07 00:24:39 · 709 阅读 · 1 评论