导航

• 博客园
• 首页
• 新随笔
• 新文章
• 联系
• 订阅
• 管理

06 2021 档案

• BetterScroll在vue中v-for渲染数据后滚动失效
  摘要：背景： 在vue中时使用BetterScroll来滚动列表，而列表的数据是动态获取加载的，使用的是v-for遍历数据。数据加载完后，BetterScroll滚动失效。上网搜索资料，使用了一些方法都没能解决，比如在vue的activated()中调用bs.refresh() 方法。最后感觉应该是v-f 阅读全文
  posted @ 2021-06-30 17:38 pwindy 阅读(441) 评论(0) 推荐(0)
• 布局总结四：利用行高来撑开高度
  摘要：效果图 1.html布局代码 <div class="parts_city"> <div class="tit">当前城市</div> <div class="list_content"> <div class="list_wrap"> <div class="list_btn now_btn">北 阅读全文
  posted @ 2021-06-30 15:45 pwindy 阅读(61) 评论(0) 推荐(0)
• git中Please enter a commit message to explain why this merge is necessary.
  摘要：Please enter a commit message to explain why this merge is necessary. 请输入提交消息来解释为什么这种合并是必要的 git 在pull或者合并分支的时候有时会遇到这个界面。可以不管(直接下面3,4步)，如果要输入解释的话就需要: 1 阅读全文
  posted @ 2021-06-28 21:41 pwindy 阅读(159) 评论(0) 推荐(0)
• Vue中使用Ajax与后台交互
  摘要：一、下载依赖包 npm install --save axios 二、封装 ajax 请求模块 2.1 api/ajax.js /* ajax 请求函数模块 */ import axios from 'axios' export default function ajax (url = '', da 阅读全文
  posted @ 2021-06-28 15:35 pwindy 阅读(375) 评论(0) 推荐(0)
• 建立远程仓库分支---git---码云
  摘要：1.先在远程仓库(码云)建立index-swiper分支(线上分支) 2.把线上分支(index-swiper)拉到本地 git pull 3.在本地，切换到index-swiper分支， git checkout index-swiper 4.此时，本地已经是index-swiper分支的环境 5 阅读全文
  posted @ 2021-06-28 10:42 pwindy 阅读(381) 评论(0) 推荐(0)
• vue项目在移动端本地运行及本地调试
  摘要：手机端本地运行 1、确保手机和电脑连接同一个wifi 2、查询电脑的IP地址 （WIN+R ，命令：ipconfig 找到IPv4地址） 3、修改vue项目config下index.js的host内容替换为第二步查找的IP地址 4.重新运行项目，百度'草料二维码'，利用草料二维码将运行地址生成二维码 阅读全文
  posted @ 2021-06-28 10:29 pwindy 阅读(1674) 评论(0) 推荐(0)
• 布局总结三: icon图标+标题上下两排排列
  摘要：效果展示： 方法一：通过rem来，设置固定的宽高(width:100%,height:3.75rem) 1rem = 50px html布局代码 <div class="icon_wrap"> <div class="icon_squ" v-for="item in iconList" :key=" 阅读全文
  posted @ 2021-06-27 12:54 pwindy 阅读(530) 评论(0) 推荐(0)
• vue中在data中引入图片的路径方法
  摘要：错误的引入方式： export default { data () { return{ imgUrl_homePage:'@/assets/img/homePage_active.png' } } } 因为webpack是按字符号打包的，正确的引入方式： 1.import在外部引入 import i 阅读全文
  posted @ 2021-06-26 11:24 pwindy 阅读(862) 评论(0) 推荐(0)
• 布局总结二：宽高比固定比例---移动端
  摘要：宽：高=31.25% 方式一： width: 100%; height: 32.5vw;（一些旧的浏览器会存在不兼容的问题） 方式二： overflow: hidden; width: 100%; height: 0; padding-bottom: 31.25%; 阅读全文
  posted @ 2021-06-25 16:25 pwindy 阅读(146) 评论(0) 推荐(0)
• 在vue中使用vue-awesome-swiper插件
  摘要：1.在命令行里面输入 npm install vue-awesome-swiper@2.6.7 --save 2.在main.js文件里面写入一下代码 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/ 阅读全文
  posted @ 2021-06-25 16:15 pwindy 阅读(240) 评论(0) 推荐(0)
• 布局总结一：css样式布局总结 页面头部(返回+搜索+城市)
  摘要：效果显示： 1.html代码 <template> <div class="home_main"> <div class="home_back"> <div class="iconfont icon-back"></div> </div> <div class="home_input"> <span 阅读全文
  posted @ 2021-06-23 16:56 pwindy 阅读(164) 评论(0) 推荐(0)
• 在vue中定义全局变量文件 varibles.styl （stylus相关css预处理器）
  摘要：1.新建varibles.styl文件，定义一个背景颜色的全局变量 注意格式： 1.#00bcd4没有带引号 2.没有输出符号 2.在组件中的style部分引入新建的varibles.styl文件 3.在样式中使用全局变量 阅读全文
  posted @ 2021-06-23 16:31 pwindy 阅读(265) 评论(0) 推荐(0)
• 移动端meta标签配置
  摘要：<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maxmum-scale=1.0,user-scalable=no"> 作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟 阅读全文
  posted @ 2021-06-22 11:12 pwindy 阅读(453) 评论(0) 推荐(0)
• 单页应用&多页应用
  摘要：单页应用 前端路由 1.页面跳转 JS渲染 2.优点：页面切换快 3.缺点：首屏时间稍慢，SEO差(搜索引擎只认识HTML内容，不认识JS内容) 多页应用 后端路由 1.页面跳转 后端返回html 2.优点：首屏时间快，SEO效果好(搜索引擎只认识HTML内容，不认识JS内容) 3.缺点：页面之间的 阅读全文
  posted @ 2021-06-22 10:59 pwindy 阅读(42) 评论(0) 推荐(0)
• 14款前端常用的富文本编辑器插件
  摘要：参考---https://mp.weixin.qq.com/s/PyUzOIKNjPukaH7QNQLIfw 阅读全文
  posted @ 2021-06-22 10:47 pwindy 阅读(734) 评论(0) 推荐(0)
• git上传简单的命令行分析
  摘要：1.git status 显示本地仓库有哪些新增或修改的文件 2.git add . 把所有文件增加到本地的git缓冲区 3.git commit -m 'project init' 4.git push 把本地仓库的文件上传到远程仓库 阅读全文
  posted @ 2021-06-21 14:57 pwindy 阅读(38) 评论(0) 推荐(0)
• vue环境配置相关 简单了解
  摘要：1.安装LTS(long time support长期维护的)版本的node 2.npm node的一个包管理工具 3.webpack 流行的前端打包编译工具 4.vue-cli vue框架的脚手架 git bash工具:是windows上的一个小型的Linux操作系统 cmd：是windows下的 阅读全文
  posted @ 2021-06-21 14:31 pwindy 阅读(63) 评论(0) 推荐(0)
• vue2自定义指令的作用
  摘要：自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。 1.下面定义了一个v-test指令绑定数据name <template> <div class="hello"> <di 阅读全文
  posted @ 2021-06-11 17:37 pwindy 阅读(298) 评论(0) 推荐(0)
• 自定义指令详解 vue
  摘要：1.自定义指令里面的方法 5个 bind(){} 当绑定的时候触发，只能触发一次 inserted(){} 主方法，读取数据 update(){} 更新数据时候触发 componentUpdated(){} 组件完成一次更新时候触发 unbind(){} 接触绑定的时候触发 2.主方法里面的5个参数 阅读全文
  posted @ 2021-06-10 18:03 pwindy 阅读(86) 评论(0) 推荐(0)
• 文档打印 js
  摘要：文档打印的代码： window.print() 阅读全文
  posted @ 2021-06-09 10:33 pwindy 阅读(39) 评论(0) 推荐(0)
• 通过Export2Zip实现表格内容下载成为excel文件
  摘要：代码如下 // 下载 handleDownload() { this.downloadLoading = true import('@/vendor/Export2Zip').then(zip => { const tHeader = ['Id', 'Title', 'Author', 'Readi 阅读全文
  posted @ 2021-06-08 16:22 pwindy 阅读(212) 评论(0) 推荐(0)
• 父子组件之间传递函数 vue
  摘要：1.父组件定义handleSuccess和beforeUpload两个函数，分别通过“on-success”和"before-upload"两个函数名称传递给子组件 1.1.父组件代码如下： 2.子组件通过props接收父组件传递过来的“on-success”和"before-upload"两个函数 阅读全文
  posted @ 2021-06-07 11:59 pwindy 阅读(995) 评论(0) 推荐(0)
• 拖拽事件 h5
  摘要：拖放是 HTML5 中非常常见的功能, 链接和图片默认是可拖动的，不需要 draggable 属性。 在拖放的过程中会触发以下事件 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后 阅读全文
  posted @ 2021-06-07 11:15 pwindy 阅读(71) 评论(0) 推荐(0)
• e.preventDefault()与e.stopPropagation()的区别
  摘要：1.e.stopPropagation()阻止事件冒泡 2.e.preventDefault()阻止事件默认行为 3.return false等效于同时调用e.preventDefault()和e.stopPropagation() 阅读全文
  posted @ 2021-06-07 10:46 pwindy 阅读(173) 评论(0) 推荐(0)
• 有复选框选择项的table下载 vue+elementui
  摘要：1.注意复选框的引入 2.通过el-table标签上的selection-change事件可以获取到被选中的对象(数组形式) 3.通过Export2Excel组件完成下载 阅读全文
  posted @ 2021-06-04 11:41 pwindy 阅读(229) 评论(0) 推荐(0)
• 返回上一页 vue
  摘要：1.返回上一页 this.$router.go(-1) 2.返回上一页的指定页面 this.$router.push({ path: '/dashboard' }) 阅读全文
  posted @ 2021-06-03 17:10 pwindy 阅读(57) 评论(0) 推荐(0)
• vue中的this.$emit(‘input‘,this.val)；是什么意思?
  摘要：子组件在传值的时候，选用input，如this.$emit(‘input’,val)，在父组件直接用v-model绑定，就可以获取到了 而子组件也可以通过$emit(‘input’,false)，去改变父组件中v-model 和 子组件中 value 的值 。例子： 子组件 <template> < 阅读全文
  posted @ 2021-06-03 15:32 pwindy 阅读(1858) 评论(0) 推荐(0)
• +new Date()---转换成时间戳
  摘要：1.new Date("1991-04-15 09:09:36") 结果： Mon Apr 15 1991 09:09:36 GMT+0900 (中国夏令时间) 2.+new Date("1991-04-15 09:09:36") 把具体的年月日格式转换成时间戳，方便前端向后台传递数据 结果： 67 阅读全文
  posted @ 2021-06-02 18:01 pwindy 阅读(831) 评论(0) 推荐(0)
• Vue Computed中get 和set讲解
  摘要：一、Get 一般情况下，我们只是使用了computer中的gettter属性，默认只有 getter，我们只是单纯的使用了gettter属性 就像下面的例子 二、Set 只有当computed监测的值变化的时候，也就是我下面例子中的fullName变化的时候，set才回被调用 <div class= 阅读全文
  posted @ 2021-06-02 11:33 pwindy 阅读(4203) 评论(0) 推荐(0)
• Vue修饰符详解
  摘要：一、事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏 阅读全文
  posted @ 2021-06-02 11:23 pwindy 阅读(306) 评论(0) 推荐(0)
• vue中的.sync修饰符用法及原理详解
  摘要：vue中我们经常会用v-bind(缩写为:)给子组件传入参数。或者我们会给子组件传入一个函数，子组件通过调用传入的函数来改变父组件的状态。例如： //父组件给子组件传入一个函数 <MyFooter :age="age" @setAge="(res)=> age = res"> </MyFooter> 阅读全文
  posted @ 2021-06-02 10:53 pwindy 阅读(565) 评论(0) 推荐(0)
• Vue之sortable实现排序功能
  摘要：1.vue代码 <template> <el-table @selection-change="handleSelectionChange" @sort-change="sortChange" v-loading="loading" id = "TableColumnID" element-load 阅读全文
  posted @ 2021-06-01 17:48 pwindy 阅读(3877) 评论(0) 推荐(0)
• 通过Export2Excel实现表格内容下载成为excel文件
  摘要：代码如下 // 下载 handleDownload() { this.downloadLoading = true import('@/vendor/Export2Excel').then(excel => { // excel表格的表头 const tHeader = ['timestamp', 阅读全文
  posted @ 2021-06-01 17:35 pwindy 阅读(624) 评论(0) 推荐(0)
• el-form的用法 elementui
  摘要：1.作为弹框的el-form，点击出现弹框内容 clearValidate移除表单项的校验结果 handleCreate() { this.resetTemp() this.dialogStatus = 'create' this.dialogFormVisible = true this.$nex 阅读全文
  posted @ 2021-06-01 15:36 pwindy 阅读(2689) 评论(0) 推荐(0)
• el-select设置clearable属性
  摘要：参考 阅读全文
  posted @ 2021-06-01 11:27 pwindy 阅读(6818) 评论(0) 推荐(0)
• vue this,$set方法
  摘要：什么是this.$set? 为什么要用? 怎么用? 1.什么是this.$set?为什么要用? 当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就是解决这个问题的啦。官方解释：向响应式 阅读全文
  posted @ 2021-06-01 10:39 pwindy 阅读(279) 评论(0) 推荐(1)