青春不打烊的博客

首先npm下载"@zxing/library": "^0.15.1"这个依赖。

【代码】vue弹出框。

受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。但是，值得注意的是，网上一些资料写的$set()用法存在一些问题，导致在新接触这个方法的时候会走一些弯路！要处理这种情况，我们可以使用$set()方法，既可以新增属性,又可以触发视图更新。众所周知，直接给student赋值操作，虽然可以新增属性，但是不会触发视图更新。

【代码】vue上传视频时取第一帧做缩略图。

【代码】vue实现文件上传样式修改。

在组件中添加：zIndex: 99999,

首先建立store：重点是：然后是存值：一定带上模块名称（permission）。然后是使用computed计算属性取值：使用深度监听新值变化：完毕，这样能解决绝大部分问题。

this.upload.look = false; // 延迟请求，等待所有文件都从本地读取完毕 setTimeout(() => { let formData = new FormData(); this.formObj.fileArr.map(item => { // files为后台接收参数 // []为多文件数组 formData.append('uploa

以往的版本 | Node.js报错：ERROR: npm is known not to run on Node.js v10.16.2原因：卸载node会卸载不干净，需要手动删除npm相关文件夹，如下图：然后根据自己的node版本来更新npm 版本npm -g install npm@6.9.0...

<el-input v-model="data[item.value]":size="size"v-bind="item.props"oninput="value=value.replace(/[^\d]/g,'')"@keyup.enter.native="handleSearch"@blur="data[item.value] = $event.target.value"></el-input>

当启动了sunny-ngrok的客户端以后, 就这个用sunny-ngrok提供的域名, 来访问本地的127.0.0.0:8080(端口自己设置), 如果Vue项目启动, 外网就可以通过域名来访问Vue项目. 但是如果出现 Invalid Host header, 需要设置一下。vue-cli3中:添加// vue.config.js文件中 module.exports = { devServer: { disableHostCheck: true } }...

https://juejin.im/post/59097cd7a22b9d0065fb61d2仅供个人学习使用，侵删

公司规划使用vue+elementUi做前后端项目，即此记录学习过程。使用新的一个框架首先需要去了解它。找到官方文档：https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/#功能配套教程文章地址：https://blog.youkuaiyun.com/qq_42677001/article/details/100736561...

首先到node官方网站下载最新版本安装（安装自行百度）Cmd窗口操作：Node安装成功自带了npm。官方文档（https://www.runoob.com/nodejs/nodejs-npm.html） npm –v 查看npm是否安装。 npm install -g npm 更新命令。 2. 安装淘宝镜像： ...

先安装删除工具npm install rimraf -g执行删除命令rimraf node_modules

1、icon命名为favicon.ico放在项目根目录；2、在index.html中写入：<link rel="icon" href="./favicon.ico" type="image/x-icon">3、修改build下面webpack.prod.conf.js和webpack.dev.conf.js：修改：添加一行favicon: path.resolve(...

修改样式首先要懂得css的权重及优先级。明白了就好办了。在需要改样式的地方使用f12 找到该样式在当前页面覆盖掉就好了。这是普通修改。在vue中同样如此，不过可以在App.vue文件中直接修改。或者新建一个.class文件，在main.js引入。...

identify这是一个vue的插件，使用canvas来生成图形验证码。具体参数如下：直接上测试代码：identify.vue组件（主要用于定义参数和方法）<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="cont...

后端查询出tree所需的数据；tree组件：前端data中定义接口返回遍历对象：遍历两次：取到后台存入的 “checkedkeys”值。.push到定义的数组中。请看elementui的官网是这样定义checkedkeys 的：注意：:default-checked-keys里面的值要和tree的id值相对应，还有tree组件中的 node-...

查看Vue的API文档时我们会发现冒号“：”其实是v-bind的缩写。所以在使用上，一般的常量属性我们不用添加冒号；如果是会产生变化的值则要加上冒号。加上了冒号是为了动态绑定数据，等号后面可以写变量。如果不使用冒号，等号后面就可以写字符串等原始类型数据。这时就无法进行动态绑定数据了。...

方法一：1.处于同一个网段（PS：连同一个WiFi）2. 重启本地环境 ：(1)yarn run dev --host 0.0.0.0(不需要修改配置文件)(2)npm run dev --host (需要修改config/index.js，把host: 'localhost', 改为 host: '0.0.0.0')3. 你电脑的IP+本地项目的端口号别人...

关闭el-dialog之刷新页面修改app.vue页面调用：声明调用：

今天写代码的时候发现一个问题，后台传来的流，前台点击不能下载，查了半天后发现，原来是之前封装的调接口的请求把后台传来的流blob对象字符串化了，所以点击不能下载。所以就重新写了一个原生的请求，就可以下载了下面附上可以使用的源码：前端：axios({ method: 'get', url: this.baseUrl+'/api/upload/downloadFile?f...

加下边样式就可以喽：<style> .anchorBL{ display:none; }</style>不过请注意百度地图官方是不允许的哦。

<el-input :class="{'myClassbHouseNameA':cellNameList.houseState=='01','myClassbHouseNameC':cellNameList.houseState=='02','myClassbHouseNameR':cellNameList.houseState=='03','myClassbHouseNameT':c...

问题出现原因：我在本地引入了echarts把当前页面做成公共的组件给其他页面使用。（目前为止没有问题）直接打开当前页面显示正常：（下图正常）但是当引入到别的页面（问题出现）（下图是问题图片）缩成一团原因：在组件显示的时候用了v-show，会给echarts画布默认一个宽度和高度改成 v-if 就没有问题了。...

1.调用处<SliderCheck :successFun="handleSuccessFun" :errorFun="handleErrorFun"></SliderCheck> // 滑块验证成功回调 handleSuccessFun() { this.login_model.status = true },// 滑块验证失败回调 handleErrorFun() {},2.公共组件<temp..

ESLint配置方式ESLint有三种配置方式，一般自定义规则较少时，选第2种；自定义配置很多，建议第1种；第3种常用于对某句代码禁用eslint。1、在package.json中通过eslintConfig配置，示例："eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "@vue/stand

解决：在package.json 中添加以下代码；"rules": { "no-debugger": "off", "no-console": "off", "generator-star-spacing": "off", "no-tabs": "off", "no-unused-vars": "off", "no-irregular-whitespace": "off" }切记 切记 把rules这...

Vue的双向绑定用着确实方便，但自动档虽好，手动档也不是一无是处；在特定的情况下，还真的要手工触发“刷新”操作，目前有四种方案可以选择：刷新整个页面（最low的，可以借助route机制） 使用v-if标记（比较low的） 使用内置的forceUpdate方法（较好的） 使用key-changing优化组件（最好的）前面两种种不多介绍了，我们重点介绍后面的两个：force update组件内置$forceUpdate方法，使用前需要在配置中启用。import Vue from 'vu

常见场景：点击列表详情，跳转到详情内页，传递id参数获取详情数据。我们先来看看路由跳转的几种方式：1、通过params方式传参通过$route.push的path携带参数方式(路由配置中指定参数)// 路由配置{ path: '/detail/:id', //若id后面加?代表这个参数是可选的，即使不传id也不会导致页面无法访问 name: 'detail', component: Detail }// 列表中跳转this.$router.push({

vue使用$emit时，父组件无法触发监听事件的原因是：$emit传入的事件名称只能使用小写，不能使用大写的驼峰规则命名

mounted() { this.getPath() },methods: { getPath(){ console.log(this.$route.path);　　　　 if (this.$route.path == '你要进入的路由') {　　　　 this.init() // 初始化的方法　　　　 }　　　} },watch: { '$route':'getPath'},...

存数据：sessionStorageSet// 存数据export const sessionStorageSet = (name, obj) => { if (typeof obj === 'undefined') { return false } // obj为undefined或null或空字符串不能存储，布尔值可存储，但取时为字符串 if(!obj && (typeof obj === 'undefined' || typeof obj === '.

一：vue @click.native 原生点击事件：1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用.native修饰符）2，等同于在自组件中： 子组件内部处理click事件然后向外发送click事件：$emit("click".fn)二：在事件处理器中经常需要调用event.preventDefault()或event.stopPropagation()。尽管我们在方法内可以轻松做到，不过让方法是纯粹的数据逻辑而不...

子页面：<template><div><p>子组件</p><button@click="sendMsg">传递到父页面</button></div></template><script>export default {name: 'child',data() {return {msg:'子组件数据'}},computed:{addNum(){return thi.

<el-form-item label="期望城市：" prop="city"> <el-select v-model="ruleForm.city" placeholder="请选择（省市）" style="width: 100%;" filterable @change="selectCityName"> <el-option v-for="item in cityList" :key="item.cityCode" :lab.

换行问题：vue 中 用 {{}} 进行数据绑定的时候，如果你想让字符串换行是不生效的解决办法：不用上边的方式进行数据绑定，用v-html标签代替{{}}data中的str为 "1111<br/>2222"例1<div>{{str}}<div>例1效果<i>1111</i><br/>2222例2<div v-html="str"><div>例2效果11112222补...

在使用vue-bus进行兄弟组件的数据传递过程中，遇到的问题，及解决方案 问题：vue中eventbus被多次触发，在this.$on监听事件时，内部的this发生改变导致，无法在vue实例中添加数据。当我们从A页面跳转到B页面中的时候发生了什么？首先是B组件created 然后beforeMounted接着A组件才被销毁，A组件才仔细beforeDestory，以及destoryed。然后B组件再执行mounted。 所以我们可以把A页面组件中的emit事件放到beforeDestory里，因为这个时

解决方案：控制台输入 npm install @babel/core @babel/preset-env 命令然后启动：启动成功