vue项目部署,自动清除缓存配置

  • Post author:
  • Post category:vue

清除文件缓存 1.index.html 文件添加 http-equiv(http 响应头) 通过在head标签中添加meta,当浏览器访问index.html时,会向服务器重新请求静态资源。该方法了解即可,不推荐使用,会导致用户每次访问程序都需要重新请求服务器,所有静态资源都无法使用缓存,浪费流量,网络压力大。 // 设定网页的到期时间,一旦网页过期,必须到服务器上重新传输。 <meta h…

继续阅读 vue项目部署,自动清除缓存配置

Vue如何将获取到的时间戳对象转为日期格式?

  • Post author:
  • Post category:vue

在Vue前端开发过程中获取的时间可能获取到的是一段时间戳,这样的数据显示在页面上会影响页面的美观效果,所以大多时候会直接将获取到的时间戳转换成日期格式显示出来. (1)确保自己的数据已经能显示在页面上可以看到了,否则你转换成功也显示不出来你的转换效果 (2)在跟自己书写的同页面下新建一个filter文件夹用于存放自己转换日期的js文件 书写如下代码: export function datePar…

继续阅读 Vue如何将获取到的时间戳对象转为日期格式?

Vue3 第二十三篇:jsx工具栏组件

  • Post author:
  • Post category:vue

1.代码 import { ref } from 'vue' // 整体排版 const RightHeader = () => { // 样式 let toolsLeft = { border: "0px #000 solid", float: "left" } //样式 let toolsRight = { float: "right" } return ( <> <d…

继续阅读 Vue3 第二十三篇:jsx工具栏组件

前端爬坑之路——VUE动态添加DOM节点

  • Post author:
  • Post category:vue

在实际项目当中大家一定也会遇到动态添加一行新的DOM节点,例如: 点击添加动态生成一行,我拿到时,很常规的想到 v-html 通过str += <p>内容</p> 添加,但里面有element-ui 会自动过滤掉了显示不出来(具体我已经试过),然后跳出思维,换一种方式实现 通过 v-for=“item in num” ,添加 num +=1 ,就完美的解决,自动更新新的节点…

继续阅读 前端爬坑之路——VUE动态添加DOM节点

vue3 json格式化展示

  • Post author:
  • Post category:vue

在前台我们需要展示一段json数据,希望能够格式化展示,能够自动的换行和装换符号。如下图 为展示此图,我们分情况讨论,分为前端接收的数据为json格式或string格式 数据为json格式 上图数据,我直接放入 标签即可格式化显示 <pre>{{ record.value }}</pre> 数据为String格式 如果数据不是json格式,我们则需要对数据进行格式化或使用j…

继续阅读 vue3 json格式化展示

浅学vue

  • Post author:
  • Post category:vue

浅学vue 官方文档 概述 Soc原则:关注点分离原则 Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 : 给用户看,刷新后台给的数据 网络通信 : axios 页面跳转 : vue-router Vue-UI : ICE , Element UI 1.1、Vue.js是什么? ​ Vue (读音 /vjuː/,类似于 view ) 是一套用…

继续阅读 浅学vue

vue-avue下拉菜单触发事件

  • Post author:
  • Post category:vue

效果图(一个弹窗加下拉选择框的点击事件),用处应该很多的。 定义一个表单或表格 <avue-form ref="myform" :option="option" v-model="form" @selection-change="handleSelectionChange" :upload-preview="uploadPreview" :upload-error="uploadError"…

继续阅读 vue-avue下拉菜单触发事件

使用vue自定义指令实现一个校验input只能输入数字及保留两位小数的全局指令

  • Post author:
  • Post category:vue

目录 前言 1. 定义全局指令 2. 使用全局指令 3. 代码优化 3.1优化后的代码如下: 总结 前言 最近在开发时,遇到了很多地方要求限制输入框的数据为数字及保留两位小数的需求,因此借助vue的自定义指令封装了一个全局指令,以此记录。 直接上代码: 1. 定义全局指令 // 注意:使用此指令后数据格式为String,因此如果涉及到数据运算时需要注意数据类型 Vue.directive('lim…

继续阅读 使用vue自定义指令实现一个校验input只能输入数字及保留两位小数的全局指令

vue 跳转新页面并传参

  • Post author:
  • Post category:vue

前言 最近开发过程中有个新的需求,需要点击事件后跳转新的页面然后通过传参的数据展示表格。 具体来说 ,在一个Modal容器中,有一行字 “XXX目录”,点击这个目录,就会跳转新的页面,将需要的参数传给新页面的组件,然后向后端获取数据并且展示表格。 因为是在项目中,我们肯定要使用路由的方式。 思路 首先查了一下有两种方式打开新页面 this.$router.push() this.$router.r…

继续阅读 vue 跳转新页面并传参

Mac系统下搭建vue开发环境

  • Post author:
  • Post category:vue

1.首先安装brew /usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)" 输入 brew -v 查看 brew 版本 安装 nodejs 方法一: brew install nodejs 此方法安装过慢 博主没有时间等待 直接选择方法二: 方法二: 到 nodejs官…

继续阅读 Mac系统下搭建vue开发环境