文章分类 - Vue
摘要：引用地址：https://juejin.cn/post/7006257717820162056#heading-9
阅读全文
摘要：今天打包vue-cli3时，扔到服务器上面发现所有的资源都请求失败了，然后去根目录找配置文件，发现没有vue.config这个文件，只有一个babel.config.js这个文件，于是自己创建了一个vue.config文件如下： module.exports = { // 基本路径 publicPa
阅读全文
摘要：亲测，webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。 我的vue项目结构如下： 1. 进入该vue项目目录，执行：npm run build(在package.json的scripts配置) 执行成功如下图所示： 然后此时你会发现项目下多了一个 dist
阅读全文
摘要：跳转苗点： <template> <div> <p> <button @click="showDetails(1)">NO1</button> <button @click="showDetails(2)">NO2</button> <button @click="showDetails(3)">N
阅读全文
摘要：使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，场景如下： <template v-for="item in tableData"> <div :class="{'redBorder':item.red}"> <div>{{ item.name}}</div> <div> <el-butt
阅读全文
摘要：<!-- 回顶部按钮为一张50*50的图片 --> <!-- btnFlag 控制图片显示隐藏 --> <!-- backTop 回顶部的方法 --> <img v-if="btnFlag" class="go-top" src="图片url" @click="backTop"> vue实例： //
阅读全文
摘要：<!-- tab切换star --> <ul class="tab-list" :class="{fixTitle:whether}"> <li @click="curId=0" :class="{'cur':curId 0}">产品特点</li> <li @click="curId=1" :cla
阅读全文
摘要：设置根节点HTML的font-size 新建px2rem.js文件，放在项目根目录utils目录下，代码如下： // 基准大小，设置20px为基准，便于自己写代码时计算rem的值 const baseSize = 20; // 设置 rem 函数 function setRem () { // 当前
阅读全文
摘要：前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。 而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。 技术栈 vue-cl
阅读全文
摘要：使用场景:在 vue 中,我们需要直接操作DOM的时候,可以使用ref 及$ref 来实现 也就是说我们在原生 js 中获取 dom 元素,需要使用 document.getElementById("name") 现在可以直接使用 this.$refs.name $refs相对于document.g
阅读全文
摘要：最近在开发中需要用到动态设置ref的内容，摸索了很久终于弄明白了要怎么实现。 1.绑定指定某一个组件 1.1、例如：这是一个编辑器组件，在这里把它的ref设置为myeditor <fcEditor ref="myeditor"></fcEditor> 1.2、在代码中通过myeditor名称获取这个
阅读全文
摘要：最近在做项目的时候用到了vue的for循环，需要动态获取ref 单个子组件时直接ref=‘name’，在js中this.$refs.name调用方法就可以了，但是动态的话name是不固定的，this.$refs.后面是不能直接跟变量的，后来我百度了一下找到了解决方案，以下是我的代码
阅读全文
摘要：html: <div class="food-group" v-for="(item,index) in goods" :key="index" ref="group"> .... </div> methodes: methods: { getHeightList() { let height =
阅读全文
摘要：需求场景：点击导出excel按钮，调用导出接口，接口调用成功跳转下载文件列表，进行文件下载，这里遇到的问题就是跳转到文件列表的时候，刚刚导出的文件还没有生成，需要刷新浏览器，当时解决方法用的 window.location.reload();效果不理想， 1 用vue-router 重新路由的时候到
阅读全文
摘要：在做vue项目中，遇到一个问题，当我勾选了已经输入的文本框的这条数据时，我再去修改文本框中的值时，你会发现，勾选的这条记录的输入框的值还是原来的取值，并未更新到最新值，那这时候我们想到的就是set方法： 这时候可以使用 vm.$set实例方法，这也是全局 Vue.set方法的别名:this.$set
阅读全文
摘要：// 我们已经顺利输出了我们定义的数组，但是我们需要在输出之前给数组排个序，那我们就用到了Vue的computed属性。 //我们上边循环的都是数组，那我们来看一个对象类型的循环是如何输出的。 先定义一个student对象
阅读全文
摘要：因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。 vuecli@2.x打包 解决方法：找到webpack .prod.conf.js 1.定义版本变量： const Version = new Date().getTim
阅读全文
摘要：点击设置按钮跳转子页面，将父页的数据通过query带去子页面 在子页面接受参数
阅读全文
