分类：VUE

2020
10-09

VsCode里的Vue模板的实现

如何自定义自己的开发模板？你需要这几步：点击VsCode左上角的“文件”；找到“首选项”并点击首选项里的“用户片段”；输入“vue.json”点击进入该文件现在你就能编辑自己的Vue页面开发模板了！下面是我的模板代码：{"Printtoconsole":{"prefix":"vue","body":["<!--$0-->","<template>","<div></div>","</template>","","<script>","exportdefault{","data(){","return{",... 继续阅读 >

2020
10-09

vue axios封装httpjs,接口公用配置拦截操作

做一下记录，在vue项目中配置公用的请求https,(1)位置，在src中新建src/utils/http.jsimportaxiosfrom'axios'//引用axiosimport{MessageBox,Message}from'element-ui'importQsfrom'qs'//引入数据格式化importrouterfrom'@/router'//axios配置axios.defaults.timeout=50000//设置接口响应时间//axios.defaults.baseURL='https://easy-mock.com/mock/'//这是调用数据接口,公共接口url+调用接口名let... 继续阅读 >

2020
10-09

解决vue刷新页面以后丢失store的数据问题

刷新页面时vue实例重新加载，store就会被重置，可以把定义刷新前把store存入本地localStorage、sessionStorage、cookie中，localStorage是永久储存，重新打开页面时会读取上一次打开的页面数据，sessionStorage是储存到关闭为止，cookie不适合存大量数据。根据我的需求，最合适的是sessionStorage。beforeunload在页面刷新时触发，可以监听这个方法，让页面在刷新前存store到sessionStorage中。当然，在页面刷新时还要读取sessionS... 继续阅读 >

2020
10-09

在vue中使用回调函数,this调用无效的解决

letself=this//使用新变量替换this，以免this无效//updateStudentInfoToServer是一个将本身部分数据异步上传的接口，接收三个参数，其中第一个是数据，第二、三个是函数，第二、三个函数使用function(){}形式书写updateStudentInfoToServer:function(data,networkOk,networkError){letpostData=this.$qs.stringify({data:data})this.axios.post('/api/update/updateStudentInfo',postData).then(res=>{console... 继续阅读 >

2020
10-09

vue 调用 RESTful风格接口操作

首先是简单的java接口代码写了四个让前端请求的接口，以下为代码@GetMapping("/v1/user/{username}/{password}")publicResultlogin2(@PathVariable("username")Stringusername,@PathVariable("password")Stringpassword){returnResult.succResult(200,username+"--"+password);}@PostMapping("/v1/user")publicResultlogin3(@RequestBodyUseruser){returnResult.succResult(200,"ok",user);}... 继续阅读 >

2020
10-09

vue之封装多个组件调用同一接口的案例

背景：项目中有多个组件调用同一接口，为提高代码可维护性，需要封装公共方法直接return接口调用的结果exportfunctiongetAll(){letall=[];letopt={method:'get',url:'all/teacher',success:res=>{all=res.data.value||[];},fail:err=>{tipInfo(err.data.desc,'提示',false,'warning');}};$http(opt);returnall;}console.log(getAll());//[]$http是在axios基础进行... 继续阅读 >

2020
10-09

vue接口请求加密实例

1.安装vue项目npminitwebpackproject2安装iviewnpmiiview--save(这里是结合iview框架使用的可根据自己的需求安装当然也可以不安装)3在src目录下建一个utils文件夹里面需要放5个js都是封装好的js文件功能不仅仅局限于加密可以研究一下你会学到很多东西1.api.js/***为vue实例添加http方法*Vue.use(http)*/importhttpfrom'./http'exportdefault{/***install钩子*@param{Vue}VueVue*/install... 继续阅读 >

2020
10-09

vue组件暴露和.js文件暴露接口操作

1、将同一类型的组件放在一个文件夹下2、在此文件夹下创建一个index.js3、在index.js中导入组件，并把他们暴露出去1、写法一importstudentCourse1from'./studentCourse.vue'importstudentInfo1from'./studentInfo.vue'exportvarstudentCourse=studentCourse1exportvarstudentInfo=studentInfo12、写法二exportvarstudentCourse=()=>import('./studentCourse.vue')exportvarstudentInfo=()=>import('./student... 继续阅读 >

2020
10-09

vue npm install 安装某个指定的版本操作

npm安装指定版本的package，只需要在命令行之后加上‘@版本号'即可，操作如下：1、vue-print-nb最新版本是1.5.0版本，如果我们只想要下载1.2.0版本，操作如下：npminstall--save-devvue-print-nb@1.2.0npminstall--savevue-print-nb@1.2.02、命令介绍（--save-dev）--save：将保存配置信息到package.json。默认为dependencies节点中（生产）。--dev：将保存配置信息到devDependencies节点中（测试）。因此：--save：将保存... 继续阅读 >

2020
10-09

vue自定义组件(通过Vue.use()来使用)即install的用法说明

在vue项目中，我们可以自定义组件，像element-ui一样使用Vue.use（）方法来使用，具体实现方法：1.首先新建一个Cmponent.vue文件//Cmponent.vue<template><div>我是组件</div></template><script>exportdefault{}</script><stylescoped>div{font-size:40px;color:#fbb;text-align:center;}</style>2.其次在同一目录下建立index.js文件,在这个文件中使用install方法来全局注册该组件importcomp... 继续阅读 >

2020
10-09

Vue 实现创建全局组件,并且使用Vue.use() 载入方式

自定义vue组件，一般是局部引用的方式载入，使用的时候，在应用的组件中使用importmoduleNamefrom‘module'导入，在components中注册<template><divclass="app-NewsInfo"><h3>{{info.title}}</h3><!--新闻评论子组件。--><comment:id="id"></comment></div></template><script>importcommentfrom"../sub/comment.vue";exportdefault{data(){return{info:{},id:this.$route.query.id};},methods:{... 继续阅读 >

2020
10-09

Vue自定义全局弹窗组件操作

写在前面页面中会有很多时候需要弹窗提示，我们可以写一个弹窗组件，但是如果每个页面都引入这个组件，太麻烦了，所以我们将它变成全局组件，需要用的时候直接通过JS调用即可，不需要在每个页面引入了效果图弹窗组件新建一个弹窗的组件——popup.vue<template><transitionname='fade'><!--蒙版--><divclass="mask"v-if="show"@touchmove.prevent><divclass="window"><imgclass="shadow":src="imgUrl"alt=""... 继续阅读 >

2020
10-09

基于Vue全局组件与局部组件的区别说明

1、组件声明<!--全局组件模板father模板--><templateid="father"><div><h3>这是{{name}}</h1><div><p>这是{{data}}</p></div></div></template>varFATHER={template:"#father",data:function(){return{name:"一个全局组件-模板-",data:"数据：18892087118"}}};2、组件注册Vue.component('father',FATHER);3、组件挂载<h5>全局组件1</h5><father></father... 继续阅读 >

2020
10-09

vue实现图片按比例缩放问题操作

如下所示：getImg(src){varimg_url=srcvarimg=newImage()img.src=img_urlthis.pictureHeight.height=Math.ceil(img.height/img.width*460)+'px'},//首先通过这个方法算出图片的高度/宽度比，460是我设置的宽度，计算得出需要的高度，然后修改容器的高//度，图片通过height:100%;width:100%撑开，这样图片就不会失真了vue里面还有一个问题，如果容器只是div的话，修改容器高度，非常简单，如果容器是一个element的插... 继续阅读 >

2020
10-09

Vue使用轮询定时发送请求代码

一、什么是轮询？轮询（Polling）是一种CPU决策如何提供周边设备服务的方式，又称“程控输出入”（ProgrammedI/O）。轮询法的概念是，由CPU定时发出询问，依序询问每一个周边设备是否需要其服务，有即给予服务，服务结束后再问下一个周边，接着不断周而复始。在WEB上来说就是客户端一直向服务端发起请求，服务端返回数据，不论返回什么都会再次向服务端发送请求。二、采用定时器进行轮询<template><div></div></template><scri... 继续阅读 >

2020
10-09

vue页面引入three.js实现3d动画场景操作

vue中安装Three.js近来无聊顺便研究一些关于3D图形化库。three.js是JavaScript编写的WebGL第三方库。Three.js是一款运行在浏览器中的3D引擎，你可以用它通过控制相机、视角、材质等相关属性来创造大量3D动画场景。我们开始引入three.js相关插件。1、首先利用淘宝镜像，操作命令为：cnpminstallthree2.接下来利用npm安装轨道控件插件：关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”... 继续阅读 >