VueJS
绝世唐门三哥
改变世界的程序猿@三哥
展开
-
CSS---序号使用css设置,counter-reset、counter-increment、content配合实现备注文案的序号展示
其中注意如果是全数字的话,不会换行,需要自己修改使用哦!原创 2024-09-13 13:57:18 · 426 阅读 · 0 评论 -
Vue3---多种组件传值方式总结
在Vue 3项目中,Vuex是一个常用的状态管理库,它可以帮助你在多个组件之间共享状态。结合上述代码,您可以创建一个简单的Vue 3应用程序,其中包含一个用来发表消息的组件和另一个用来订阅消息的组件。状态会相应增加或减少,并且由于状态的响应式特性,所有使用了该状态的组件都会自动更新显示。如果需要,可以创建一个中间组件,但在这个示例中,我们将直接从父组件跳转到孙子组件。最重要的一点,想要ref传值赋值,一定要用方法的方式去调用,直接赋值无效!的示例,其中一个父组件提供数据,一个孙子组件通过注射获取这些数据。原创 2024-08-14 17:18:10 · 720 阅读 · 0 评论 -
Vue---vue3+vite项目内使用devtools,快速开发!
我们在前期开发时,一般使用chrome或者edge浏览器,会使用vue-devtools或react-devtools(此插件个人未使用,可百度下是否可内嵌入项目!)来审查vue项目;这个需要安转浏览器插件才可支持!故此本博客的目的是,如果已经开发或者维护阶段的vue+vite项目如何临时插入该插件使用!创建vue3项目时,会提示是否安装devtools的插件!原创 2024-07-24 15:04:09 · 582 阅读 · 0 评论 -
UI组件库---vantList组件接口多次调用大坑问题
问题描述:当使用refesh下拉操作时,vanlist组件会多次调用(大概三次)!原创 2024-07-09 12:47:01 · 479 阅读 · 0 评论 -
Vue---计算属性computed(传参使用)
对于任何复杂逻辑,你都应当使用。原创 2019-12-12 16:43:46 · 271 阅读 · 1 评论 -
Vue---开发过程中,组件引入后页面无渲染(一直找了好久,页面没报错,完全没头绪!)
事件的起因:在新年的某一天,一个新需求要开发。当我建完分支随便复制了一个通用的页面,路由页面的权限都配置好了,但是页面一直不渲染!整整纠结了半天时间,最后和同事一起去确认排除页面写法问题,最终解决了该次事故!!!前言目前百度搜索啥的,搜到的基本都是因为名称大小写或者起名字语义化问题引起的,对应的解决方案基本就是:修改导入变量名或首字母改为大写!!!但是本人遇到的不是那个问题,很奇葩很难发现的一个错误!内部错误,不显示在页面的报错!原创 2023-02-08 17:47:37 · 1112 阅读 · 2 评论 -
Vue---vue项目中启动后报错Network: unavailable的解决办法
在vue项目根目录下找到或创建 vue.config.js 文件,在devServer配置里面添加public。vue项目run命令后,只有localhost访问,network不能访问,启动后不显示对应的IP地址。如下代码所示: public:‘192.168.1.2:8080’3. 之后完美运行!原创 2023-01-05 16:05:09 · 3014 阅读 · 0 评论 -
Vue---自定义v-model的写法实现
子组件中这样写:props: {return ''}},// 自定义modelmodel: {},methods:{// 事件名要和model属性中event事件名一致},}子组件模板中:父组件模板中子组件标签上:此时父组件中打印myname值就会和子组件的输入值保持双向绑定!!!原创 2022-11-16 15:52:28 · 802 阅读 · 0 评论 -
Vue---vuex状态管理工具的前生今世
vuex是一个专为 Vue.js 应用程序开发的状态管理模式 + 库,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。原创 2022-10-24 23:48:15 · 857 阅读 · 7 评论 -
Vue---elementui实现dialog拖拽指令,随拿随用
经过上面的两个文件配置,在任意vue单文件中:dialog组件上添加 v-dialogDrag 即可!上面的index.js文件直接导入到main.js中。直接上代码:index.js。原创 2022-08-29 16:57:50 · 394 阅读 · 0 评论 -
Vue---keep-alive组件的使用,缓存组件
匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。最多可以缓存多少组件实例。一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。是个抽象组件,它自身不会渲染一个DOM元素,也不会出现在组件的父组件链中。包裹动态组件时,会被缓存不活动的组件实例,而不是销毁它们。不会在函数式组件中正常工作,因为它们没有缓存实例。主要用于保留组件状态或避免重新渲染。...原创 2022-08-12 17:38:38 · 536 阅读 · 0 评论 -
Vue---vue动态组件与异步组件的使用
在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染。允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义。,当在这些组件之间切换的时候,你有时会想保持这些组件的状态。以避免反复重渲染导致的性能问题。...原创 2022-08-12 17:39:56 · 290 阅读 · 0 评论 -
Vue---11种组件传值方式总结,总有一款适合你
以上示例代码展示了Vue 2中不同组件间通信方法的实现方式。注意,对于Pinia和Vue 3+特有的通信方式,这里没有提供Vue 2的示例代码。原创 2022-08-08 17:49:20 · 2233 阅读 · 0 评论 -
node---通过配置统一前端项目的 Node 版本和包管理器
以上配置完成后,npm install 试试吧,错误的 Node.js 将直接退出!以上配置完成后,可以再乱用 (yarn、npm、pnpm) 试试。锁定项目 Node 版本。原创 2022-08-04 14:27:19 · 823 阅读 · 0 评论 -
Vue---.env文件配置环境变量的相关问题
一般会建立两个文件:.env.development和.env.production在该文件中注释采用 # xxx。原创 2022-08-04 10:29:01 · 324 阅读 · 0 评论 -
Vue---vue快速安装elementui的几种方式总结
1. 常规安装2. 快速安装3. 按需引入组件3.1 main.js中, 之后按需导入组件原创 2022-07-14 17:35:50 · 884 阅读 · 0 评论 -
Vue---vue3和vue2的区别有哪些?极限总结,值得拥有.
1.生命周期的变化 2.支持多根节点3.异步组件 出现问题如下: 实例代码如下:4.Teleport 6.响应式原理7.虚拟DOM8.事件缓存9.Diff 优化10.打包优化11.自定义渲染API12.TypeScript 支持其他细节可以查看这个,关于虚拟dom和diff(即7到12的更深层原理看这个公众号的详细介绍,大佬的总结!)面试官问:Vue3 对比 Vue2 有哪些变化?...转载 2022-07-08 15:02:31 · 1141 阅读 · 0 评论 -
Vue---vue中watch对象监听属性deep与immediate的使用
主要针对值为函数handler监听来使用的 deep:trueimmediate:true这里一般使用最多的是deep:true,处理对象内部属性的变化,常用写法如下:原创 2022-07-06 10:36:08 · 1560 阅读 · 0 评论 -
Vue------vue3中ref函数的使用(ref获取元素undefined)
答:不一致可以的,但是最终return中的名字要和ref中的值一致!!!原创 2022-07-12 15:23:53 · 7996 阅读 · 4 评论 -
Vue---vue3的setup函数的使用
vue3的setup函数的使用原创 2022-06-27 11:17:16 · 7845 阅读 · 0 评论 -
Vue---Vue2/Vue3生命周期总结
Vue2/Vue3生命周期总结!!!原创 2022-06-24 15:08:07 · 882 阅读 · 0 评论 -
Vue------this.$router.back()、this.$router.go()的异同
返回上一个页面:1.$router.back()2.$router.go()区别点在于:go(-1): 原页面表单中的内容会丢失;this.$router.go(-1):后退+刷新;this.$router.go(0):刷新;this.$router.go(1) :前进 back(): 原页表表单中的内容会保留;在返回界面传递参数;this.$router.back():后退 ;this.$router.back(0) 刷新;this.$router.back(1):前进原创 2022-05-27 20:34:05 · 5217 阅读 · 3 评论 -
vue---Parsing error: No Babel config file detected for D:\AAA_ProjectFiles\ > Eslint报错一个属性解决问题
刚初始化的项目,为啥会出现下面的问题Parsing error: No Babel config file detected for D:\AAA_ProjectFiles\MYPro\big_front_end\login_template\src\views\HomeView.vue. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can fin原创 2022-05-14 13:06:11 · 2568 阅读 · 3 评论 -
vue------关于vue官方文档的个人小结
说明:这里说的是@vue/cli脚手架构建的文件何时使用public文件夹你需要在构建输出中指定一个文件的名字。 你有上千个图片,需要动态引用它们的路径。 有些库可能和 webpack 不兼容,这时你除了将其用一个独立的<script>标签引入没有别的选择。审查项目的 webpack 配置vue-cli-service暴露了inspect命令用于审查解析好的 webpack 配置。1.将其输出重定向到一个文件以便进行查阅:vue insp...原创 2020-11-30 10:42:45 · 413 阅读 · 0 评论 -
Vue------跑马灯效果
跑马灯代码段:(可直接复制使用)<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <me...原创 2019-03-29 15:04:11 · 1048 阅读 · 0 评论 -
vue------axios在vue中采用promise封装常用方法的代码
import axios from 'axios';import router from '@/router'import store from '@/store'import {message, Modal} from 'ant-design-vue'import 'nprogress/nprogress.css'let baseURL = process.env.NODE_ENV === '"development"' ? process.env.BASE_URL : 'https://x原创 2020-06-09 14:41:33 · 645 阅读 · 0 评论 -
Vue---封装axios为promise的方式,实现链式调用
1. 封装axios为promise的方式(utils/index.js)记得开发前提前封装好方便后期维护和添加新的接口调用哦!2. 实际调用使用(utils/api.js)3. vue文件中使用 (home.vue)原创 2022-05-01 16:30:34 · 3809 阅读 · 0 评论 -
Vue-------$nextTick()的使用场景(粉丝福利)
先看官方的文档说明:声明周期钩子函数Created和Mounted:需要注意的是,在created和mounted 阶段,如果需要操作渲染后的Dom视图,也要使用nextTick方法。mounted// 该钩子在服务器端渲染期间不被调用。类型:Function详细:实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上,当 mounted 被调用时 vm.$el 也在文档内。实例:mounted: function ()原创 2022-02-24 11:04:02 · 1317 阅读 · 1 评论 -
Vue------router传参params方式传值一直为空的解决方案
直奔主题:代码如下这里是其他情况的入口,感兴趣的同学或码友可以一起浏览一下https://liyangtao.blog.csdn.net/article/details/115008014关键点:name名为组件创建时的name,要完全一致!!!采用params的方式去传参! { // LyInusreAddInfo.vue 投保信息房屋添加页 path: "/lyhousenew/lyinsureinfo/add", name: "LyInusreAdd.原创 2022-02-21 14:14:33 · 6248 阅读 · 0 评论