Vue
关注
分享
扫一扫
文章平均质量分 60
廖若星辰LTY
经年已逝还愿我们不负往昔，来日未定你我皆是红尘黑马
展开
-
Vue3 异步组件使用示例
将项目中不常用的组件以异步组件形式导入使用是我们项目优化的一个步骤，异步组件的代码项目打包时是分开打包的，能形成一个“分包”的机制，从而缩短项目的首次加载时间，提升用户体验，这里记录下 Vue3 中异步导入组件的使用示例：原创 2022-12-07 23:54:20 · 443 阅读 · 0 评论 -
Vue3 Pinia 全局状态管理工具的使用
是 Vue3 官方更推荐使用的全局状态管理工具。Pinia 最初正是为了探索 Vuex 的下一个版本而开发的，因此整合了核心团队关于 Vuex 5 的许多想法。最终，我们意识到 Pinia 已经实现了我们想要在 Vuex 5 中提供的大部分内容，因此决定将其作为新的官方推荐。——摘自本文主要记录在 Vue3 项目中使用 Pinia 的步骤，首先更多关于 Pinia 使用的规则介绍建议查阅。原创 2022-11-26 15:20:58 · 1125 阅读 · 0 评论 -
Vue3 按需引入 Element Plus
Vue3 按需引入 Element Plus 在 Vite 创建的 Vue3 项目框架中从0开始安装配置按需引入Element Plus 的步骤，注：以下配置的示例为 Vite 构建的 Vue3 脚手架项目原创 2022-11-25 00:08:29 · 3409 阅读 · 0 评论 -
vue3 + TS 自定义插件-全局message提示插件示例
本文记录 Vue3 + ts 实现自定义一个全局插件，用于进行 message 消息提示，所谓全局插件即挂载到 vue 实例上，在 App 的任一子组件中均可通过 app 的实例调用该方法。消息提示功能只是示例主要是记录 Vue3 自定义插件功能的写法。原创 2022-11-09 01:36:25 · 4567 阅读 · 4 评论 -
vue3 + ts 通过自定义指令实现可以自由拖动的盒子
本文主要记录 vue3 自定义指令的用法的一个案例，通过自定义指令实现一个盒子（类似弹框）可以被鼠标在浏览器的可视区域内自由拖动：原创 2022-11-08 20:40:41 · 1266 阅读 · 0 评论 -
Vue Transition 过渡组件 + animate.style 动画库的使用
Vue 提供了 transition的封装组件，可以给被包裹的任何元素和组件添加进入/离开过渡效果。原创 2022-10-27 16:09:15 · 1240 阅读 · 0 评论 -
Vue3 的生命周期函数
此时内存中的数据已经被修改，但还没有更新到页面上，可以访问到旧的DOM。，用于跟踪所有响应式变量和方法，一旦页面有 update ，就会跟踪他们并。，与 keep-alive 一起使用，当 keep-alive 包裹的。，与 keep-alive 一起使用，当 keep-alive 包裹的。，此时内存数据已经修改，页面数据也已经更新，可以访问到新的DOM。，状态触发，同样是vue3新引入的钩子函数，，状态跟踪，vue3新引入的钩子函数，，挂载完成后调用，此时。，卸载组件实例后调用。转载 2022-10-25 23:44:42 · 2333 阅读 · 0 评论 -
Vue组件传值：父传子、子传父、兄弟组件间的传值
父组件向子组件传值1.在子组件的props 中以数组形式接收父组件传递过来的值；2.父组件在使用组件时在组件属性中使用 v-bind 指令动态传值给子组件。示例如下：<body> <div id="app"> <div>{{tip}}</div> <!-- 调用 tab-bar 组件并传值,注意动态传值要给属性名添加上 v-bind 指令 --> <tab-bar :t..原创 2021-11-07 01:21:01 · 530 阅读 · 0 评论 -
vue-router 路由导航守卫
在vue-router路由的基本使用中我们已经介绍过路由的安装和配置等基本使用步骤了，下面我们再来介绍一个 vue-router 的高频使用方法——beforeEach() 路由导航守卫在项目的实际应用过程中很多页面和权限是根据客户端的用户身份动态决定的，就比如有的场景是没有登录的用户无法访问到首页，必须先登录才能跳转到首页进行后续的操作，这样我们就需要使用到 vue-router 路由导航守卫来限制用户手动跳转页面的操作。首先，比如我们的页面必须要用户先登录，且登录成功后服务器会生成一个 to..原创 2021-10-19 23:23:15 · 207 阅读 · 0 评论 -
Axios的基本使用-拦截器
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Axios 具有以下特性：从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRFAxios 的使用需要进行安装与配置，下面分别介绍一下这两步：安装NPM 安装方式npm install axiosCDN方.原创 2021-10-19 22:49:50 · 2430 阅读 · 0 评论 -
Element-UI 按需加载
Element-UI 我在Element-UI 的安装与配置使用这篇已经做过简单的介绍了在此就不赘述了，这里更多的是介绍 Element-UI 的另一种使用方法，即在项目中按需加载其内部组件，以达到减小项目体积的目的。第一、安装babel-plugin-component 插件npm install babel-plugin-component -D注：如果有使用 vue ui 打开 vue 项目的图形化界面也可以直接安装新的运行依赖直接搜索babel-plugin-component...原创 2021-10-19 20:56:13 · 3634 阅读 · 1 评论 -
vue-router路由的基本使用
vue-router 是 Vue 实现组件化/模块化 开发的关键，也是实现单页面复应用的核心，是 Vue 项目中必不可少的插件，那么我们来看一下怎么在项目中安装配置与使用 vue-router 。安装与配置直接下载 / CDNhttps://unpkg.com/vue-router/dist/vue-router.js引入加载使用：在 Vue 后面加载vue-router，它会自动安装的：<script src="/path/to/vue.js"></scri...原创 2021-10-19 20:31:07 · 229 阅读 · 0 评论