vue element-ui form 表单组件常用的2种校验方式（手动和自动校验）
摘要：前言 我就偷个懒直接贴代码了，关键地方都有注释，如果看不明白，那一定是我代码和注释写的有问题 方式一：通过给 el-form 表单绑定 rules 属性来实现 <template> <div> <el-form :inline="true" :model="formInline" :rules="r
阅读全文
vue element-ui 基本使用和按需加载的2种方式（推荐安装插件的方式）
摘要：element-ui官网：https://element.eleme.cn/#/zh-CN/component/installation 安装 npm install element-ui -S 不太清楚这里为什么是 -S 的朋友可以看看我的这篇文章 npm install -D 和 - S，--s
阅读全文
vue 中如何使用基于 echarts 的 echarts-wordcloud 插件开发词云图
摘要：echarts4 官网：https://echarts.apache.org/v4/zh/option.html#series-scatter.coordinateSystem echarts5 官网：https://echarts.apache.org/ echarts-wordcloud 词云图
阅读全文
解决 vue 报错:This dependency was not found
摘要：最近遇到一个报错，如下图 提示让我安装 default-passive-events，而我之前为了祛除谷歌浏览器控制台警告，已经安装并引入了 default-passive-events 谷歌浏览器消除Passive Event Listeners（被动事件警告）的方法 但没过多久又提示我安装，网上
阅读全文
vue 中使用 eslint 常见的 4 个报错小结
摘要：前言 eslint 是什么? 一个用来识别 javascript 语法规则和代码风格的检查工具, 以避免一些如拼写或语法错误等低级错误的发生，并统一代码风格 但在实际开发中，可能总是遇到一些莫名的报错，这跟个人编码习惯也有一定关系，因为 eslint 有着严格的规范。 通常有 4 个常见的报错，有时
阅读全文
vue 中的字体图标如何使用 v-for 循环
摘要：现在有这样一个需求，把下面底部列表用 v-for 做循环 上图图标都是字体图标，所以在循环时不能使用 Font class 这样写，运行后不会显示字体图标，而是直接显示字符串 如果改成 iconfront.css 中 content 的值，行不行呢 还是不行，这样运行会报错，提示无用的转译， \e
阅读全文
vue3使用ant-desgin-vue遇到的问题总结（持续更新）
摘要：1. 如何引入icon 首先安装 npm install --save @ant-design/icons-vue 然后引入 import { CloudDownloadOutlined } from '@ant-design/icons-vue’; 接着注册 最后使用即可 2. ant-desgi
阅读全文
vue安装Vue Devtools的2种方法
摘要：方法一：GitHub官网，https://devtools.vuejs.org/guide/installation.html （需要FQ） 方法二：下载安装.crx扩展文件，直接拖拽安装（无需FQ） 下载链接: https://pan.baidu.com/s/10FGks3pWOXX4JwnJ-T
阅读全文
vue实际项目开发中，容易被小白忽视从而给自己埋坑的小细节
摘要：1. 不要用关键字或保留字作为创建的组件名称, 会与html元素冲突，大小写都会报错，如下图 而造成上述报错的原因是像下图一样创建了.vue组件 如下图这样都可以，关键是和html元素区分开来 2. 如果出下图报错，一般为2个原因，import引入路径不正确或不存在，或缺少了某个包，可以npm in
阅读全文
2022 vue-cli3.x和4.x版本如何安装和创建项目
摘要：1.安装命令 npm install @vue-cli -g 注：以前安装是vue-cli为2.x版本，现在是@vue/cli，为3.x和4.x版本； 如果已安装了vue-cli，需要先全局卸载 npm uninstall vue-cli -g 官方说明 注：使用vue --version 或 vu
阅读全文
vue实现切换的3种方法（tab切换选项卡，点击按钮显示不同登录组件、）
摘要：前言 在日常实际开发中，常会遇到组件切换的需求，如： 1. 点击按钮后，登录组件的切换，切换不同登录方式； 2. tab切换选项卡； 方法一：使用 v-if, v-else（点击按钮显示不同登录组件） <!DOCTYPE html> <html lang="en"> <head> <meta cha
阅读全文
给你一个Vue项目，如何在本地跑起来？
摘要：必须安装：node.js、npm 推荐安装：cnpm (淘宝镜像，服务器在国内，下载更快) node官网下载: http://nodejs.cn/download/ 注：1. npm不用单独安装，node已经将其包含在内； 2. node -v; npm -v; 查看安装版本，如果有，说明安装成功；
阅读全文
vue中使用better-scroll的2种方式简述
摘要：better-scroll官方文档说明：https://ustbhuangyi.github.io/better-scroll/#/examples/en 方法一：官方文档推荐的方法 <template> <div class="wrapper"> <ul class="content"> <li>
阅读全文
vue中toggle切换的3种写法
摘要：前言：查看下面代码，在任意编辑器中直接复制粘贴运行即可 1：非动态组件（全局注册2个组件，借用v-if指令和三元表达式） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>toggle切换-非动态组件方式</title> <scr
阅读全文
vue怎么给自定义组件绑定原生事件
摘要：下面主要以4个示例Demo演示（示例代码JS引用的Vue CDN），建议小伙伴直接复制示例代码运行查看， 赶时间的小伙伴可直接往下拉，看示例demo4 注：全局或局部注册的组件称为子组件，其中声明的组件名称（如下demo中的child）是一个自定义组件 Demo1-直接给父组件绑定原生事件 <!DO
阅读全文
简述vue props和非props的2个特性
摘要：props的2个特性 ①：父组件通过属性的方式传值（比如下面截图中的content）给子组件，content不会显示在DOM节点中 ②：父组件向子组件传递值（content），子组件通过props接收后，可在子组件中直接通过{{}}（插值表达式）或this.content获得content中的内容
阅读全文
使用vue组件需要注意的4个细节
摘要：细节1：table（表格）中直接引用自定义组件出现的bug 如上图，tr本应在tbody中面，现在却是同级。造成的原因是h5规定table里必须有tbody，tbody中必须有tr， 当tbody中引入自定义组件，浏览器解析后就出现了上述问题 解决方法：依然在tbody中使用tr，同时使用vue的i
阅读全文
vue中template的作用及使用
摘要：先来看一个需求：下图div用v-for做了列表循环，现在想要span也一起循环，应该怎么做？ 有3种方法可以实现 ①：直接用v-for对span也循环一次（该方法虽然可以使用，但不要用这种方式，因为以后你会哭） ②：在div和span外面包裹一个div，给这个div加循环（该方法会额外增加一个多余的
阅读全文
简述vue中父子组件是怎样相互传递值的（基础向）
摘要：前言 首先，你需要知道vue中父组件和子组件分别指的是什么？ 父组件：vue的根实例——用new Vue()构造函数创建的vue实例（实例会有一个挂载点，挂载点里的所有内容可理解为父组件的内容） 这里以root为挂载点，root里包含的所有内容可称为模板，即我们常说的父组件 子组件：用Vue.com
阅读全文
Vue devtool插件安装后无法使用，提示“vue.js not detected”的解决方法
摘要：vue devtool下载 极简插件 github vue devtool安装 点击谷歌浏览器箭头所指图标-更多工具-扩展程序 ①：直接将后缀为crx的安装包拖进下图区域即可自动安装 ②：也可以点击开发者模式，然后选择加载已解压的扩展程序选项导入安装包 vue devtool安装后无法使用的解决方法
阅读全文