juju的博客

promise.all()

正常情况下报错this.$refs[xxx].validate is not a function可能我们使用nextTick 延迟加载去解决，如若使用了nextTick依旧报错当使用this.$refs[xxx].validate 的时候，如果是xxx为一个变量传进来的，如下这种情况下，是不需要加[0]的这种情况下必须是this.$refs[xxx][0] 否则会如标题的报错...

点击右键，弹出菜单安装：npm install vue-contextmenu --save引入：import VueContextMenu from 'vue-contextmenu'Vue.use(VueContextMenu)使用：<template><div id="app" @contextmenu="showMenu" style="width: 100px;height: 100px;margin-top: 20px;background: red

<el-upload ref="upload" :headers="myHeaders" class="avatar-uploader avatar-uploaderOne" action="http://47.93.4.35:9090/shop/upload" :http-request="uploadImg" :show-file-li...

最近项目需求需要在vue中预览pdf文件，使用vue-pdf这个插件，并且还有许多方法、属性能进行功能扩展。一、安装npm install --save vue-pdf二、基本示例<template><div class="pdf"> <pdf ref="pdf" :src="pdfUrl"> </pdf></div></template><script>import pdf f

1、v-for循环普通数组(1) 创建vue对象(2) 循环数据结果：2、v-for循环对象数组(1) 创建vue实例对象(2) 循环对象数组结果：3、v-for循环对象(1) 创建vue对象实例(2) 循环对象结果：4、v-for循环数字(1) 创建vue对象实例(2) 循环对象结果：5、v-for中key的使用方式(1) 创建vue对象实例注意：push()方法一般是添加到数组的最后的位置；unshift()方法是往最前面的位置添加。注意：

初学前端，用的架子是 vue+element ，目前有个需求，想将string类型的json字符串，以json格式展示。利用vue-json-viewer插件，利用这个插件，可方便快速实现 高亮，JSON折叠，copy 三种功能 ！！！官网地址：https://www.npmjs.com/package/vue-json-viewer效果展示先放最终效果：效果看完，那么我们来上干货了！安装vue-json-viewer插件基于npm的安装：$ npm install vue-json-v

异常：原因： v-for的key存在重复值解决：使用index，搞定tips:当再同一循环体内多个v-for嵌套使用时，不可都用v-for="(item,index)",要注意区分，例如v-for="(val,key)"

搜索条件：<el-row class="views_box" :gutter="20"> <el-col :span="4"> <div>商品ID：</div> <el-input v-model="dataForm.id" placeholder="请输入商品ID" @keydown.enter.native="seachEnterFun" ></el-input

一、定义变量，并全局使用原理：单独新建一个全局变量模块文件，模块中定义一些变量初始状态，用export default 暴露出去。在main.js中引入，并通过Vue.prototype挂载到vue实例上面。供其他模块文件使用；或者直接引入到需要的模块文件中使用；项目目录步骤1、新建 global_variable.js文件，用于存放变量，示例如下：const baseURL = 'www.baidu.com'const token = '123456'const userSite

解决方法：在babel.config.js中添加：presets: [ [ “@vue/app”, { useBuiltIns: “entry” } ] ]

嵌入组件<el-upload accept="image/jpeg,image/gif,image/png" class="upload-demo upload-tip" :action="uploadUrl()" :on-preview="handlePreview".

//获取uuid文件名称（去掉扩展名）function getFileName(data) { return data.substring(0,data.indexOf(".")); }

绝大部分我们在使用el-tree组件的时候如果需要勾选，那么子级选中的时候，父级往往也被勾选中，今天项目中遇到一个需求就是，el-tree组件子级与父级既可以关联使用，也可以不产生关联使用，其实el-tree提供了一个配置‘check-strictly’在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false 默认是关联的 为true的时候就不会产生关联...

1、选中复制这个比点击复制简单点<template> <div> <el-button type="primary" plain @click="copy()">复制</el-button> </div></template><script>export default { data(){ return{ } }, methods:{ copy()

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。实现方法(使用vue的vue-lazyload插件)安装插件npm install vue-lazyload --save-dev在入口文件main.js中引入并使用import VueLazyload from 'vue-lazyload'直接使用Vue.use(VueLazyload)

html:<img ref="study" :src="studyDataPic">script:data: { return { studyDataPic: require('@/assets/images/school.png') }}更改图片地址：this.studyDataPic = require('@/assets/images/load.gif')注意：1.必须使用require因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上re

D:\vuejselement\workSpace\zutnlp_platform_show>cnpm install --save core-js/modules/es6.array.find-index× Install fail! Error: [@core-js/modules/es6.array.find-index] resolved target D:\vuejselement\workSpace\zutnlp_platform_show\core-js\modules\es6.arr

我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性<template> <div class="hello"> <button @click="setMessage">添加属性</button> {{ student.name }} <input type="text" v-model="student.age"> </div></template>&l

axios内部提供axios.CancelToken.source().cancel()方法用于取消正在发送的请求，我们可以利用这个去处理简单的api封装，具体看公司项目的封装方式import axios from 'axios'export function getDataList (cancelToken) { return axios({ method: 'get', url: 'http://xxx.xxx.x.x:4399/getList', cancelTo

1.下载依赖npm install marked2.在需要使用的页引入import marked from 'marked'3.语言转换注：这里blog是转换后的html语言，而blogDetailData.content是从数据库取出来markdown文本this.blog = marked(this.blogDetailData.content)4.将转换后的html文本绑定在div上注意这里使用的是v-html，而不是v-text，虽然同样是绑定文本，但是v-text绑定之后

el-input 的边框，官网是这样子的，有的时候我我们需要做一些自定义的样式可能我们需要这样子的然后我们常规操作，border: none; 或者 border: 0; 发现行不通，哈哈哈哈哈tip：将border属性设成0，虽然边框不见了，但是浏览器依然会对border-width和border-color进行渲染，会占用浏览器的资源。将border设置成none，浏览器就不会做出渲染动作。>>> 是vue的深度选择器，vue引用了第三方组件，需要在组件中局部修改第三方组

今天使用element中的Dialog组件时发现一个问题：当Dialog内容过多时会出现滚动条，而当你滚动到一定位置后关闭Dialog，然后再次打开时滚动条仍然保持在上一次关闭前的位置而没有回到顶部。网上找了两种方法都不太管用，最后在同事的帮助下解决了。 使用element-ui，dialog中的destroy-on-close属性，关闭时销毁 Dialog 中的元素。这样在每次打开dialog时，滚动条都是在最顶部的。...

根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符当你使用 <Menu>组件时 <Menu mode="horizontal" theme="dark" :active-name="$route.path" > <MenuItem name="/" to="/" @click.native="handclick(1)">我的

一次请求1.1 页面使用slice来进行限制展现从0，a的数据：<div v-for="user in draw_user.slice(0,a)" :key="user.uid" class="user-item">//判断a的值是否小于数组的长度，小于就显示点击加载更多<div class="load-more mr-bottom" v-if="a<draw_user.length" @click='loadMore' >点击加载更多</div>.