随笔分类 - Vue
前端框架
摘要：你可以看看https://www.kancloud.cn/liuwave/quill/1434141 或者看看别人的文章 我的项目是vu3的 template的是这样的 <el-form-item label="中文详情" prop="content"> <div ><quill-editor re
阅读全文
摘要：忘了说：z-index 要注意一下， menuNumber 1切换是通过handleChangeMenu的事件改变的 这个的类名是tailwind css的，主要看这里，对应上面的图片 <el-collapse-item name="1" class="relative"> <template #t
阅读全文
摘要：这个搭建起一个vue项目 https://www.cnblogs.com/hechunfeng/p/17249626.html 1. 因为使用的是vite，所以配置上如下，看server， env.VITE_HTTPURL是里面的开放环境或者生成环境的变量 这个是vite.config.ts的内容
阅读全文
摘要：文档 https://cn.vuejs.org/guide/essentials/component-basics.html#defining-a- <script setup> import Home from './Home.vue' import Posts from './Posts.vue
阅读全文
摘要：https://gitee.com/ChinaGoogles/pinia_taske 上面链接案例 效果图
阅读全文
摘要：import { defineConfig } from 'vite' //Install node types before calling below import import {fileURLToPath} from "url"; import path from 'path'; impor
阅读全文
摘要：method的方法 getCateApi async getCateApi(){ // 用户快速切换的时候取消上一个请求,要不然太卡了 const axiosSource = this.axios.CancelToken.source(); this.cancelRequest = { cancel
阅读全文
摘要：https://www.youtube.com/watch?v=0jk3aleuwUM 项目地址：https://gitee.com/ChinaGoogles/Vue3ViteTailwindTypescript Vite Vue3 Vue Router4 Typescript Pinia Tail
阅读全文
摘要：每次刷新背景图片都不一样 下面是vue的，不过逻辑都一样，只是定义方式不同而已 data是这个 // 随机数生成 randomNumber:'', 这个是在method方法里定义的，其实就是方法。 // 随机照片,每次刷新都是不一样的照片 randomNumberImg(){ this.random
阅读全文
摘要：小技巧 https://www.jianshu.com/p/606e37db18f3 https://cloud.tencent.com/developer/article/1552020 https://www.uviewui.com/guide/i18n.html https://juejin.
阅读全文
摘要：解决方案 在外面加上 v-if,这个是判断你是否存在，这样错误一般就消失了 <template v-if="item.user"> <el-avatar shape="circle" :size="80" fit="fit" :src="item.user.avatar"></el-avatar>
阅读全文
摘要：模仿他的，项目地址 https://github.com/iamshaunjp/vuex-playlist 视频地址 https://www.youtube.com/watch?v=BGAu__J4xoc&list=PL4cUxeGkcC9i371QO_Rtkl26MwtiJ30P2&index=1
阅读全文
摘要：css使用 tailwindcss <script src="https://cdn.tailwindcss.com"></script> 全部代码 <template> <div class="m-auto"> <h1 class="text-2xl my-2 text-center">Vue C
阅读全文
摘要：https://www.npmjs.com/package/vue-social-sharing/v/2.4.7 第一步，按照vue-social-sharing npm install --save vue-social-sharing@2.4.7 第二步，导入使用 第三步，在html里面粘贴如下
阅读全文
摘要：注意：script里面的vue.js的引用文件最好自己找个线上的 <!doctype html> <html> <head> <title>Check uncheck all Checkboxes with Vue.js</title> <script src="vue.js"></script>
阅读全文
摘要：第一步，先设置ref，和移入事件 <div class="story-container" ref="storyContainer"> <div class="item-box" v-for="(item,index) in testImg" :key="index" @mouseover="sho
阅读全文
摘要：效果图 iconfont 哪些图标自己加，这个是要滚动到下面才出现箭头的，最好高度超过 100vh 全部代码 <template> <div class="go-to-top"> <div class="box"> <a href="javascript:void(0);" class="chat"
阅读全文
摘要：最常见的4种状态 1.Creation 2.Mounting 3.Updating 4.Unmouting 通常create用来放API的 如果是在Mount是挂载后操作DOM的 我们搞清楚他的生命周期顺序，父组件挂载在app 父组件里面嵌套子组件，父组件使用了v-if操作数据，事件切换按钮 重点，
阅读全文
摘要：这里有两个子页面是重复功能的，一个是点击事件，一个是鼠标移入事件 点击事件 鼠标移入事件 效果 现在使用mixins 新键一个文件夹minxs,再建一个js文件 再导入使用 可以覆盖
阅读全文
摘要：1. 首先我们新建一个Popup.vue,这个组件有一个关闭按钮。 这个组件十子组件传值个父组件，通过$emit发送值给父组件。 2.父组件导入使用组件，定义点击事件
阅读全文
