Vue
关注
分享
扫一扫
vuejs
Eason_qyl
......
展开
-
vue 封装一个Dialog组件
基于element-plus封装一个Dialog组件。原创 2023-09-11 17:19:05 · 842 阅读 · 1 评论 -
vue 封装Form 表单组件
在components目录下新建一个Form.vue。基于element-plus封装一个表单组件。原创 2023-09-11 17:08:36 · 504 阅读 · 0 评论 -
vue 封装Table组件
基于element-plus UI 框架封装一个table组件原创 2023-09-11 17:01:01 · 1047 阅读 · 2 评论 -
vue 基于element-plus el-button封装按钮组件
封装组件原创 2023-09-01 16:48:54 · 1552 阅读 · 0 评论 -
vue 插槽Slots
元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。原创 2023-09-01 12:48:13 · 542 阅读 · 0 评论 -
vue3 pinia持久化插件使用
vue3 pinia的持久化插件。原创 2023-08-30 17:59:52 · 593 阅读 · 0 评论 -
vue3中mitt.js使用
vue3 mittjs原创 2023-08-30 11:54:03 · 2016 阅读 · 0 评论 -
vue3实现并挂载axios
vue3 挂载 axios原创 2022-12-06 20:52:03 · 2018 阅读 · 0 评论 -
vue3(二)
vue3原创 2022-12-06 16:24:36 · 501 阅读 · 0 评论 -
Vue深度学习总结
1. Vue生命周期解读这一部分参考自Vue官方文档以及生命周期详解官网的生命周期图示例如下： 测试代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> ...转载 2018-07-10 21:56:38 · 691 阅读 · 0 评论 -
vue 提交的表单是对象是： {__ob__: Observer}
最近在做项目提交form 表单时发现console.log() 打印的是{__ob__: Observer}，于是去网上查了下，__ob__: Observer这些数据是vue这个框架对数据设置的监视器，一般都是不可枚举的。console.log这样的打印函数，被打印的变量会执行自身的toString()，这样，即便内部属性是不可枚举，实际上也能看到解决方案就是通过：JSON.parse(JSON.stringify(xxx)) 得到深拷贝后的原始对象...原创 2020-08-04 09:24:26 · 1275 阅读 · 0 评论 -
vue-iview 个人项目
1.登录2.登录进去后，首页：3.员工管理-添加员工4.订单管理-查询订单5.报表统计-第一季度销售收据目前这个项目个人还在继续开发过程中，用的技术主要是Vue + iview + VCharts用到的技术细节：vue指令：v-model, v-bind:click, v-bind:class, v-for, v-cloak, v-show, v-if,...原创 2020-03-01 12:55:06 · 428 阅读 · 1 评论 -
vuex 模块化
https://segmentfault.com/a/1190000019924674https://www.wodecun.com/blog/7874.html原创 2020-08-04 09:31:40 · 160 阅读 · 0 评论 -
vuex-persistedstate 持久化插件
既然是一个插件，那首先我们得安装它，然后再使用npm install --save vuex-persistedstate// 或npm i -S vuex-persistedstate在 store 文件夹下的 index.js 文件中我们引入：import Vuex from 'vuex'import Vue from 'vue'import createPersistedState from 'vuex-persistedstate'import * as Cookies from原创 2020-08-19 11:09:11 · 1004 阅读 · 0 评论 -
[Vue warn]: The data property "dialogVisible" is already declared as a prop. Use prop default value
在使用Vue开发中，使用组件时报了这么一个错误：[Vue warn]: The data property "dialogVisible" is already declared as a prop. Use prop default value 翻译过来就是：数据属性“dialogVisible”已经声明为一个prop。使用prop默认值代替。经过查找是在组件传值时，传递过来了一...原创 2018-12-14 17:29:01 · 12155 阅读 · 0 评论 -
Vue2.0 $set()的正确使用方式
vue2.0 给data对象新增属性，并触发视图更新如下代码，给 student对象新增 age 属性data () { return { student: { name: '', sex: '' } }}123456...转载 2018-07-07 17:36:08 · 840 阅读 · 0 评论 -
前端调用后端接口导入Excel
需求：前端需要增加一个导入按钮，导入既定的Excel模板数据，后端接口请求方法：post参数格式：FormDataparam: { name: 'zhangsan'， code: '001', id: 'A001', file: excelData // 后端需要的二进制流}分析：既然是Excel的导入或者导出首先我们就要安装excel的插件xlsx首先全局安装xlsx插件npm install xlsx --save前端代码：我们还是使用element-ui的 el-up原创 2022-04-27 11:17:33 · 6646 阅读 · 3 评论 -
route config "component" for path:cannot be a string id. Use an actual component instead
最后检查半天发现是在配置路由的时候，直接将component: "MyComponent" //报错所在写成了字符串的形式。正确：component: MyComponent //注意不是字符串形式，是别名...原创 2020-02-22 10:57:58 · 24091 阅读 · 0 评论 -
vue 回车查询第一次会清空查询条件
vue 容易疏忽的问题,当form只有一个input 文本框回车查询，查询条件会被清空原创 2022-07-12 10:50:23 · 916 阅读 · 0 评论 -
Vue slot 学习总结
为什么要使用slot? slot解决了什么问题？首先，父组件可以给子组件传递数据，但却不能传递DOM节点或者是组件，为了解决这个问题，slot诞生了。solt是Vue的内置组件，也就是我们俗称的插槽。slot其实就是父组件传递的DOM结构；当组件渲染的时候，定义在子组件模板中的 元素将会被替换为内容中的内容,这个内容可以是多个DOM节点，也可以是其他组件详情可查看官网解释：https:...原创 2020-02-22 17:36:34 · 354 阅读 · 0 评论 -
Vue 给标签动态绑定一个属性变量
在vue中我们有时候需要给一个普通标签动态绑定一个属性变量那么可以使用模板字符串语法：<span :title="**`${drug.itemname} ${drug.itemgg}`**">{{ drug.itemname }} {{ drug.itemgg }}</span>原创 2020-05-22 14:55:55 · 3629 阅读 · 1 评论 -
vue 父子组件传值,子组件获取不到props值
问题: 父组件props传值给子组件，子组件在created中获取不到传过来的值关于props传值，这里不赘述直接看官网：https://cn.vuejs.org/v2/guide/components-props.html分析：因为父组件props传给子组件的值是通过后端接口返回的数据，也就是说是异步返回的数据，那么问题来了，你怎么知道后端什么时候请求完成，然后完成赋值呢？所以导致取值不同步，当然获取不到。解决方案：1.可以用setTimeout来延时，等异步请求数据完成了，在赋值(不推荐)写一原创 2020-08-31 17:40:18 · 9532 阅读 · 0 评论 -
Type of the default value for ‘ItemLists‘ prop must be a function (vue/require-valid-default-prop)
在 vue 项目中遇到这样一个报错，根据错误消息，默认值 itemList prop 必须是一个函数所以试着将代码改成：props: { itemLists: { type: Array, required: false, default: function() { re...原创 2020-02-22 21:27:02 · 5060 阅读 · 0 评论 -
vue 在父组件中调用子组件的方法
在实际开发中我们有时候不得不在父组件中去操作子组件中的一些方法和属性，这个时候我们就可以用 $ref 来实现：//父组件中<template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div></template> 通过给子组件添加 ref 属性，我们就可原创 2020-07-23 14:36:46 · 2087 阅读 · 0 评论 -
通过具名 slot (插槽) 来显示Dialog 的标题
做项目时遇到一个问题：在Dialog中写入副标题，可是 dialog的title是一个字符串啊，怎么在字符串中嵌入html标签并且加入样式呢？问题：如下图通常我们的写法是这样的：<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center></el-dialog>所以这种情况，我们没法去写副标题，还要加一些样式来区别主标题和副标题，即图中的 2 部分，那怎么办呢原创 2020-08-12 21:53:56 · 3361 阅读 · 0 评论 -
使用 vuex 和 localStorage 保存登录状态
https://www.jianshu.com/p/edea07ebd77chttps://blog.youkuaiyun.com/weixin_43254676/article/details/85774231原创 2020-07-27 15:43:08 · 674 阅读 · 0 评论 -
2020 Vue面试题总结
https://segmentfault.com/a/1190000022603196?utm_source=sf-related原创 2020-07-27 16:19:08 · 253 阅读 · 0 评论 -
vue 子组件调用父组件方法
子组件调用父组件方法(1) 在子组件中直接调用父组件方法：this.$parent.parentMethod();(2) 在子组件中通过emit触发定义在父组件中的方法：this.$eimt(‘parentMethod’, params)(3) 父组件传方法给子组件，子组件直接调用// 父组件中绑定一个方法<template> <div> <child :parentMethod="parentMethod"></child> <原创 2020-09-28 16:00:38 · 306 阅读 · 0 评论 -
vue $attrs 和 $listeners
vm.$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件,在创建高级别的组件时非常有用vm.$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件,在创建原创 2021-05-29 10:17:36 · 489 阅读 · 0 评论 -
vue-element-ui 个人doc文档项目
这是本人用vue + elementUI + axios + vueRouter的做的一个文档项目包括登录，注册，首页，左侧导航，国际化，删除文档，编辑文档等功能，用于个人学习参考。1.登录页面2.注册页面3.4.首页-语言 En 英文文档详情编辑文档...原创 2020-02-29 17:23:40 · 2007 阅读 · 0 评论 -
Vue 爬坑之路（三）—— 使用 vue-router 跳转页面
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。官方文档： https://router.vuejs.org/zh-cn/essentials/getting-started.html ...转载 2018-07-10 21:49:49 · 267 阅读 · 0 评论 -
vue.js中$set与数组更新
由于 JavaScript 的限制，Vue 不能检测以下变动的数组： 当利用索引直接设置数组的某一项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength，不会更新数组。 当然vue中给了解决方法，就是使用 Vue...转载 2018-07-07 17:38:11 · 3524 阅读 · 0 评论 -
Vue实例生命周期中created和mounted的区别
最近刚好在学习Vue.js，在实敲轮播demo时发现了一个当时感觉很奇怪的问题：初始化使用mounted钩子时，只调用了一次，之后就没有调用过了。害我一直以为是自己之后的代码书写有问题，结果自己再敲一遍还是只能初始化调用一次。。。发现这个问题后找找大神们的博客看了看，发现了created钩子的使用。下面就将这次的经历给记录...转载 2018-07-02 21:24:30 · 3740 阅读 · 0 评论 -
vue devtools 安装，调试实践
vue-devtools是一款基于Vue项目的浏览器的扩展插件，用于调试vue项目程序，它可以极大的方便我们的查看和调试组件，提高我们的开发效率。既然是插件，就需要我们安装它。1.首先从vue官网打开 vue-devtools 的github项目(https://github.com/vuejs/vue-devtools)2.copy github项目的地址3.在新建的文件夹...原创 2020-02-15 12:25:08 · 489 阅读 · 0 评论 -
vue3组件通信
vue3组件通信原创 2022-11-11 12:53:47 · 531 阅读 · 0 评论 -
vue3(一)
vue3采用组合式 API 和 setup()语法setup() 钩子是在组件中使用组合式 API 的入口。原创 2022-11-11 12:28:39 · 710 阅读 · 0 评论 -
vue3 pinia
Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。原创 2022-11-10 22:11:40 · 442 阅读 · 0 评论 -
vuex学习二
在上一篇中我们初步使用了vuex，并且在组件中实际使用了vuex。现在，如果我们的项目分了好多模块原创 2022-05-24 17:41:10 · 189 阅读 · 0 评论 -
vuex 学习一
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化具体可以学习：Vuex官网初始化一个vue项目// (1) 安装vue-cli npm install -g @vue/cli// (2) 创建vue 项目 vue init webpack vuex-app// (3) npm run dev 启动项目// 如果发现无法使用vuex 并且terminal 出现一下信息，原创 2022-05-24 17:25:06 · 222 阅读 · 0 评论 -
axios 前端导出表格数据为Excel
需求：查询表格数据后，以Excel的形式，导出表格内的所有数据<w-button v-waves class="btn-export" @click="exportLogData" type="primary">导出数据</w-button>import axios from 'axios'import { BASEURL } from '@/http/index'// 日志导出async exportLogData() { const exportParam =原创 2022-04-27 13:25:25 · 618 阅读 · 0 评论