小钿钿不忘初心的博客

1 代码新建drag.js文件/*** v-dialogDrag 弹窗拖拽*/export default { bind(el, binding, vnode, oldVnode) { const value = binding.value if (value == false) return // 获取拖拽内容头部 const dialogHeaderEl = el.querySelector('.el-dialog__header'); const

序言最近任务需要做一个手动上传文件的功能，刚好记录一下一.需求如下图，实现一个手动上传文件的功能二.代码1. 结构<el-form-item label="文件上传：" prop="file"> <el-upload class="upload-demo" action="https://www.baidu.com/" :multiple='false' :auto-upload="false" :on-change="h

1.问题复现因为我这边需要一个配置页面，配置内容项很多，故使用了动态渲染。配置代码如下但是这里这样配置之后，时间就不能选择正确的时间了。2.问题原因查找了一下，发现是因为value-format=‘yyyy-MM-DD HH:mm:ss’ 的配置项问题导致的hh 12小时制 HH 24小时制而且DD也会影响日期的选择，需要改成dd所以正确的value-format =‘yyyy-MM-dd HH:mm:ss’...

前言在使用若依框架开发小项目的时候，发现在项目中频繁使用到字典，原本代码中的dicts没有深入研究，故自己写了一个混入来实现想要的字典获取功能。但是觉得每次切换页面都需要调用一下，而且每个系统都有一个mixins混入文件，感觉维护起来稍显繁琐。继而研究了一下dicts的用法，记录一下使用过程。1.首先确定字典的接口，在若依框架中如下，具体可根据自己后端提供的字典接口进行修改// 根据字典类型查询字典数据信息export function getDicts(dictType) { return r

什么是Vue.nextTick()官方解释：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。注意：重点是获取更新后的DOM 就是在开发过程中有个需求是需要在created阶段操作数据更新后的节点 这时候就需要用到Vue.nextTick()原因在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以在created中一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就

前言组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信，也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点，来讲解如何实现父子组件间通信。一、示例两个组件father.vue和child.vue作为示例的基础。//父组件<template> <div> <h1>我是父组件！</h1> <child></

1、根据的是最新版vue-cli4vue create myproject2、选择自定义方式选择Manually select features3、基础选项? Check the features needed for your project:( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被

vue.js是一套构建用户界面的渐进式框架。vue采用自底向上增量开发的设计。vue的核心库只关心视图层，非常容易学习，非常容易与其它库和已有项目整合。vue完全有能力驱动采用单文件组件和vue生态系统支持的库开发的复杂单页应用。vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。1.总体框架一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。　2.文件结构细分2.1 build——[webpac

1.关闭防火墙等软件，避免拦截和无法使用npm安装包2.使用淘宝镜像其次 去下载一个cnpm （注释：淘宝npm镜像，这个是阿里把外国的npm服务器搬到我们中国来了，用淘宝镜像npm下载一些配置文件会更快一些）cmd 右键复制下行命令：npm install -g cnpm --registry=https://registry.npm.taobao.org3.安装vue文件cnpm install vue 4.安装vue脚手架，关于脚手架问题，有些兄弟姐妹会发现安装的时候会一直卡着不

前言Vue 组件的使用不管是在平常工作还是在面试面试中，都是频繁出现的。因此系统的梳理一下组件之间的传参还是非常有必要的一、props 传参子组件定义 props 有三种方式:// 第一种数组方式props: [xxx, xxx, xxx]// 第二种对象方式props: { xxx: Number, xxx: String}// 第三种对象嵌套对象方式props: { xxx: { //类型不匹配会警告 type: Number,

一、初识VueX1.1 关于VueXVueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。1.2 安装由于VueX是在学习VueCli后进行的，所以在下文出现的项目的目录请参照VueCli 2.

dispatch: 含有异步操作存储：this.$store.dispatch('initUserInfo',friend);取值：this.$store.getters.userInfo;commit:同步操作存储：this.$store.commit('initUserInfo',friend);取值：this.$store.state.userInfo;

起因大家都知道做前端开发最让人头痛的就是处理异步请求的情况，在请求到的成功回调函数里继续写函数，长此以往形成了回调地狱。function load() { $.ajax({ url: 'xxx.com', data: 'jsonp', success: function(res) { init(res, function(res) { render(res, function(res) {

vue中我们经常会用v-bind(缩写为:)给子组件传入参数。或者我们会给子组件传入一个函数，子组件通过调用传入的函数来改变父组件的状态。例如：//父组件给子组件传入一个函数 <MyFooter :age="age" @setAge="(res)=> age = res"> </MyFooter> //子组件通过调用这个函数来实现修改父组件的状态。 mo...