vue3.0 - 随笔分类 - 完美前端

vue Suspense内置组件

摘要：vue3的Suspense用来包裹异步组件或异步setup ，自动等待其加载完成并渲染，同时你可以提供一个回退（fallback）内容。 <template> <Suspense>  <template #default> <Asyn 阅读全文

posted @ 2025-07-22 00:41 完美前端阅读(19) 评论(0) 推荐(0)

vue3的声明周期错误捕获渲染跟踪

摘要：Composition API中，onBeforeCreate和onCreated钩子，在setup() 中的逻辑就已经相当于在这两个阶段 onServerPrefetch 服务端预取 onBeforeMount 挂载前 onMounted 挂载后 onBeforeUpdate 更新前 onUpda 阅读全文

posted @ 2025-07-21 23:42 完美前端阅读(5) 评论(0) 推荐(0)

vue3 h5日历组件

摘要：父组件引入 const dateRange = ref('2024-12-18 到 2024-12-25')const date = ref(['2025-07-06 00:00:00', '2025-07-06 23:59:59'])<AppDatePicker v-model="date" v- 阅读全文

posted @ 2025-07-06 23:57 完美前端阅读(281) 评论(0) 推荐(0)

vue3 h5点击选择组件, 底部弹出组件

摘要：父组件引入组件方法 const date = ref('')const periodOptions = ref([ { label: '篮球', value: 0 }, { label: '足球', value: 1 }, { label: '排球', value: 2 },])watch(date 阅读全文

posted @ 2025-07-06 19:34 完美前端阅读(59) 评论(0) 推荐(0)

具名作用域插槽

摘要：插槽中的单一数据绑定一种较为简单的场景，即插槽传递单一数据。这种情况下，插槽中的内容可以接受一个传入的数据，然后在组件中使用. 使用了一个名为 header 的插槽，并通过 message="hello" 将一个字符串 “hello” 作为 headerProps 传递给插槽。这里的 header 阅读全文

posted @ 2024-08-21 20:45 完美前端阅读(14) 评论(0) 推荐(0)

vue uniapp 弹出层背景穿透，穿层

摘要：// 投注信息弹窗内容组件上 @touchmove.stop.prevent="() => {}" u-popup :show="show" @close="show= false" @open="open" component @touchmove.stop.prevent="() => {}" 阅读全文

posted @ 2023-12-10 13:38 完美前端阅读(294) 评论(0) 推荐(0)

vue3 实现移动端h5多个输入框填入验证码功能（非常简单）

摘要：完整的代码, 可以复制引用效果页面内容 <ul class="lists" ref="inputs"> <li class="list" :class="{active: data.value[0]}">{{data.value[0]}}</li> <li class="list" :class 阅读全文

posted @ 2023-07-27 00:07 完美前端阅读(975) 评论(0) 推荐(0)

vue3使用 i18n

摘要：官方文档链接 Vue I18n 官方文档安装 Vue I18n npm install vue-i18n 创建语言文件 // lang/zh.ts export default { login: { login: '登录', userName: '用户名', password: '密码', }, 阅读全文

posted @ 2023-05-13 13:27 完美前端阅读(1859) 评论(0) 推荐(0)

vue3 directive自定义指令

摘要：import store from '../store' // 自定义Vue3指令，用于权限控制 export default { install(app) { // 权限控制指令 // 如果当前用户没有相关权限，则删除该模块 app.directive('permission', { mounte 阅读全文

posted @ 2023-04-01 23:35 完美前端阅读(363) 评论(0) 推荐(0)

keep-alive组件使用

摘要： <keep-alive> <home></home>  </keep-alive> Vue3 路由部分 <!-- 在Vue3中，通过v-slot来获得当前路由的Compone 阅读全文

posted @ 2023-04-01 19:07 完美前端阅读(21) 评论(0) 推荐(0)

defineExporse vue3中一个由子组件导出数据让父组件调用的方法

摘要：子组件 <script setup> import { ref, reactive } from 'vue' const isFlag = ref(false) const data = reactive({ name: 'tom', age: 18 }) //把数据导出 defineExpose( 阅读全文

posted @ 2023-04-01 13:33 完美前端阅读(552) 评论(0) 推荐(0)

vue2 拖拽组件

摘要：完整的代码, 可以复制引用 Vue 右上角拖拽的客服图标组件 <template>  <a :href="$store.state.user.info.kefulink" class="server" ref="drawable" :style="{right: rig 阅读全文

posted @ 2022-06-04 19:57 完美前端阅读(1642) 评论(0) 推荐(0)

vue 国家地区组件，带国家图标，带搜索

摘要：完整的代码, 可以复制引用 <template>  <view>  <view class="popup-bg" @click="getCountrieCode"></view>  <vi 阅读全文

posted @ 2022-05-22 18:55 完美前端阅读(747) 评论(0) 推荐(0)

html播放youtube

摘要：嵌入YouTube视频 iframe代码 <iframe width="100%" style="min-height: 260px;position: absolute;top: 0;bottom: 0;margin: auto 0;" src="https://www.youtube.com/e 阅读全文

posted @ 2022-05-07 02:59 完美前端阅读(228) 评论(0) 推荐(0)

html中使用引入vue公共组件

摘要：问题描述在一个使用传统 `.html` 文件搭建的vue项目中，Vue 只被用作数据渲染工具。每个页面都有相同的 header 和 footer，导致有大量重复代码。现在的目标是将 header 和 footer 提取出来，使代码更加整洁。解决办法 1. 将公共部分（如 header 和 fo 阅读全文

posted @ 2022-04-03 19:27 完美前端阅读(1506) 评论(0) 推荐(0)

html中使用vue 和 vue模块

摘要：#### 在Vue中使用http-vue-loader加载组件要使用vue组件的话，需要引入http-vue-loader.js 要在服务器的环境下打开开发时本地服务器或 idea打开 HTML结构 <!DOCTYPE html> <html lang="en"> <head> <meta c 阅读全文

posted @ 2022-03-10 20:25 完美前端阅读(1404) 评论(0) 推荐(0)

网页移动端 vue-video-player 视频播放器使用记录

摘要：完整的代码, 可以复制引用引入视频播放器插件 npm i vue-video-player -D import VideoPlayer from 'vue-video-player' require('video.js/dist/video-js.css') require('vue-video- 阅读全文

posted @ 2022-03-03 15:23 完美前端阅读(1566) 评论(0) 推荐(0)

vue3 axios

摘要：完整的代码, 可以复制引用 import axios from 'axios'; // 引入axios库 import router from '../router'; // 引入vue-router import Utils from '../utils/utils'; // 引入自定义的工具函数阅读全文

posted @ 2021-10-27 23:03 完美前端阅读(247) 评论(0) 推荐(0)

vue3 路由

摘要：完整的代码, 可以复制引用 vue-router库的相关功能 // 导入vue-router库的相关功能 import { createRouter, createWebHistory } from "vue-router"; // 导入Vuex store import store from ". 阅读全文

posted @ 2021-10-27 23:02 完美前端阅读(277) 评论(0) 推荐(0)

vue3 main.js

摘要：// 导入Vue 3的createApp函数 import { createApp } from 'vue'; // 导入主组件、路由、Vuex存储、axios配置和API工具 import App from './App.vue'; import router from './router/ind 阅读全文

posted @ 2021-10-27 23:00 完美前端阅读(1653) 评论(0) 推荐(0)

完美前端

随笔分类 - vue3.0