分类：Vue

2021
08-22

使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)

使用Vue3+Vant组件实现App搜索历史记录功能(示例代码) 最近在开发一款新的app项目，我自己也是第一次接触app开发，经过团队的一段时间研究调查，决定使用Vue3+Vant前端组件的模式进行开发，vue2开发我们已经用过几个项目了，所以决定这一次尝试使用Vue3来进行前段开发。我刚开始负责搜索功能的开发，有历史搜索记录的需求，一开始我认为这是记录的存储信息也会放在一个数据库表里面，但经过一番调查，发现并不是这样，而是要存储在本地。但是网上的方法也并没有完全解决问题，经过一番... 继续阅读 >
2021
08-22

vue3组合API中setup、 ref、reactive的使用大全

vue3组合API中setup、 ref、reactive的使用大全 1.初识setUp的使用简单介绍下面的代码功能：使用ref函数，去使用监听某一个变量的变化，并且把它渲染到视图上。setUp函数是组合API的入口函数。这个是非常重要的。setUp可以去监听变量的变化哈！我们将会利用它ref在vue中内置，需要导入。<template><div>{{countNum}}</div><button@click="handerFunc">按钮</button></template><script>import{ref}from'vue'exportdefault{name:'App',setup(){//这一句表示... 继续阅读 >
2021
08-22

解决Vue+SpringBoot+Shiro跨域问题

解决Vue+SpringBoot+Shiro跨域问题 目录一、配置Vue前端1、开发跨域配置2、生产跨域配置二、配置springboot相信大家刚开始做都会遇到这个问题，在网上找了好多也不管用，都写的不全，在这里记录一下，希望对大家有所帮助一、配置Vue前端在config下index.js中配置代理信息注意：这里的跨域配置只在开发环境中有效，打包部署后，这个跨域就不起作用了，本人也是这里卡了好久，Vue前端打包后，最好部署到nginx上，用nginx可以直接解决跨域问题1、开发跨域配置proxyTabl... 继续阅读 >
2021
08-20

Vue中插槽slot的使用方法与应用场景详析

什么是插槽？我们知道在Vue中Child组件的标签的中间是不可以包着什么的。可是往往在很多时候我们在使用组件的时候总想在组件间外面自定义一些标签，vue新增了一种插槽机制，叫做作用域插槽。要求的版本是2.1.0+；插槽，其实就相当于占位符。它在组件中给你的HTML模板占了一个位置，让你来传入一些东西。插槽又分为匿名插槽、具名插槽、作用域插槽。在2.6.0中，我们为具名插槽和作用域插槽引入了一个新的统一的语法(即v-sl... 继续阅读 >
2021
08-12

vue+elementui 实现新增和修改共用一个弹框的完整代码

vue+elementui 实现新增和修改共用一个弹框的完整代码 目录一、新增二、修改element-ui是由饿了么前端团队推出的一套为开发者、设计师和产品经理准备的基于Vue.js2.0的桌面组件库，而手机端有对应框架是MintUI。整个ui风格简约，很实用，同时也极大的提高了开发者的效率，是一个非常受欢迎的组件库。一、新增1、新增按钮2、新增事件在methods中，用来打开弹窗，dialogVisible在data中定义使用有true或false来控制显示弹框**3、新增确定，弹框确定事件，新增和修改共用一个确定事... 继续阅读 >
2021
08-12

Vue+Vant实现顶部搜索栏

Vue+Vant实现顶部搜索栏  本文实例为大家分享了Vue+Vant实现顶部搜索栏的具体代码，供大家参考，具体内容如下搜索栏组件源码(SearchBar.vue)<template><sectionclass="city-search"><van-iconclass="search-icon"name="search"/><inputplaceholder="在此输入检索关键字"v-model="KeyWord"><van-iconclass="clear-icon"name="clear"v-show="KeyWord"@click="clearSearchInput"/></section></template><script>exportdef... 继续阅读 >
2021
08-10

vue ElementUI实现异步加载树

本文实例为大家分享了vueElementUI实现异步加载树的具体代码，供大家参考，具体内容如下路由文件修改importListfrom'@/components/list.vue'importAddfrom'@/components/add.vue'importTreefrom'@/components/tree.vue'importAsynTreefrom'@/components/asyntree.vue'exportdefault{routes:[{path:"/list",component:List},{path:"/add",component:Add},{path:"/add/:id",component:Add... 继续阅读 >
2021
08-08

Vue中foreach数组与js中遍历数组的写法说明

Vueforeach数组与js中遍历数组的写法场景Vue中使用Axios发送get或者post请求，发送请求时需要在js中对请求参数进行遍历并处理。接收响应时需要对响应结果进行遍历和处理。注意区分在vue和js中foreach数组的区别。实现在js中遍历数组//定义班次详细数组varbcglxiangxiList=newArray();//定义班次详细对象varbcxiangxi={};//循环传递的参数bcglXiangXiListParam.forEach(element=>{bcxiangxi.xh=element.... 继续阅读 >
2021
08-08

Vue使用自定义指令实现页面底部加水印

项目场景给项目的整个背景加上自定义水印，可以改变水印的文案和字体颜色等实现思路这里使用的技术主要是canvas,在实现水印的过程中，主要使用了canvas的特性使用canvas特性生成base64格式的图片文件，然后设置其字体大小，颜色等最后将其设置为背景图片，这就实现了页面的水印效果实现效果实现代码<template><divclass="water-marker"><divv-waterMarker="{text:'卡洛背心-版权所有',textColor:'rgb... 继续阅读 >
2021
08-08

详解从vue的组件传值着手观察者模式

目录观察者模式Vue传值第一步，我们先在main.js中注册一下bus第二步，我们开始发送消息第三步，在组件三中接收消息vue的机制观察者模式存在的意义观察者模式首先，提到观察者模式，这不禁让我想到了MVVM，MVVM架构模式感觉用到了观察者的思想。我们还是按照惯例，了解一下什么是观察者模式观察者模式，类似发布订阅模式，完成这个动作首先最少得有两个不同的对象，或者多个对象，他更像是一种一队多的依赖关系，也就是一种对象的状... 继续阅读 >
2021
08-08

如何用vue封装axios请求

其实vue封装axios是很简单的首先在src路径下建http文件夹并且创建api.jsenv.jsrequest.js这三个文件env.js文件这个文件主要就是封装我们的公共地址exportdefault{//开发环境dev:{baseUrl:"开发环境公共地址"},//测试环境testtest:{baseUrl:"测试环境公共地址"},//线上接口prod:{baseUrl:"线上环境公共地址"}};request.js文件这里主要就是创建axios以及封装请求拦截和相应拦截importaxiosfrom"ax... 继续阅读 >
2021
08-08

vue储存storage时含有布尔值的解决方案

vue储存storage时含有布尔值的解决方案 vue储存storage时含有布尔值今天遇到一个问题，需要将后台返回的true和false存到storage中去，然后用储存的这个值进行逻辑判断，但是一直判断都是错误的，后面查阅了一下资料才发现在localstorage中储存数据的时候，储存的boolean值都会变成字符串，而不是刚开始储存进去的boolean值都变成了字符串那么怎么解决呢？一：前端进行一次转化if(localStorage.getItem('布尔值')=='true'){//重新赋值为新的值'布尔值'=true}或... 继续阅读 >
2021
08-06

Vue.js中的计算属性、监视属性与生命周期详解

目录前言计算属性计算属性介绍入门案例统计价格案例getter和setter方法计算属性缓存监视属性概述代码总结Vue生命周期初始化阶段更新阶段死亡阶段总结前言本章节咱们来说一下Vue中两个非常重要的计算属性、监视属性和生命周期，不废话直接上干货计算属性计算属性介绍在模板中可以直接通过插值语法显示一些data中的数据，有些情况下我们需要对数据进行转化或者计算后显示，我们可以使用computed选项来计算，这时有些小伙伴可能就会问... 继续阅读 >
2021
08-06

Vue中利用better-scroll组件实现横向滚动功能

About最近在学习vue的过程中，仿照去哪儿网的移动端写了个小项目，旨在实践和巩固基础知识，但是今天发现去哪儿的首页上有一个组件用户体验较差，即一个横向列表使用浏览器的原生滚动实现，列表滚动起来较为生涩，很难受，于是乎决定由better-scroll重写这个组件。better-scroll介绍better-scroll是黄轶大神（没错，我学长）写的基于i-scroll的一个滚动组件，项目地址：https://github.com/ustbhuangyi/better-scroll一、滚动的实... 继续阅读 >