![](https://img-blog.csdnimg.cn/2020100209335817.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue2
文章平均质量分 54
vue学习
Silent Land
你还有好多未完成的梦,你有什么理由停下脚步?
展开
-
vue JSX实现一个通用表单生成器
项目中有大量的简易表单,使用组件将其封装起来提高工作效率该组件封装不适用于太具有个性化的表单使用冻结优化配置信息。原创 2022-07-24 19:02:25 · 1258 阅读 · 0 评论 -
实现一个通用表单重置功能
vue2实现一个通用的表单重置与恢复功能原创 2022-07-07 11:09:35 · 406 阅读 · 0 评论 -
webSocket——Vue2简易聊天室
使用vue2实现webscoket简易聊天室原创 2022-06-11 21:53:56 · 2498 阅读 · 0 评论 -
Vue.js全局API——directive
实现一个自定义loading指令请求数据还未返回加载loading,数据加载完成loading隐藏一、创建指令src目录新建directives文件夹loading.jsimport Vue from "vue"import Loading from './loading.vue'console.log('Loading', Loading)const loadingDirective = { // v-loading 所绑定的元素插入到页面上时触发 inserte原创 2022-05-29 22:38:32 · 445 阅读 · 0 评论 -
Vue.js全局API——filter
情景将后台存的数字订单状态格式化显示在前端使用filter新建filters文件order.js 写处理订单的filter方法export default { setOrderStatus (status) { switch (status) { case 1: return '待付款' case 2: return '待发货' case 3: ret原创 2022-05-24 21:36:00 · 436 阅读 · 0 评论 -
使用Vue的mixin混入打造UI组件库
一、定制自己的组件在src下新建一个libs设计组件传值样式Button.vue<template> <button :class="['my-btn', btnStyle]"> <slot></slot> </button></template><script>export default { name: 'MyBtn', props: { btnStyle: Stri原创 2022-05-19 23:35:15 · 208 阅读 · 0 评论 -
extend实现一个modal函数式组件
效果实现一、封装一个基础modal弹窗新建一个messageBox组件messageBox.vue<template> <div :class="['message-box', type]"> <div class="inner"> <header class="header"> <h1 class="title">{{title}}</h1> <s原创 2022-05-17 00:01:25 · 293 阅读 · 0 评论 -
Ant Design of Vue switch使用Popconfirm气泡确认框
在使用switch开关使用Popconfirm气泡确认框二次确认<template> <div> <a-popconfirm title="选择否将清除数据?" :visible="visible" ok-text="是" cancel-text="否" @visibleChange="handleVisibleChange" @confirm="confirm" @cancel=原创 2021-03-08 22:07:42 · 3983 阅读 · 0 评论 -
Ant Design of Vue DatePicker 日期选择框只选择年份
需求只改变年份问题Ant Design of Vue DatePicker 日期选择框通过mode = "year"控制,弹出面板以年份显示,但是无法选择,也无法关闭面板解决方案将控制面板打开/关闭的yearShow,需要在得到后台数据时将它添加到每条数据中,如果放在data中表格每行的日期面板将同时开/闭.<template> <div> <table class="table"> <thead>原创 2021-02-26 21:38:36 · 5392 阅读 · 0 评论 -
组件传值动态
组件父子传值单向数据流:父组件的给子组件传参之后子组件不能修改父组件中的数据发生改变会影响到子组件需求:1.在子组件中修改msg2.子组件中修改之后不会影响到父组件3.父组件中修改之后会影响到子组件解决方案将msg保存期起来,改变保存的那个属性,这样需求1和需求2就完成了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="原创 2020-11-30 12:24:37 · 564 阅读 · 1 评论 -
upload组件二次封装及回显功能的实现
需求:app.vue给上传组件一个图片地址,该组件能回显出来1:先通过父子传值将图片地址传过去在子组件标签定义一个属性 value=值子组件通过props接收 props:[“value”]子组件接收图片路径后,将上传组件的img标签上的imageUrl换成相应的props传参value2:修复上传功能(上传成功后,图片路径没有使用上)通过父组件修改value的值1:在子组件标签绑定一个方法 @input="父组件方法"2:在子组件内触发父组件方法,并传递图片路径在图片上传成功后.原创 2020-11-27 16:42:31 · 1443 阅读 · 0 评论 -
watch中的深度监听
watch只要被监听的数据发生改变,就会触发对应的逻辑代码如果被监听的数据是个对象(或数组),对象(或数组)中的属性发生改变时,监听是不会触发上的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2020-11-26 11:29:29 · 41324 阅读 · 1 评论 -
计算属性与全选逻辑实现
计算属性计算属性会将结果进行缓存下次使用时,会先从缓存中得到,如果没有才会执行逻辑代码当依赖发生改变时,缓存才会更新<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&原创 2020-11-25 10:33:33 · 390 阅读 · 2 评论 -
VuePc项目基本部署
装常用包npm i element-uinpm install -D less-loader lessnpm i axiosnpm i vue-router环境变量配置1.在项目根目录(与README.md同级)下创建.env.development(.env.production)文件配置开发环境(生产环境)文件2.内部键值对中:VUE_APP_URL=基地址3.使用:process.env.变量名(VUE_APP_开头的变量)注意点:1.定义好后要重新执行npm run se原创 2020-11-21 23:48:41 · 435 阅读 · 1 评论 -
Vue2.x与Vue3.x的双向绑定原理
双向的绑定的原理通过Object.defineproperty()重新定义对象属性的set方法、get方法来实现的,从这个属性中取值时会触发get方法,改变这个属性时会触发set方法,所以我们只要将一些需要更新view的方法放在这里面就可以实现data更新view了,而view更新data其实可以通过事件监听实现当视图上的数据发生改变时, data 中的数据也发生改变当 data 中的数据发生改变时,视图中的数据也发生改变Object.defineProperty()Object.de原创 2020-11-03 20:49:03 · 873 阅读 · 0 评论 -
对 keep-alive 的了解
keep-alive<keep-alive> 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。<keep-alive> 生命周期钩子函数:activated、deactivated 使用会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在 activated 阶段获取数据,承担原来 created 钩子中获取数据的任务。被包含在 中创建的组件,会多出两个生命周期的钩子: activated 与 deactivatedactivated转载 2020-10-27 17:18:42 · 343 阅读 · 0 评论 -
生命周期流程&钩子函数
生命周期流程$mount()方法:作用与el属性一样,都是可以将vue实例渲染到视图容器中template属性:如果设置了这个属性,将来在页面上渲染时会将template作为页面的内容进行渲染1. 创建一个vue实例2. 初始化事件&生命周期在创建vue实例时,这个对象其实是空的,到了这一步才慢慢开始执行一些内容3. 初始化实例中的data与method在这一步之前data与method其实是没有内容的4. 判断并生成虚拟DOM判断是否存在el属性:(el:是否原创 2020-10-27 17:04:50 · 607 阅读 · 1 评论 -
mockjs简单使用
mockjs官方文档在项目开发过程中:前端:根据静态页面完成结构 & 样式 ,根据接口文档完成数据渲染后端:开发接口问题:前端的静态页面已经写完,后端的接口文档还没有开发完成mock.js 可以用来解决:当前端的静态页面写完,但是接口还没有出来,就可以使用 mock.js 来模拟后端的接口作用: 生成随机数据,拦截 Ajax 请求(模拟后端的接口)使用:生成随机数据下载mock npm i mockjs --save使用mo原创 2020-10-27 10:46:26 · 3758 阅读 · 1 评论 -
动态组件与异步组件
动态组件异步组件原创 2020-10-26 20:05:00 · 887 阅读 · 1 评论 -
Vue中的插槽
基本使用、具名插槽、默认插槽、作用域插槽原创 2020-10-25 20:38:47 · 345 阅读 · 0 评论 -
组件间的通信方式及页面传参总结
特性继承、inheritAttrs、$attr、$listeners、eventbus、组件中的通信方式总结及页面传参原创 2020-10-24 12:54:10 · 547 阅读 · 0 评论 -
webpack那些事
webpack中文官网英文官网webpack 基本概念为什么要学习webpackwebpack 它是 vue-cli 的底层实现原理,学习了它,可以更加方便的去使用 vue-cli(现在基本不用了)webpack 的作用vue-cli 搭建的项目有哪些功能:可以运行为一个服务器可以进行实时更新代码修改之后,保存,页面会自动更新可以解析 css 文件import 'xx.css'可以解析 .vue 文件…上述的这些功能,其实都是 webpack 来实原创 2020-10-22 22:47:53 · 290 阅读 · 0 评论 -
key值报错
bug产生较类似的组件在一个页面使用v-for渲染key值为index时解决方案将该组件用div包起来原创 2020-10-20 08:23:11 · 741 阅读 · 0 评论 -
Vue.use做了什么?
Vue.use(js)该js如果是对象该对象里面要有一个install方法Vue.use就是调用里面的install方法该js是一个functionVue.use时function会直接执行作用:可以在Vue的原型加一些东西注册全局组件等使用将hellow注册为全局组件在原型中添加$num= 123在components中新建components.jsimport HelloWorld from '@/components/HelloWorld.vue'原创 2020-10-18 10:12:32 · 2664 阅读 · 6 评论 -
Vue全局过滤器、moment的diff算法计算时间差
过滤器(字符加工)语法:filters:{ 方法名(参数){ return 值(参数加工后) }}使用的地方v-bind {{参数 | 方法名}}全局过滤器Vue.filter("方法名",function(参数){ return 值(参数加工后)})moment官方网站时间转换把当前时间转换成某个格式moment().format("YYYY/MM/DD hh:mm:ss")给了我们一个时间戳转换成某个时间格式moment(时间戳).form原创 2020-10-17 08:18:10 · 1953 阅读 · 0 评论 -
路由重复跳转错误
问题:在登录页跳转至登录页产生的错误解决在路由页加以下代码const routerPath = VueRouter.prototype.pushVueRouter.prototype.push = function push (location) { return routerPath.call(this, location).catch(e => e)}原创 2020-10-11 23:21:09 · 484 阅读 · 0 评论 -
Vuex状态管理模式
Vuex官方文档vuex实现共享状态管理,实际就是管理里面的state的相应值import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { //这里放全局参数 }, mutations: { //这里是set方法 }, getters: { //这里是get方法 }, actions:原创 2020-10-05 23:17:25 · 525 阅读 · 0 评论 -
侦听器、axios拦截器、导航守卫
侦听器、axios拦截器、导航守卫原创 2020-10-05 12:06:13 · 456 阅读 · 0 评论 -
css作用域、路由、axios基地址配置与全局调用、momont、filtters过滤器的使用
css作用域、路由、axios基地址配置与全局调用、momont、filtters过滤器的使用原创 2020-10-02 09:30:58 · 722 阅读 · 0 评论 -
vue 中使用echarts
vue 中使用的echarts及其注意点(数据异步问题)原创 2020-10-01 11:41:37 · 524 阅读 · 0 评论 -
vue常见错误及注意点
初始值引起的错误原因:DOM加载了数据还未获得报404错误解决:用v-if判断让数据加载了再渲染DOMExpected Object,got Number with value 95el-option需要valueTypeError:Cannot read property ‘key’ of undefinedEXpected Object,got String with value “rules”不加冒号后面的即为字符串Object(…)is not a function原创 2020-10-01 10:16:56 · 886 阅读 · 0 评论 -
脚手架设置跨域代理
解决开发环境中的跨域问题在README同级目录下创建一个vue.config.js在vue.config.js使用下面代码将**.env.development** 内的基地址替换为 /public //vue-cli3.0 里面的 vue.config.js做配置module.exports = { devServer: { proxy: { '/public': { //这里最好有一个 / target: 'http://127.0原创 2020-09-22 20:20:40 · 435 阅读 · 0 评论 -
解决vue路由正常跳转,页面无任何变化
问题:点击跳转,地址正常跳转,但对应组件在对应位置没显示、也没报错解决浏览器弹出警告:意思是:非嵌套路由必须包含前导斜杠字符。将path中路径中的点去掉成功解决原创 2020-09-20 12:40:12 · 3919 阅读 · 0 评论 -
Vue动画、组件的基本使用、Vue-cli项目创建
Vue动画、组件的基本使用、Vue-cli项目创建、天知道案例总结、ref的基本使用、$nextTick使用原创 2020-09-17 10:14:17 · 443 阅读 · 0 评论 -
axios、生命周期基本介绍、计算属性
axios、生命周期基本介绍、计算属性原创 2020-09-14 10:02:01 · 1137 阅读 · 1 评论 -
Vue基础语法、常用指令
Vue基本使用、常用指令原创 2020-09-12 22:57:27 · 443 阅读 · 0 评论