Vue.js

  • Vue实现点击按钮下载文件的操作代码(后端Java)

    上篇文章给大家介绍过vue实现点击按钮下载文件功能,今天继续vue点击按钮下载文件的话题。 最近项目中需要实现点击按钮下载文件的需求,前端用的vue,因为文件是各种类型的,比如图片、pdf、word之类的。这里后端是可以返回文件的地址给前端的,但我看了下网上各种五花八门的答案,感觉都不是我想要的。 因为不确定文件是哪种类型的,所以我们在保存文件到数据库的时候,应该把文件的 Content-Type 一起存入,这样从数据库取出返回前端的时候,带上 Content-Type 标识是哪种类型的文件,前端解析即可。 1、后端代码 这里我先写后端的接口,考虑一下后端需要什么东西。因为文件信息已经提前存入…

    Vue.js 2021年8月23日
    0 40 0
  • 图文详解keep-alive如何清除缓存

    目录 开篇场景 使用v-for直接渲染 直接用自定义组件渲染 keep-alve 强大的缓存存在的问题 总结 开篇场景 我的项目是前后端没有分离的,技术栈是layui+vue+jq,vue是我后面引入的,为了能够更好的组件化,将页面组件化,减少代码重复量,因为jq的页面需要经常获取dom 元素,导致页面非常的冗余,jq 的页面也不好做组件化,将页面的功能抽离封装,所以我引入了vue,最近需要是实现一个需求,就是多页面缓存,通过点击左边的菜单栏,右边展示页面,但是需要将点击过的页面都进行缓存,如下图 这是我做的一个简单的例子 使用v-for直接渲染 刚开始我的想法是设计一个数组,每次点击的时候将…

    2021年8月15日
    0 38 0
  • Vue中侦听器的基本用法示例

    目录 前言 一、侦听器的基本用法 二、侦听器的格式 三、实现刚进入页面就触发监听和深度监听 深度监听 深度监听返回侦听对象子属性的值 最后 前言 Vue 通过watch选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。 一、侦听器的基本用法 <div id=”demo”>{{ fullName }}</div> var vm = new Vue({ el: ‘#demo’, data: { firstName: ‘Foo’, lastName: ‘Bar’, fullName: ‘Foo Bar’ }, wa…

    Vue.js 2021年8月15日
    0 34 0
  • 使用Vite2+Vue3渲染Markdown文档的方法实践

    目录 自定义 Vite 插件 使用 vite-plugin-markdown Import Front Matter attributes Import compiled HTML (Mode.HTML) Import ToC metadata (Mode.TOC) Import as a React component (Mode.REACT) Import as a Vue component (Mode.VUE) 写在最后 大部分使用 Vite2 的开发者遇到的一个问题,就是文档里并没有相关支持 Markdown 的介绍,那么如果想要在 Vite 项目中支持 Markdown 引入并渲染…

    Vue.js 2021年8月15日
    0 39 0
  • vue实现简易计时器组件

    在做项目中难免会碰到需要实时刷新,广告动画依次出现等等需求,刚最近基于业务需求,需要实现一个累加通话时长的计时器,这时候就需要定时器登上我们的代码舞台了,其实对于计时器,它的原理就是通过定时器来实现的,那么在写业务需求之前,我先说说关于定时器的一些知识。 window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval。 在Javascript中,代码一般都是同步执行的,但定时器却是异步执行的。 window.setTimeout(callback,delay); //callback:回调函数 delay:时间间隔时长 wi…

    Vue.js 2021年8月15日
    0 39 0
  • vue实现简易计时器组件

    在做项目中难免会碰到需要实时刷新,广告动画依次出现等等需求,刚最近基于业务需求,需要实现一个累加通话时长的计时器,这时候就需要定时器登上我们的代码舞台了,其实对于计时器,它的原理就是通过定时器来实现的,那么在写业务需求之前,我先说说关于定时器的一些知识。 window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval。 在Javascript中,代码一般都是同步执行的,但定时器却是异步执行的。 window.setTimeout(callback,delay); //callback:回调函数 delay:时间间隔时长 wi…

    Vue.js 2021年8月15日
    0 34 0
  • vue.js中methods watch和computed的区别示例详解

    目录 前言 介绍 一、作用机制上 二、从性质上 三、watch和computed的对比 四、methods不处理数据逻辑关系,只提供可调用的函数 五、从功能的互补上看待methods,watch和computed的关系 六、利用computed处理watch在特定情况下代码冗余的现象,简化代码 总结 computed watch 前言 这篇文章主要简述vue中的watch和computer区别,还有methods 首先,先说一下这几个不同在哪里,那当然是长得不一样啦~~~, 哈哈哈哈哈不开玩笑了,截下来进入正题。 介绍 methods : 挂载在对象上的函数,通常是 Vue 示例本身 或 Vu…

    2021年8月15日
    0 39 0
  • 一篇超详细的Vue-Router手把手教程

    目录 1,router-view 2,router-link 3,重定向redirect 4,路由别名 5,路由传参props 5.1,布尔模式 5.2,对象模式 5.3,函数模式 6,路由守卫 6.1,全局前置守卫beforeEach 6.2,全局解析守卫beforeResolve 6.3,全局后置钩子afterEach 6.4,路由独享守卫beforeEnter 6.5,组件内的守卫 6.6,完整的导航解析流程 7,路由元信息 8,过渡动效 9,滚动行为 10,完整路由配置 总结 最近在重温vue全家桶,再看一遍感觉记忆更深刻,所以专门记录一下(本文vue-router版本为v3.x)。 …

    Vue.js 2021年8月15日
    0 34 0
  • 浅谈vue3在项目中的逻辑抽离和字段显示

    目录 逻辑分层 将各个区域业务分开 这样做的优势 这样的场景应该如何处理 优化 reactive 不一定非要写在setup函数中 如何在页面上直接显示值 逻辑分层 我们在使用vue3开发项目的时候, 如何进行【区域分层】呢???? 举一个简单的小粒子 一个区域有【查询逻辑、修改后的保存逻辑、新增逻辑、删除逻辑】 这个页面可能还有其他的区域。A区域、B区域,C区域…【有很多逻辑】 这个时候我们可以将一个区域的逻辑分离出去 将各个区域业务分开 export default { setup () { let {queryDo,addDo,delDO,EditDo}=allFun(); q…

    Vue.js 2021年8月15日
    0 36 0
  • vue项目适配大屏端的方法示例

    浅析rem 首先rem是css单位,相比于px固定的像素单位,rem更加的灵活,还有现在也比较好的vm。如果从未了解过,可以先过过眼 rem自适应。CSS3的REM设置字体大小 font size of the root element. 简单来说,rem就是根据html元素的字体大小来计算单位的。我们的需求就是说,根据不同的分辨率,我们元素的大小能够有所对应的变化,在视觉上能够做到很舒服的效果。想想我们在做pc端的时候,一般都是中间固定比如1200px像素,然后最小1200px,两边留白,这样我们无论放大缩小都不会影响效果。但是现在移动端各种屏幕的出现,适应性就更加的强烈。根据分辨率的不同让…

    Vue.js 2021年8月15日
    0 36 0
  • Vue3异步数据加载组件suspense的使用方法

    目录 前言 创建组件 总结 前言 Vue3 增加了很多让人眼前一亮的特征,suspense 组件就是其中之一,对处理异步请求数据非常实用,本文通过简单的实例介绍其使用方法,如对其有兴趣,可以参阅官方文档。 通常组件在正确呈现之前需要执行某种异步请求是很常见的,通常是通过设计一种机制开发人员按照机制处理这个问题,有很多很好的方法实现这个需求。 例如,从一个 API 异步获取数据,并希望在获取响应数据解析完时显示一些信息,如 loading 效果,在Vue3中可以使用 suspense 组件来执行这样的需求。 创建组件 创建一个组件并将其命名为Peoples.vue,其组件代码如下: <te…

    Vue.js 2021年8月15日
    0 37 0
  • 图文详解keep-alive如何清除缓存

    目录 开篇场景 使用v-for直接渲染 直接用自定义组件渲染 keep-alve 强大的缓存存在的问题 总结 开篇场景 我的项目是前后端没有分离的,技术栈是layui+vue+jq,vue是我后面引入的,为了能够更好的组件化,将页面组件化,减少代码重复量,因为jq的页面需要经常获取dom 元素,导致页面非常的冗余,jq 的页面也不好做组件化,将页面的功能抽离封装,所以我引入了vue,最近需要是实现一个需求,就是多页面缓存,通过点击左边的菜单栏,右边展示页面,但是需要将点击过的页面都进行缓存,如下图 这是我做的一个简单的例子 使用v-for直接渲染 刚开始我的想法是设计一个数组,每次点击的时候将…

    2021年8月14日
    0 42 0
  • Vue中侦听器的基本用法示例

    目录 前言 一、侦听器的基本用法 二、侦听器的格式 三、实现刚进入页面就触发监听和深度监听 深度监听 深度监听返回侦听对象子属性的值 最后 前言 Vue 通过watch选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。 一、侦听器的基本用法 <div id=”demo”>{{ fullName }}</div> var vm = new Vue({ el: ‘#demo’, data: { firstName: ‘Foo’, lastName: ‘Bar’, fullName: ‘Foo Bar’ }, wa…

    Vue.js 2021年8月14日
    0 54 0
  • 使用Vite2+Vue3渲染Markdown文档的方法实践

    目录 自定义 Vite 插件 使用 vite-plugin-markdown Import Front Matter attributes Import compiled HTML (Mode.HTML) Import ToC metadata (Mode.TOC) Import as a React component (Mode.REACT) Import as a Vue component (Mode.VUE) 写在最后 大部分使用 Vite2 的开发者遇到的一个问题,就是文档里并没有相关支持 Markdown 的介绍,那么如果想要在 Vite 项目中支持 Markdown 引入并渲染…

    Vue.js 2021年8月14日
    0 38 0
  • 使用Vite2+Vue3渲染Markdown文档的方法实践

    目录 自定义 Vite 插件 使用 vite-plugin-markdown Import Front Matter attributes Import compiled HTML (Mode.HTML) Import ToC metadata (Mode.TOC) Import as a React component (Mode.REACT) Import as a Vue component (Mode.VUE) 写在最后 大部分使用 Vite2 的开发者遇到的一个问题,就是文档里并没有相关支持 Markdown 的介绍,那么如果想要在 Vite 项目中支持 Markdown 引入并渲染…

    Vue.js 2021年8月14日
    0 31 0