分类：Vue

2020
11-22

Vue 的 v-model用法实例

Vue框架早已经不是MVVM（Mode-View-View-Model）双向绑定了。早在Vue1.0时代，Vue在刚出世的时候的确是MVVM双向绑定。自Vue2.0以来，Vue就不再是双向绑定了，而是像React一样是单向绑定MV（Model-View）了。但是，在Vue中仍保留了双向绑定的接口，v-model就是。1.基本用法<template><divid="app"><inputv-model="x">{{x}}</div></template><script>exportdefault{data(){return{x:'init'}... 继续阅读 >
2020
11-22

Vue实现购物小球抛物线的方法实例

本文介绍的是利用Vue实现购物小球抛物线的相关内容，下面话不多说了，来一起看看详细的介绍吧css片段.shop{position:fixed;top:300px;left:40px;}.ball{position:fixed;left:32px;bottom:22px;z-index:200;transition:all0.4scubic-bezier(0.49,-0.29,0.75,0.41);/*贝塞尔曲线*/}.inner{width:16px;height:16px;border-radius:50%;background-color:rgb(0,160,220);transition:... 继续阅读 >
2020
11-22

vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例

这次封装基于vuecli3+typescript实现，javascript也是同理，没有区别；自定义插件有助于我们可以将一些页面交互封装并在js或ts文件中引入实现，而不是只在.vue文件。1、实现toast插件封装（类似简易版的elementUi的message）先书写一个toast组件<template><divref="toastRef"class="toastMessageBox">{{message}}</div></template><scriptlang="ts">import{Component,Vue,Watch}from'vue-property-de... 继续阅读 >
2020
11-22

详解vue 组件注册

一、了解组件注册的两种方式1.1全局组件的注册方法//main.jsimportVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'Vue.config.productionTip=falseletHello={name:'hello',template:'这是全局组件hello'}Vue.component('hello',Hello)newVue({el:'#app',router,components:{App},template:''})上面我们就通过Vue.component()注册了一个全局组件hello，接下来分析... 继续阅读 >
2020
11-22

Django vue前后端分离整合过程解析

最近接到一个任务，就是用django后端，前段用vue，做一个普通的简单系统，我就是一搞后端的，听到vue也是比较震惊，之前压根没接触过vue.看了vue的一些文档，还有一些项目，先说一下django与vue的完美结合吧！首先是创建一个django项目django-adminstartprojectmysite#创建mysite项目django-adminstartappblog#创建blog应用一、接下来就是安装关于vue的东西了1、首先安装node.js，官网地址：https://nodejs.org/zh-cn/dow... 继续阅读 >
2020
11-19

Vue 打包的静态文件不能直接运行的原因及解决办法

问题吾辈使用vue-cli直接生成的vue模板项目，在模板之上继续开发的。然而在使用npmrunbuild打包项目时，却发现打包好的项目在浏览器中直接打开好像什么都没有？原因查看了一下打包后的index.html源码，终于发现了一个重要的点：所有涉及到路径的地方全都是以/开头的下面是吾辈打包后生成的dist目录dist:.│index.html│└─static├─css│app.b7bce283257fbd427fb1dc3fea80cee1.css│app.b7bce283257f... 继续阅读 >
2020
11-19

vue 获取到数据但却渲染不到页面上的解决方法

能获取到数据数据却渲染不到页面上问题描述：我数据全部拿到了，js里面写console.log(musics)数据打印出来都正确，但是页面里面就是不显示。很多时候对数据进行处理了，但是页面上就是没变化，没效果，用console.log打印数据都没问题，特别是数组、对象容易出现这个问题；1、this.$set(xxx)保存变量2、this.$forceUpdate(xxx)强制更新，迫使Vue实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不... 继续阅读 >
2020
11-19

vue 插槽简介及使用示例

Vue的插槽，是一种内容分发机制，但是我感觉它更加像组件的一种占位符的概念，通过插槽，等待组件外部传入复杂的内容。使用插槽的好处在以前的例子中todo-item插槽直接写在了todo-list插槽中，其实是比较不合理的，它会导致todo-list插槽比较死板，无法重用更多的其他组件。Vue.component("todo-list",{template:`<ul><todo-itemv-on:delete="handleDelete"v-for="iteminlist"data-wen="wen":title... 继续阅读 >
2020
11-19

详解Vue的mixin策略

我之前一直以为mixin的合并是以组件内的优先，即mixin的内容如果和组件内有冲突的，以组件内为准，确实存在这种情况，但是vue指定的策略更详细，下面分别记录各种情况对应的合并策略基本当一个组件使用mixin的时候，所有mixin的选项会被混入到组件自己的选项中，这部分没什么好说的，直接看代码//defineamixinobjectconstmyMixin={created(){this.hello()},methods:{hello(){console.log('hellofrommixin!'... 继续阅读 >
2020
11-19

详解vue实现坐标拾取器功能示例

需求1、搜索具体地址，自动填写经纬度，并在地图上标记2、点击地图上一点，可重新填写经纬度并且标记代码在dom新建div渲染地图<el-form-itemlabel="店铺地址"prop="address"><el-inputv-model="fristForm.address"></el-input><el-inputclass="long-lat"v-model="fristForm.longitude"placeholder="经度"></el-input><el-inputclass="long-lat"v-model="fristForm.latitude"placeholder="纬度"></el-input><el-butt... 继续阅读 >
2020
11-19

vue在图片上传的时候压缩图片

需求：上传到服务器的图片太大会导致服务器承受不了，故在前端传图片的时候将图片压缩后再传到服务器直接上代码asyncgetRealName(){letnickname=this.nickname.trim()letidnum=this.idnum.trim()letnameReg=/[\u4e00-\u9fa5]/gmletidnumReg=/^[a-z0-9]+$/iletzheng1=document.getElementById("file1").files[0]letfan1=document.getElementById("file2").files[0]if(nickname.leng... 继续阅读 >
2020
11-19

Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例

引言在与实现了语音合成、语义分析、机器翻译等算法的后端交互时，页面可以设计成更为人性化、亲切的方式。我们采用类似于聊天对话的实现，效果如下：智能客服（输入文本，返回引擎处理后的文本结果）语音合成（输入文本，返回文本以及合成的音频）如上图所示，返回文本后，再返回合成出的音频。音频按钮嵌在对话气泡中，可以点击播放。语音识别（在页面录制语音发送，页面实时展示识别出的文本结果）实现功能及技术要点1、... 继续阅读 >
2020
11-19

springboot+vue实现文件上传下载

本文实例为大家分享了springboot+vue实现文件上传下载的具体代码，供大家参考，具体内容如下一、文件上传（基于axios的简单上传）所使用的技术：axios、springboot、vue;实现思路：通过h5：input元素标签进行选择文件，获取所选选择的文件路径，newfromdata对象，设置fromdata的参数，设置axios对应的请求头，最后通过axios发送post请求后端服务。后端服务同过MultipartFile进行文件接收。具体代码如下：前端代码：1、创建vue对... 继续阅读 >
2020
11-19

vue 表单输入框不支持focus及blur事件的解决方案

vue 表单输入框不支持focus及blur事件的解决方案 采用指令的方式来解决这个问题(此处的前端框架以mint-ui为例):1.html引用:v-mtfocus2.在实例中添加指令directives:{'mtfocus'(el,binding,vnode){letmtinput=el.querySelector('input')mtinput.onfocus=function(){...//如果要对节点的数据进行更改,且更改要映射到页面上,则更改可在vnode.context上进行,这样,改完之后,改变就会映射到页面}mtinput.onblur=function(){...//同上理}}... 继续阅读 >
2020
11-19

解决vue elementUI 使用el-select 时 change事件的触发问题

解决vue elementUI 使用el-select 时 change事件的触发问题 如下所示：<el-selectv-model="level"size="mini"placeholder="请选择":change="selectChange()"><el-optionv-for="iteminselect":key="item.value":label="item.label":value="item.value"></el-option></el-select>我们需要的是选择之后才触发，但是这样写你会发现，页面初始化的时候会触发多次，选择之后又会触发多次，原因是我们用错了标签，应该用@change="selectChange()<el-selectv-model="level"size="min... 继续阅读 >