分类：Vue

2022
05-17

vue中v-model指令与.sync修饰符的区别详解

目录v-model.sync细微之处的区别总结功能作用场景：v-model<!--父组件--><template><!--v-model指令是语法糖--><Childv-model="model"></Child><!--把v-model指令展开后相当于下面的代码--><!--v-model绑定的默认事件是input,默认prop是value属性--><Child:value="model"@input="model=$event"></Child></template>你也可以通过子组件中的model选项来修改v-model... 继续阅读 >
2022
05-15

JS基于VUE组件实现城市列表效果

本文实例为大家分享了基于VUE组件实现城市列表效果的具体代码，供大家参考，具体内容如下基本思想是，将城市列表数据缓存在本地然后在页面上用JS实现即时模糊查询和首字母定位查询等为了保护项目，删除了部分代码效果实现H5：<template><divid="city"><divclass="search-city-back"><divclass="search-city"><imgsrc="../assets/img/Shop/search.png">... 继续阅读 >
2022
05-12

基于Vue技术实现递归组件的方法

描述本文介绍的是基于Vue技术实现递归组件的方法。用Vue实现一级列表、二级列表的展示很简单，但是想要实现无限级，光是套上一个又一个的v-for是行不通的，这个时候就需要用到递归的方法，所谓递归，就是不断调用自身，递归组件就是不断调用自身组件来实现无限级列表展示。如下图：代码实现1、tree组件在目录下创建一个tree.vue的组件。<!--tree树形组件--><template><divclass="container"><divv-for="itemintr... 继续阅读 >
2022
05-12

vue cli中env的使用指南

目录前言简介-官方示例配置前言相信使用过vueCli开发项目的小伙伴有点郁闷，正常开发时会有三个接口环境（开发，测试，正式），但是vueCli只提供了两种development,production(不包含test-单测)模式。其实这是小伙伴们没有理解vueCli文档所导致的。vueCli命令中--mode对应的.env.[mode]，而不是NODE_ENV注意除了VUE_APP_变量之外。还有两个特殊的变量：NODE_ENV：是development、production、test中的一个。... 继续阅读 >
2022
05-12

Vue实现PC端分辨率自适应的示例代码

Vue实现PC端分辨率自适应的示例代码 目录方案安装依赖引入依赖px转换成rem修改flexible.js参考博客方案lib-flexible+px2remLoaderlib-flexible：阿里可伸缩布局方案px2rem-loader：px转rem安装依赖npminstallpx2rem-loader-Dnpminstalllib-flexible-S引入依赖main.js引入lib-flexibleimport'lib-flexible'px转换成remvue-loader的options和其他样式文件loader最终是都是由build/utils.js里的方法生成的，我们只需在cssLoader后再加上一个px2remLo... 继续阅读 >
2022
05-12

vue-pdf实现文件在线预览

本文实例为大家分享了vue-pdf实现文件在线预览的具体代码，供大家参考，具体内容如下提示：记录一下vue-pdf使用方法，避免忘记，便于后面使用前言提示：以下是本篇文章正文内容，下面案例可供参考一、安装npminstall--savevue-pdf二、pdf页面显示1.html<template><divclass="pdf-box">//pdf展示<pdfclass="pdf":page="pageNum":src="pdfForm.url"@progress="loadedRatio=... 继续阅读 >
2022
05-07

springboot+vue制作后台管理系统项目

springboot+vue制作后台管理系统项目 目录一、所使用的环境配置：二、项目简介三、知识点总结（代码和配置）SpringBoot：1.Mybatis-Plus配置文件，实现分页查询：MybatisPlusConfig2.跨域配置文件：CorsConfig3.请求返回类！：Result4.pom.xml配置文件Vue：其余知识点总结：总结：学习资源来自于B站UP，up他讲的非常详细，对于熟悉两大框架很有用。我的作业源代码在文章末尾，欢迎有需要的同学，学习参考使用，内置SQL文件，导入后，开启springboot和vue服务即可使用，... 继续阅读 >
2022
05-03

Vue使用el-tree 懒加载进行增删改查功能的实现

Vue使用el-tree 懒加载进行增删改查功能的实现 关于vue的树形展示使用到项目：以树的形式异步展现效果图先放：找到element-ui的官方文档，el-tree。（地址：https://element.eleme.cn/#/zh-CN/component/tree）项目需求：以懒加载的形式展示，目录根据需求需要有新增编辑删除操作以及操作后的刷新树结构那我们现在开始吧一、懒加载：Tree的懒加载，用一个属性控制：lazy。使用lazy，就要使用load来加载数据进行渲染树原理：初始化触发load函数先加载初始数据，通过点击某个... 继续阅读 >
2022
04-30

vue实现tab切换的放大镜效果

本文实例为大家分享了vue实现tab切换的放大镜效果的具体代码，供大家参考，具体内容如下废话不多说先看效果图1.我这里并没有加遮罩层，如有需要请自行加上2.图片建议使用4k高清图片，不然放大后模糊，影响观看心情3.不用拘泥于样式，关注实现原理即可4.可能我的方法并不简便，但是也是一种思路，请大家参考实现原理第一肯定需要vue.js第二需要两张图片左边为现实图片，右边放大后的效果图其实一直存在，只不过鼠标移入现实，鼠标移... 继续阅读 >
2022
04-30

vue实现带放大镜的搜索框

本文实例为大家分享了vue实现带放大镜的搜索框，供大家参考，具体内容如下字体图标在input单标签中的用法：第一步，先在main.js中全局引入iconfont图标；第二步，给input标签动态绑定一个属性，设置值为data中的变量；第三步，将字体图标代码中的&#x改为\u代码如下：<template><divclass="login"><!--头部搜索--><divclass="top"><divclass="top-texticonfont">广州&#xe612;</div>... 继续阅读 >
2022
04-30

利用Vue Native构建移动应用的全过程记录

目录前言VueNative的特性声明式渲染双向绑定Vue.js生态系统的丰富性编译为ReactNative设置开发环境创建一个VueNative项目VueNativeUI组件视图组件Image组件TextInput组件NativeBaseUI组件双向数据绑定导航和路由状态管理访问设备API总结前言VueNative是一个JavaScript框架，旨在使用JavaScript构建可以在Android和iOS上运行的跨平台移动应用程序。通过封装ReactNative，开发人员可以使用VueNative使用V... 继续阅读 >
2022
04-30

vue3.0+vant3.0快速搭建项目的实现

vue3.0+vant3.0快速搭建项目的实现 目录一、项目的搭建二、vue3体验+vant引入2020年09月18日，vue.js3.0正式发布，去网上看了看关于3.0的教程都不够完整，但其实vuecli最新版已经支持了vue3.0项目的快速搭建，这篇文章将带你了解一下vue3.0有哪些新的改变以及如何快速搭建vue3.0项目。一、项目的搭建1.首先，nodejs的安装不用我多说了吧，nodejs官网地址。2.既然vuecli最新版已经可以快速搭建3.0了，那怎么升级到最新版呢？vue-cli官网地址，不知道vue-cli版本的执... 继续阅读 >
2022
04-30

VUE引入使用G2图表的实现

目录关于G2图表介绍使用模板中使用完整代码（柱状图）在补充一下世界地图关于G2图表介绍G2是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性使用G2，可以无需关注图表各种繁琐的实现细节，一条语句即可使用Canvas或SVG构建出各种各样的可交互的统计图表G2图表官网地址https://antv.gitee.io/zhG2图标详细开发手册https://antv-g2.gitee.io/zh/docs/api/general/chart... 继续阅读 >