分类：VUE

2020
10-21

vue中template的三种写法示例

第一种(字符串模板写法):直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写.<!DOCTYPEhtml><html><!--WARNING!MakesurethatyoumatchallQuasarrelatedtagstothesameversion!(Belowit's"@1.7.4")--><head><!--<linkhref="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.min.css"rel="externalnofollow"rel="externaln... 继续阅读 >
2020
10-21

Vue使用v-viewer实现图片预览

Vue使用v-viewer实现图片预览 本文实例为大家分享了Vue使用v-viewer实现图片预览的具体代码，供大家参考，具体内容如下1.安装依赖npminstallv-viewer--save2.在main.js中引入importViewerfrom'v-viewer'//图片查看插件import'viewerjs/dist/viewer.css'Vue.use(Viewer)Viewer.setDefaults({Options:{'inline':true,'button':true,'navbar':true,'title':true,'toolbar':true,'tooltip':true,'movable':true,'zoomable':true,'r... 继续阅读 >
2020
10-20

Vue+axios封装请求实现前后端分离

本文实例为大家分享了Vue+axios封装请求实现前后端分离的具体代码，供大家参考，具体内容如下前言我们需要进行前后端分离开发，那么前后端的跨域问题就是无可避免的问题，前后端的请求也是无可避免的，Vue之中有一个请求组件是axios，我们可以对axios进行封装作为我们请求的工具组件#一、封装axiosvue.config.js配置文件module.exports={configureWebpack:{resolve:{alias:{api:'@/api',assets:'@/assets',... 继续阅读 >
2020
10-20

v-model的基本用法解析

一、本节说明前面的章节我们学习了v-bind指定，可以通过模型数据去影响视图。我们都知道VUE是支持双向数据绑定的，那么视图是如何影响数据的呢？那就要学到我们这一节的内容v-model。v-model可以将表单输入绑定到对应的模型数据。二、怎么做我们通过v-model实现一个简单的需求通过表单input绑定模型数据message，表单数据变化data.message也发生变化然后通过Mustache表达式，将变化之后的message数据显示到视图页面上三、效果四... 继续阅读 >
2020
10-20

SpringBoot+Vue开发之Login校验规则、实现登录和重置事件

SpringBoot+Vue开发之Login校验规则、实现登录和重置事件 一、Login校验规则1、校验规则写法可参考Element-ui官网文档https://element.eleme.cn/#/zh-CN/component/form2、Login.vue页面 <template><divclass="login_container"><!--登录块--><divclass="login_box"><!--头像--><divclass="acator_box"><imgsrc="../assets/logo.png"/></div><!--表单区域--><el-formref="loginFormRef":rules="loginRules":model="loginForm"class="login_fo... 继续阅读 >
2020
10-18

vue任意关系组件通信与跨组件监听状态vue-communication

众所周知，组件式开发方式给我们带来了方便，不过也引入了新的问题，组件之间的数据就像被一道无形的墙隔开，如果我们希望临时让两个组件直接通信，vuex太巨，而$emit又不好维护provider不可控这个时候就该今天的主角vue-communication登场了！vue-communication介绍他是一个可观测可调试的vue组件通信方案任意关系组件可直接通信支持跨组件监听数据变化支持发送离线数据安装yarnaddvue-communication//或者np... 继续阅读 >
2020
10-18

详解VUE中的插值( Interpolation)语法

背景分析在传统的html页面中我们可以定义变量吗？当然不可以，那我们假如希望通过变量的方式实现页面内容的数据操作也是不可以的。当然我们可以在服务端通过定义html标签库方式，然后以html作为模板，在服务端解析也可以实现，但这样必须通过服务端进行处理，才可以做到，能不能通过一种技术直接在客户端html页面中实现呢？VUE中的插值语法这种语法是为了在html中添加变量，借助变量方式与js程序中的变量值进行同步，进而简化代码... 继续阅读 >
2020
10-15

vue使用Sass时报错问题的解决方法

vue使用Sass时报错问题的解决方法 sass：安装：npmconfigsetregistryhttps://registry.npm.taobao.org///sass-node报错的话，使用镜像源cnpminstallnode-sasssass-loader--save-dev再安装一次npminstallnode-sass--registry=https://registry.npm.taobao.orgpackage.json中更改sass-loader版本"sass-loader":"^7.3.1",使用：页面中直接使用或者@代替src（3.x中@无需配置，2.x中需要在webpack文件中配置）问题描述：下面这个问题是我使用sass时碰见的报... 继续阅读 >
2020
10-15

Vue实现鼠标经过文字显示悬浮框效果的示例代码

需求在所做的Vue项目中，需要在鼠标移动文字框的时候显示一些详细信息。最终实现的效果如下：鼠标经过button的时候，可以在光标附近显示出一个悬浮框，显示框里面显示时间和值的信息，鼠标移出button元素的时候，这个显示框会消失。分析涉及到鼠标的移动事件。鼠标事件有下面这几种：1、onclick(鼠标点击事件)box.onclick=function(e){console.log(e)}2、onmousedown(鼠标按下事件)box.onmousedown=function(e){console.lo... 继续阅读 >
2020
10-13

vue实现移动端返回顶部

本文实例为大家分享了vue实现移动端返回顶部的具体代码，供大家参考，具体内容如下HTML:<template><divclass="home"><divv-for="ysin100":key="ys"><p>1</p></div><div@click="back"class="back1"v-show="isShow">▲</div></div></template>JS:<script>exportdefault{data(){return{isShow:true};},handleScroll(){//handleScroll和methods是同级if(window.pageYOffset>300){//... 继续阅读 >
2020
10-10

如何手写简易的 Vue Router

前言还是那样，懂得如何使用一个常用库，还得了解其原理或者怎么模拟实现，今天实现一下vue-router。有一些知识我这篇文章提到了，这里就不详细一步步写，请看我手写一个简易的Vuex基本骨架Vue里面使用插件的方式是Vue.use(plugin)，这里贴出它的用法：安装Vue.js插件。如果插件是一个对象，必须提供install方法。如果插件是一个函数，它会被作为install方法。install方法调用时，会将Vue作为参数传入。这个... 继续阅读 >
2020
10-10

详解Vue中Axios封装API接口的思路及方法

一、axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。在一个项目中我们如果要使用很多接口的话，总不能在每个页面都写满了.get()或者.post()吧？所以我们就要自己手动封装一个全局的Axios网络模块，这样的话就既方便也会使代码量不那么冗余。安装>npminstall... 继续阅读 >
2020
10-10

在Vue中使用Echarts实例图的方法实例

前言由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。但是新手猛的上手的话，可能会有点束手无策，所以这篇就是来写一点入门的内容，外加自己一点的小心得。一、首先要在项目中下载echarts依赖npminstallecharts-S//或者使用淘宝的镜像cnpminstallecharts-S二、然后就要再main.js文件中来进行全局引入//引入echartsimportechartsfrom'echarts'Vue.prototype.$echarts=ech... 继续阅读 >
2020
10-10

基于Vue.js+Nuxt开发自定义弹出层组件

基于Vue.js+Nuxt开发自定义弹出层组件 今天给大家分享VPopup基于Vue.js构建的轻量级移动端弹出框组件，详情如下所示：一款融合了Vant、NutUI等热门Vue组件库中的Popup弹层、Dialog对话框、Toast提示框、ActionSheet动作面板框、Notify通知框等功能。快速使用在main.js中引入组件//引入弹窗PopupimportPopupfrom'./components/popup'Vue.use(Popup)支持如下两种组件式及函数式调用插件。组件式<template><viewid="root">...<!--弹窗模板--><v-popupv... 继续阅读 >
2020
10-10

vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法

vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法 一、vue中解决chrome浏览器自动播放音频需求有新订单的时候，页面自动语音提示和弹出提示框；问题chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。严格地来说，是Chrome不允许在用户对网页进行触发之前播放音频。不光是这样，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，使用js直接调用.play()方法的话，chrome都会抛出如下错误：Uncaught(inpromise)DOMException；解决... 继续阅读 >
2020
10-10

在vue中使用Echarts画曲线图的示例

现实的工作中,数据不可能写死的，所有的数据都应该通过发送请求进行获取。所以本项目的需求是请求服务器获得二维数组，并生成曲线图。曲线图的横纵坐标均从获得的数据中取得。Echarts官方文档：https://ecomfe.github.io/echarts-doc/public/en/index.html前端框架使用vue，服务器使用express搭建，交互使用axios。一.引入vue-resource通过npm下载vue-resourcenpminstallvue-resource--save在main.js中引入vue-resourc... 继续阅读 >