vue
samscat
这个作者很懒,什么都没留下…
展开
-
vue3载入动画aos
vue3载入动画原创 2023-03-04 17:02:32 · 1525 阅读 · 2 评论 -
nuxt ssr打包和部署
nuxt之ssr打包部署原创 2022-06-20 17:38:58 · 551 阅读 · 0 评论 -
vue项目引入less报错
问题描述:项目依赖“vue”: “^2.6.10”,“vue/cli-service”: “^3.0.4”,安装了"less": “4.1.1"和 “less-loader”: “^7.0.2”,出现如下报错解决方案:1.安装"style-resources-loader”: “^1.3.3”,2.降低less-loader版本为5.0.0...原创 2021-06-25 17:38:51 · 549 阅读 · 0 评论 -
记录一个奇怪的bug:缓存组件跳转之后出现组件复制
在app.vue里面设置了组件缓存进入首页之后跳转市场页面,再跳回首页时其中一个组件被复制到了首页顶部,跳转其他页面的时候这个部分也会被带到其他页面的顶部。而且n次跳转会复制n个组件,其他的组件没有出现这个现象。。。这个市场组件是被缓存的,然而被复制的这个html片段只是这个组件的一个html片段,并不是一个单独的组件,被复制的html片段如下普普通通的一段html代码,并没有什么特别之处,为什么独它被copy了呢?我万分不理解。最终我解除了这个组件的缓存状态,于是不再出现此种现象。...原创 2022-04-21 15:37:51 · 731 阅读 · 0 评论 -
vue3 组件keep-alive使用注意事项
vue3路由缓存和过渡动画使用原创 2022-04-20 17:47:57 · 931 阅读 · 0 评论 -
element中的select获取选中的 label
因为element中的select组件里的change方法只反回选中的value值,当我们还有获取label时就得采取其他的办法。一种方法是通过循环判断选中的value,然后筛选出其中的label, 这种方法比较耗费性能;另一种方法是通过refs获取select的选中值;<script setup>import { ref, getCurrentInstance, onMounted, nextTick } from 'vue'defineProps({ msg: String}原创 2022-03-26 17:20:52 · 5017 阅读 · 0 评论 -
vue3 + vite 导入公共scss文件无效的问题
以下是vite.config.js的相关配置 import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from 'path'const isProduction = false;// https://vitejs.dev/config/export default defineConfig({ // 在生产中服务时的基本公共路径 base: isProduction ? './原创 2022-03-22 16:39:43 · 4803 阅读 · 0 评论 -
vue3使用element form验证
<template> <div class="login-container"> <h2>登录</h2> <el-form ref="form" :model="loginForm" :rules="rules" label-width="80px"> <el-form-item label="账号" prop="username"> <原创 2022-02-18 18:03:23 · 1391 阅读 · 0 评论 -
vue3使用echarts5
<template> <div id="echarts168" :style="{width: nwidth+'%', height: nheight+'px'}"></div></template><script lang="ts">import * as echarts from 'echarts'import {onMounted, defineComponent, nextTick } from 'vue'const pr原创 2022-02-18 14:50:58 · 1033 阅读 · 0 评论 -
vuex的替代插件pinia
pinia 是vuex的简化版,兼容vue2和vue3使用参考:https://www.vue-js.com/topic/60d9e7754590fe0031e59e29官网链接:https://pinia.vuejs.org/core-concepts/state.html#resetting-the-state原创 2022-02-09 18:31:49 · 826 阅读 · 0 评论 -
vue deep样式穿透使用总结(2022)
在vue2中使用 ::v-deep::v-deep .el-col { margin-bottom: 20px;}’ >>> ‘和’ /deep/ '支持已弃用。在vue3中::v-deep可以使用但是不推荐使用,官方推荐v-deep(.className)::v-deep(.el-col) { margin-bottom: 20px;}// 缩写:deep(.el-col) { margin-bottom: 20px;}...原创 2022-02-09 17:21:58 · 12586 阅读 · 1 评论 -
vue 父子组件传值
父传子:父组件 通过 v-bind 绑定属性传值给子组件,使用 : 缩写;子组件 通过props 接收父组件的传值。子传父:子组件 通过$emit(‘keyName’, value) 传值给父组件;父组件 通过在子组件上绑定v-on:keyName =“getSomething” 获取,使用@ 缩写;其他方法:vue bus: 通过vue事件总线的方法,可以跨级传递,但是vue3不支持;provide / reject: 推荐只传不改的,因为通过这个方法传递的数据失去了即时响应的特性;vu原创 2022-01-19 15:21:25 · 3600 阅读 · 0 评论 -
vue创建项目解除git关联
在用vue-cli创建项目时默认了git关联, 如果不想一开始就关联git, 创建项目时需要使用vue create AppName -ngit 远程关联的一些命令:查看远程分支路径git remote -v解除远程关联git remote remove origin添加远程关联git remote add origin https://xxxxxxx/helloworld.git...原创 2022-01-10 10:30:16 · 2542 阅读 · 0 评论 -
vue 路由返回处理
case1: 在路由跳转之前做监听处理// 回退事件监听,可以放在路由Router.beforeEach/beforeRouteLeave 里面window.addEventListener('popstate', () => { // 相关处理,阻止返回上一级或者跳转其他页面},false)case2: 取消路由历史记录this.$router.replace({ path: '/content', query: { searchVal: val }原创 2021-07-08 15:23:11 · 5077 阅读 · 0 评论 -
vue 批量导入组件
import path from 'path'const files = require.context('components/personal', false, /\.vue$/) // components/personal是组件目录const modules = {}// 组件导入files.keys().forEach((key) => { const name = path.basename(key, '.vue') modules[name] = files(key).原创 2021-09-13 21:46:05 · 1059 阅读 · 0 评论 -
vue3之全局变量app.config.globalProperties的使用
在main.js里面配置configconst app = createApp(App);app.config.globalProperties.$user = { name: '梅长苏', weapons: '长剑', title: '刺客'}在template模板中使用<p>姓名:{{$user.name}} </p>在setup中使用const cns = getCurrentInstance()console.log(c.原创 2021-12-15 15:23:47 · 27673 阅读 · 5 评论 -
vue3 setup笔记
setup()接受两个参数:props 和 contextprops是外部传参,响应式数据,如果需要解构需要使用toRefs()context是js对象,非响应式数据,可以直接解构使用,包含attrs/emit/expose/slotssetup内返回的参数暴露给模板,可以直接被methods内定义的方法和外面的生命周期函数获取,但是不是响应数据,如果要创建响应式数据需要使用ref 或者reactive函数转变setup(props, {attrs, emit,expose,slots}) {.原创 2022-01-07 21:30:00 · 662 阅读 · 0 评论 -
vue3的使用及其新特性
1. 应用创建vue2:new Vue({ el: '#app', router, store, render: h => h(App)})vue3:createApp(App) .use(router) .use(vuex) .use(ElementPlus) .mount('#app')2. router的使用vue2:// router.jsimport Vue from 'vue'import Router from原创 2022-01-06 18:05:34 · 971 阅读 · 0 评论