一.在Vue中出现的问题 因为我没有用脚手架,自己用webpack配置的环境,因此报了以下错误,出现的问题应该是缺少解析器的原因 二.解决方案 安装: npm i babel-plugin-transform-runtime --save-dev npm i babel-runtime --save npm i @babel/plugin-transform-runtime --save-dev npm i @babel/runtime --save 其次在目录的.babelrc中添加如下配置

参考链接:https://www.jianshu.com/p/adad39705ced    和  https://blog.csdn.net/weixin_44309374/article/details/103354020   需求:  页面滚动 隐藏某元素, 页面停止滚动再显示   1. 方法一:利用vue中的watch(侦听器)实现了这一功能,今天就以垂直滚动为例,分享一下实现方法.代码如下: export default { data() { return { oldScrollTop

使用from.path和to.path判断路由跳转 在methods里面写函数: 当然,上边函数里边可以做很多事情.

首先附上源码地址 https://files.cnblogs.com/files/maruihua/vue-tagsinput-master.zip 这个是我修改后的代码.取消了部分功能,添加的一些功能,原插件在以下网址,有兴趣的可以去看一看 https://github.com/voerro/vue-tagsinput 具体怎么使用呢 <template> <div> <span>inputtags</span> <tagsinput><

<script> export default { data(){ return{ i = 0 } }, mounted () { window.addEventListener('scroll', this.handleScroll, true); // 监听(绑定)滚轮 滚动事件 }, methods:{ handleScroll(){ // 页面滚动距顶部距离 var scrollTop = window.pageYOffset || document.documentElement.s

在vue中使用v-if判断数组的长度时出现报错 <el-collapse-item :key="index" v-if="data.childrens.length > 0" :title="data.fname" :name="data.fname"> <el-row> <el-col :md="24" :lg="12" :xl="8&qu

前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题,我们所要的说的axios查看更多关于 axios 的文章 的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和nod

这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在运用npm install axios的时候就会默认安装qs,因此我们就得将qs引入到axios中,然后需要再通过实例化一个新的axios,并且设置他的消息头为'content-type': ‘application/x-www-form-urlencoded' let qs = require('

前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求 因为这是一个工作上的业务需求,所以对于我来说主要有两个地方需要进行权限控制. 第一个是侧边菜单栏,需要控制显示与隐藏. 第二个就是页面内的各个按钮,弹窗等. 流程 如何获取用户权限? 后端(当前用户拥有的权限列表)-> 前端(通过后端的接口获取到,下文中我们把当前用户的权限列表叫做 permission

前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求 因为这是一个工作上的业务需求,所以对于我来说主要有两个地方需要进行权限控制. 第一个是侧边菜单栏,需要控制显示与隐藏. 第二个就是页面内的各个按钮,弹窗等. 流程 如何获取用户权限? 后端(当前用户拥有的权限列表)-> 前端(通过后端的接口获取到,下文中我们把当前用户的权限列表叫做 permission

基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3C标准. CORS跨域的特点:它需要服务器的‘配合’.就是说,它的实现是:浏览器(所有浏览器和IE10+)+服务器. 一般情况下,我们可以在请求头信息中加入Origin,来告知服务器自己来自哪个源:协议 + 域名 + 端口.如果Origin域名在指定许可范围内,则服务器的响应头会多出三个信息: Access-

你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/1518539601 如果你了解前端,肯定对AJAX不陌生,那么通过AJAX技术能够达到更新网页部分内容来达到加载其他信息的效果.通过AJAX我们可以来对文章进行优化,如果我们的博客在首页载入时就加载全部的文章,势必会影响加载速度,所以我们要来异步加载文章的内容,通过分页或者向下加载的方式来加载更多的文

写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计 出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们很有必要写成一个通用 的组件形式,在需要的地方之间引用. 现在我们来动手实现一个对话框组件 ,按照之前的习惯,我们先看下实现的效果图 1.首先,通过template定义一个组件 <template id="dialog"> <div class="dialog&

vm._render 生成虚拟dom 我们知道在挂载过程中, $mount 会调用 vm._update和vm._render 方法,vm._updata是负责把VNode渲染成真正的DOM,vm._render方法是用来把实例渲染成VNode,这里的_render是实例的私有方法,和前面我们说的vm.render不是同一个,先来看下vm._render定义,vm._render是通过renderMixin(Vue)挂载的,定义在src/core/instance/render.js: // 简

关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插件中用到过的checkbox也只是别人写好的组件,这次在自己实现时走了很多坑,特意写这篇文章记录下来,给后来者提供一个参考 在这之前,先看看原生checkbox搭配jquery取值的用法 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <input type="check

1.mint-ui官网:https://mint-ui.github.io/#!/zh-cn 可以点击开始使用,里边有详细的讲解.安装mint-ui: 官网是: 但是应用没有装成功,不知为何,可能是我配置原因导致的吧~然后搜索之后用的: 1)npm i mint-ui -S 2)这里官网很详细的写了,在你配置好的vue项目中找到main.js.我这里全部引入了~~ . 2.下边开始说下VUE的重点目录逻辑. 1)页面中现在一共2个页面文件夹,也就是2个页面~其中index.vue就是首页,而in

使用过Vue的同学都应该有这样一个感觉,在vue中页面是基于数据驱动的,不需要我们自己操作dom,框架帮我们完成了这一步,事实上Vue官方也建议我们这样做 在绝大多数情况下是不需要操作dom就可以完成效果的,但是在极少数情况下需要我们操作dom,例如以下情况 我有如下一个表单,但用户点击提交时,校验表单各字段是否为空,如果为空,则让该字段输入框背景色为红色,同时获得焦点 如果使用jquery,我们可以给每个输入框一个id值,然后判断字段值为空时根据id获取元素,然后设置背景色等 这样做的话意味着

最近在项目中用到了html2canvas插件,遇到的一些坑写下来,与大家共勉. html2canvas  官方网站http://html2canvas.hertzen.com/index.html 这是一个js截屏插件,在前台利用h5的canvas  将html的内容显示在canvas上,再利用 js 将canvas转化为图片 1.vue 文件中引入 html2canvas.js   <remote-script src="../html2canvas.js"></r

前端加密 使用crypto-js加解密 第一步,安装 npm install crypto-js 第二步,在你需要的vue组件内import import CryptoJS from "crypto-js"; 第三步,使用 // Encrypt 加密 var cipherText = CryptoJS.AES.encrypt( "my message", "secretkey123" ).toString(); console.log(ciphe