分类：Vue

2020
10-10

vue使用screenfull插件实现全屏功能

本文实例为大家分享了vue使用screenfull插件实现全屏功能的具体代码，供大家参考，具体内容如下1、安装screenfull.js插件（在npm官网上有）npminstallscreenfull--save2、在vue项目中src/components/ScreenFull/index.vue（写成公共组件）<template><el-tooltipeffect="dark"content="全屏"placement="bottom"><img@click="screen"class="pointer":src="require('@/assets/images/screenful.png')":width="width":h... 继续阅读 >
2020
10-10

Vue使用screenfull实现全屏效果

本文实例为大家分享了Vue使用screenfull实现全屏的具体代码，供大家参考，具体内容如下安装npminstall--savescreenfull在需要的页面引用importscreenfullfrom'screenfull'全屏使用<template><span@click='clickFullscreen'>全屏</span></template><script>importscreenfullfrom'screenfull'exportdefault{name:'screenfull',data(){return{isFullscreen:false}},methods:{clickFullscreen(){if(!scree... 继续阅读 >
2020
10-10

Vue封装全局过滤器Filters的步骤

（PS：本文代码在vue-cli3构建的基础vue项目之上进行编写：vuecreatemy-project）在前后端分离的项目中，经常会有后台返回的数据需要经过处理才能显示到页面上的场景。使用最多的场景就是日期/时间、数字、字符串的格式化处理，实际业务中可能还有更复杂的数据处理逻辑。下面就拿封装全局的处理数字和字符串的filter来展示vue如何封装全局filter并统一处理。一、定义/封装过滤器在src目录下新建filters... 继续阅读 >
2020
10-10

Vue封装全局过滤器Filters的步骤

（PS：本文代码在vue-cli3构建的基础vue项目之上进行编写：vuecreatemy-project）在前后端分离的项目中，经常会有后台返回的数据需要经过处理才能显示到页面上的场景。使用最多的场景就是日期/时间、数字、字符串的格式化处理，实际业务中可能还有更复杂的数据处理逻辑。下面就拿封装全局的处理数字和字符串的filter来展示vue如何封装全局filter并统一处理。一、定义/封装过滤器在src目录下新建filters... 继续阅读 >
2020
10-10

Vue父子组件传值的一些坑

在用Vue的父子组件传值时遇到一个冷门的问题，子组件改变值后父组件的值也随之改变了，特此记录下原因和解决方式。再系统梳理下JavaScript的深拷贝与浅拷贝相关知识点。1.问题描述父组件传值给子组件，子组件改变传过来的值后，父组件的值也会跟着改变。这个问题比较冷门，平时如果对组件通信使用得比较简单，一般不会遇到。2.原因剖析核心：双向绑定父子组件传值的时候涉及双向绑定，当传值为object类型时，传值之后数... 继续阅读 >
2020
10-10

vue实现div可拖动位置也可改变盒子大小的原理

vue实现div可拖动位置也可改变盒子大小的原理 以下是效果图：实现了div盒子在固定区域的拖动，也可改变盒子的高度和宽度，当超出边距后无法继续改变大小这里说一下大致原理：拖动和改变大小是分开来操作的，接下来分别说一下盒子拖动这里用到了js的三个鼠标事件，分别是onmousedown(鼠标按下)、onmousemove（鼠标移动）以及onmouseup(鼠标松开)，大致流程就是鼠标按下拖动图标进行拖动时，动态获取当前div的left和top再重新赋值给当前div的top、left值，当鼠标松开再清除事件，... 继续阅读 >
2020
10-10

Vue项目打包编译优化方案

1.不生成.map文件默认情况下，当我们执行npmrunbuild命令打包完一个项目后，会得到一个dist目录，里面有一个js目录，存放了该项目编译后的所有js文件。我们发现每个js文件都有一个相应的.map文件，它们仅是用来调试代码的，可以加快打包速度，但会增大打包体积，线上我们是不需要这个代码的。这里我们需要配置不生成map文件。vue-cli2config/index.js文件中，找到productionSourceMap:true这一行，将tr... 继续阅读 >
2020
10-10

Vue封装Axios请求和拦截器的步骤

PS：本文代码在vue-cli3构建的基础vue项目之上进行编写：vuecreatemy-projectaxios是一个基于promise的http库，可以用在浏览器和node.js中,也是vue官方推荐使用的http库。axios很好用，其中之一就是它的拦截器十分强大，我们可以为请求和响应设置拦截器，比如请求拦截器可以在每个请求里加上token，做了统一处理后维护起来也方便，响应拦截器可以在接收到响应后先做一层操作，如根据状态码判断登录状态、授权。... 继续阅读 >
2020
10-10

Vue封装Axios请求和拦截器的步骤

PS：本文代码在vue-cli3构建的基础vue项目之上进行编写：vuecreatemy-projectaxios是一个基于promise的http库，可以用在浏览器和node.js中,也是vue官方推荐使用的http库。axios很好用，其中之一就是它的拦截器十分强大，我们可以为请求和响应设置拦截器，比如请求拦截器可以在每个请求里加上token，做了统一处理后维护起来也方便，响应拦截器可以在接收到响应后先做一层操作，如根据状态码判断登录状态、授权。... 继续阅读 >
2020
10-10

如何在JS文件中获取Vue组件

1.背景最近在写项目时候遇到这样一个需求：我封装了一个js文件utils.js，然后在组件my-component.vue中引用了该js文件。在utils.js文件中有一些函数，需要操作my-component.vue中的data和methods。为了方便理解，上述js文件和组件名非实际工程中的名字，仅是示例。2.思路通过调用函数把组件实例this传递到被应用的js文件里。3.目录结构src/├──App.vue├──assets├──main.js├──component... 继续阅读 >
2020
10-10

vue swipeCell滑动单元格(仿微信)的实现示例

vue swipeCell滑动单元格(仿微信)的实现示例 抽离Vantweapp滑动单元格代码改造而成带有拉动弹性回弹效果demo展示：https://littaotao.github.io/me/index（切换为浏览器调试的手机模式并且再次刷新一次）<template><divclass="cell_container"@touchstartv-click-outside="handleClickOutside"@click="getClickHandler('cell')"><div:style="{'transform':'translateX('+(offset+(isElastic?elasticX:0))+'px)','transition-duration':dragging?'0s... 继续阅读 >
2020
10-10

详解vue 中 scoped 样式作用域的规则

详解vue 中 scoped 样式作用域的规则 哈喽！大家好！我是木瓜太香，今天我们来聊一个vue的样式作用域的问题，通常我们开发项目的时候是要在style上加上scoped来起到规定组件作用域的效果的，所以了解他们的规则也是很有必要的，可以让你更清晰的了解你的项目样式是怎么运作的。先来说说实现方式vue中的样式作用域是通过属性选择器来实现的，例如同样一个类名，我们是通过.类名[属性名]来做区分的，我们这里主要是要搞清楚这里的属性名是怎么分配的。样式作用域... 继续阅读 >
2020
10-10

Vue中添加滚动事件设置的方法详解

一、问题发现在看Vue的事件文档中,测试scroll事件发现如下是行不通的,触发不了scroll事件,经过一番搜寻未找到原因,不过找到了另外两种在Vue中设置滚动事件。<div@scroll='showOut'></div>二、原因分析暂无三、解决办法1.直接利用mousewheel事件替代scroll事件<div@mousewheel='showOut'></div>mousewheel鼠标滚轮,显而易见动动鼠标滚轮就能触发事件,但是用光标拖拽滚动条就不能触发事件。2.类似于原生JS添加滚动事件newVue({... 继续阅读 >
2020
10-10

Vue和React有哪些区别

一、监听数据变化的实现原理不同Vue通过getter/setter以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能React默认是通过比较引用的方式进行的，如果不优化(pureComponent/shouldComponentUpdate)可能导致大量不必要的VDOM得重新渲染为什么React不精确监听数据变化呢？这是因为Vue和React设计理念上的区别，Vue使用的是可变数据，而React更强调数据的不可变。所以应该说没有好坏之... 继续阅读 >