人间草木

vue代理是 vue静态服务器做代理。使用的是http-proxy-middleware这个模块（这个模块相当于是node.js的一个插件）vue-cli3.0 里面的 vue.config.js做配置 proxy: { '/sso': { // 权限认证中心 target: 'http://10.20.10.162:6868', ws: false, c...

项目中有一个地方需要获取到接口返回值之后根据返回值确定之后执行的步骤，使用async搭配await实现，await函数不能单独使用。方法如下: // 车辆布控的详情 通过id 查询 gcbh async getBkxx(id){ var self = this; ...

效果图父组件页面父组件页面引用子组件父组件用 :parentmessage.sync="hphm" 传递 hphm 给子组件并接收子组件更新过的 hphm<its-hphmInput class="filter-input" glbm="京" size="small" v-model="searchFrom.hphm" @onChange="hphmToU...

在开发组件的时候，点击组件外部隐藏组件自身的这种情况很长见到，例如：时间选择框组件，下拉选件等。示图：点击外层元素隐藏自定义车牌选择框代码如图中所写：核心：1、最外层div中添加一个@click.stop（取消事件冒泡），可以不添加事件名。2、在mounted给body添加一个点击事件，事件触发组件的隐藏。 document.bo...

12 种使用 Vue 的最佳做法随着 VueJS 的使用越来越广泛，出现了几种最佳实践并逐渐成为标准。在本文中，主要分享在平时开发中一些有用资源和技巧，废话少说，我们开始吧。1.始终在 `v-for` 中使用 `:key`在需要操纵数据时，将key属性与v-for指令一起使用可以让程序保持恒定且可预测。这是很有必要的，这样Vue就可以跟踪组件状态，并对不同的元素有一个常量引用...

vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家，坐着一屋子的陌生人，相互之间怎么称呼，这时就需要先知道自己和他们之间是什么样的关系。vue组件中关系说明:如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系；B与C之间...

Vue.js 组件实例的作用域是相互独立的，不同组件之间的数据不能互相访问，组件有父级组件、子级组件、兄弟组件，如何选择组件之间的通信方式？针对常用的 props、$emit/$on、vuex、$parent/$children、$attrs/$listeners、provide/inject 进行讲解，对比各自的区别以及使用场景。1. props子组件使用props 接收父组件传递的值，...

nextTick() 用于在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOMnextTick()是属于异步更新队列应用场景在Vue生命周期的created钩子函数进行的DOM操作一定要放在vue.nextTick()的回调函数中在数据变化后要执行的某个操作，而这个操作需要使用随机数据改变而改变的DOM结构的时候，这个时候的操作都应该放进Vu...

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。 实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCre...

1.新建一个tool.js文件，写入如下代码，放入 plugins 文件夹内const tool = {}// 设置cookietool.setCookie = (name, value) =&gt; { let Days = 30 let exp = new Date() exp.setTime(exp.getTime() + Days * 24 * 60 * 60...

1.新建一个tool.js文件，写入如下代码，放入 plugins 文件夹内const tool = {}// 数组排序 (冒泡排序) 方法1// *简明解释*// 通过依次比较、交换相邻的元素大小（按照由小到大的顺序，如果符合这个顺序就不用交换）。// 1次这样的循环可以得到一个最大值，n - 1 次这样的循环可以排序完毕。// *属性*// 1.稳定/...

mint-ui的官方文档必须吐槽，写得太简陋了，有许多方法和配置都没有具体配置，要自己去摸索，实在是坑爹。template模块 <div> <span>开始时间*</span> <span @click="this.startTime">请选择 ></span> ...

1.在xxx.vue文件的script标签中引入import { MessageBox } from 'mint-ui'2.使用 methods: { download () { MessageBox({ title: '确定下载附件？', message: '附件名称?', showCancelButto...

自定义图标 <div class="top"> <mt-button type="default" size="large"> <img src="../../../../static/img/fellowIssues/add.png" height="20" width="20" slot="icon">添...

效果html <div class="content"> <mt-navbar class="page-part" v-model="selected"> <mt-tab-item class="my" id="1">我发布的</mt-tab-item> <mt-tab-item...

<template> <div class="mainIndex" fixed> <router-view></router-view> <!-- 路由切换方案2 --> <mt-tabbar> <mt-tab-item v-for="(v,index) in tabBar" :...

1.query方式传参和接收参数传参: this.$router.push({ path:'/xxx', query:{ id:id } }) 接收参数:this.$route.query.id注意:传参是this.$router,接收参数是this.$route,这里千万要看清了！！！this.$...

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。index.vue<template> <div class="index"> {{msg}} ---- {{msgMixin}} </div&g...

首先你要确保vue环境搭建成功 第一步：npm 安装@xkeshi/vue-qrcode，文件根目录下安装，指令如下npm install --save @xkeshi/vue-qrcode      //安装到生产环境 第二步：在组件中使用 效果图 ...

*****先要安装node.js，使用npm包管理工具 node.js安装方法如下*****https://blog.csdn.net/shiyaru1314/article/details/54963027https://blog.csdn.net/qq_42564846/article/details/82688266大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里...

<template> <!-- 最外层只能有一个div --> <div class="main"> <!-- 组件使用 --> <Images/> </div></template><script>// 引入组件import Images from "../.....

第一步：1.在vue项目里 src/router/ 文件夹下新建 config.js 文件，写入如下代码： const base = '/'const routers = [ { name: '用户管理', child: [ { name: '用户管理列表', url: '/user/index' }...

一、vue-router 路由跳转1、router-link标签跳转在html标签内使用router-link跳转，相应于超链接a标签，使用方式如下：&lt;router-link to="/"&gt;[显示字段]&lt;/router-link&gt;to：导航路径使用示例如下：&lt;p&gt;导航 ： &lt;router-link to="/"&gt;首页...

 1.在vue项目的 src/ 文件夹下新建一个文件夹为 plugins，然后在 plugins/ 下新建 axios.js 文件，写入如下代码 import axios from 'axios'import { base } from '../router/config'import { config } from '../config'import { Message, M...

在vue项目的 config/ 文件夹下的 index.js 文件里的dev ，写入如下代码方便你复制~~~~ // 配置proxy跨域请求代理 proxyTable: { // url中匹配到 '/api' 就会吧url中 '/api' 之前的东西全部替换为下面target中的东西 '/api': { target: 'ht...

1. 安装npm install nprogress --save2. 在main.js中导入源码~~~~~~方便你复制// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf wi...

首先你要确保vue环境搭建成功 第一步：npm 安装@xkeshi/vue-barcode，文件根目录下安装，指令如下npm install --save @xkeshi/vue-barcode      //安装到生产环境 第二步：在组件中使用效果图 ...

1.在vue项目的 src/ 文件夹下新建一个文件夹为 plugins，然后在 plugins/ 下新建 filter.js 文件，写入如下代码// 封装过滤器// 根据身份证号码判断男女let sexIdcardFilter = value =&gt; { if (!value) { return '' } else { let data = value.su...

首先你要确保vue环境搭建成功第一步：npm 安装js-md5，文件根目录下安装，指令如下npm install --save js-md5      //安装到生产环境 第二步：在vue项目的 src/ 文件夹下新建一个文件夹为 plugins，然后在 plugins/ 下新建 md5.js 文件，写入如下代码import md5 from 'js-md5'ex...

效果图1.在vue项目的 src/ components文件夹下新建 identify.vue 文件，写入如下代码&lt;template&gt; &lt;div class="s-canvas"&gt; &lt;canvas id="s-canvas" :width="contentWidth" :height="contentHeight"&gt;&a

首先你要确保vue环境搭建成功 第一步：npm 安装axios，文件根目录下安装，指令如下npm install axios --save //安装到生产环境 第二步： 如何封装插件首先，创建一个文件。本例中，我将引入一个axios库的插件。我们就把这个文件命名为axios.js吧。最关键的地方在于，我们需要暴露一个将Vue构造器作为第一个参数的instal...

首先你要确保vue环境搭建成功第一步：npm 安装 moment，文件根目录下安装，指令如下npm install moment -save //安装到生产环境第二步：如何封装插件首先，创建一个文件。本例中，我将引入一个moment库的插件。我们就把这个文件命名为moment.js吧。最关键的地方在于，我们需要暴露一个将Vue构造器作为第一个参数的in...

在vue中引入less 首先你要确保vue环境搭建成功 第一步：安装less依赖，npm install less less-loader --save-dev //安装到开发环境 --save-dev 与 --save 的区别--save 安装包信息将加入到dependencies（生产阶段的依赖）--save-dev 安装包信息将加入到devDependen...

在vue中引入lib-flexible首先你要确保vue环境搭建成功配置 flexible第一步：安装 lib-flexible， npm install lib-flexible --save第二步：引入 lib-flexible在项目入口文件 main.js 里 引入 lib-flexibleimport Vue from ...

最近接到一个bug，要求：手机号和密码不输入的情况下，登录按键是灰色的，不可点击；手机号和密码输入的情况下，登录按键是亮色的，可以点击；细想一下用vue的监听函数watch()去解决 watch: { //tel 是data() 里面的数据tel，newVal是tel变化后的值，oldVal是tel变化前的值 tel(newVal...

父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息父组件向子组件传值： 子组件在props中创建一个属性，用来接收父组件传过来的值； 在父组件中注册子组件； 在子组件标签中添加子组件props中创建的属性； 把需要传给子组件的值赋给该属性 子组件向父组件传值： 子组件中需要以某种方式（如点击事...

非父子组件（跨级组件和兄弟组件）通信时，使用了bus（中央事件总线）的一个方法，用来触发和接收事件，进一步起到通信的作用。Demo效果展示新建一个bus.js文件，写入如下代码公共bus.js// 公共bus.js// 非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果import V...

Demo效果展示 第一步：npm 安装 vuex，文件根目录下安装，指令如下npm install vuex --save //安装到生产环境 第二步：在main.js中引入vuex import Vue from 'vue'import App from './App'import router from './router'import Vuex...

&lt;div v-for="p in persons"&gt; &lt;p&gt; name: {{ p.name }} &lt;/p&gt; &lt;p&gt; //正确做法，拼接字符串 tel: &lt;a :href="'tel:' + p.phone"&gt;call me&lt;/a&gt

:style 是v-bind:style的简写v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute）style三元表达式<p :style="{'color': (checkIndex3==m.txt ? '#3d8cff':'#BBBBBB')}">{{m.txt}}</p>c...