vue
lx_1024
学习新的知识
展开
-
vue 自定义指令自动获取文本框焦点
HTML:{{tag}}js:官方例子:directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }我的:directives: { focus:function (el) {原创 2018-01-02 16:54:11 · 14540 阅读 · 4 评论 -
vue 组件之间传值
vue组件间传值分为父组件给子组件传值和子组件给父组件传值一、父组件给子组件传值父组件中引入子组件,父组件的js里定义要传递的属性值,下面的写法是动态的传递,name可以通过定义方法,在方法里动态修改,如不需要动态的传递,则直接使用属性定义值parent.vue<template> <child v-bind:name="name"></child>&l...原创 2018-01-19 11:25:52 · 11946 阅读 · 4 评论 -
vue 键盘回车事件
如果是原生的input,使用 @keyup.enter就可以,若是使用了element-ui,则要加上native限制符,因为element-ui把input进行了封装,原事件就不起作用了,代码如下:<input v-model="form.name" placeholder="昵称" @keyup.enter="submit"><el-input v-model="form.n...原创 2018-01-17 16:35:09 · 88717 阅读 · 7 评论 -
vue 动态控制权限
当在做一个项目时,项目里有多种角色和权限,这时候要先明确这个权限有哪些区别和要求,主要情况可分为以下几种一、只是一些按钮或者局部,可以通过v-if或者:hidden来实现控制,此种方法只适用于比较少的权限控制二、不同权限看到不同的页面,一般是菜单栏不同,这时可以使用动态路由生成来控制,在路由的meta里添加特定字段,在登录时通过权限来动态生成路由,可以参考一篇文章,写的比较好https://ref...原创 2018-03-27 11:21:21 · 1567 阅读 · 0 评论 -
vue 弹出遮罩层样式
以前做遮罩层都是写最小高度来占满屏,但是总会出现问题,也没改变,今天一个人在交流群上问这个时,看到一个回答解决了我这一个bug,学到了,现在记录一下样式。<div class='popContainer'></div>div.popContainer{ position: fixed; top: 0; left: 0; right: 0; ...原创 2018-05-18 16:02:10 · 24268 阅读 · 5 评论 -
element-ui 上传图片后清空图片显示
使用element-ui,使用el-upload上传图片,上传图片后再次打开还是会有原来的图片,想要清空原来上传的图片,只需要在组件上绑定ref,在提交成功后的方法里调用this.$refs.upload.clearFiles();就可以清除原来上传的文件。具体如下:<el-upload ref='upload' class="upload-demo" action="https...原创 2018-05-16 10:56:51 · 10656 阅读 · 7 评论 -
vue的页码组件的页码重置为1
首先是页码组件上要绑定一个ref,然后通过ref找到这个组件,然后重置为1,例子如下:<el-pagination ref="Pagination" class="pages" @current-change="queryCurrentPage" :current-page.sync="currentPage" ...原创 2019-01-07 14:22:48 · 4305 阅读 · 1 评论 -
vue 拖拽事件
一、vue使用draggable实现拖拽效果,可参考https://github.com/SortableJS/Vue.Draggable二、使用h5的原生drag事件这两种方式各有各的长处,draggable实现的拖拽效果一般要求数据格式相同,其实质就是数据的添加和删除,使用起来很简单;h5原生的drag事件比较灵活,可利用原生的事件方法对元素进行操作,可改变元素的大小,位置,数据,缺点是要自己...原创 2018-02-12 11:58:58 · 11543 阅读 · 0 评论 -
vue 解决循环引用组件报错
做项目时遇到使用循环组件,因为模式一样,只有数据不一样。但是按照普通的组件调用格式来做时报错,错误信息为Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.查询了官方文档,还有其他原创 2018-02-05 15:38:47 · 7258 阅读 · 0 评论 -
vue 使用v-if时遇到的问题
在vue中使用v-if时遇到的问题记录v-if和v-else之间不能加入其它的元素,否则会报错,错误为:v-else used on element <input> without corresponding v-if,错误示例如下:<input type="text" v-if="id===0"><span>提示信息</span><p v原创 2018-02-07 19:07:24 · 12899 阅读 · 0 评论 -
vue 禁止浏览器后退
需求是:需要某个路由不能通过浏览器返回,同时不影响相互之间的切换整理一下解决方法 和 使用方法:1.在路由配置中给这个路由添加meta信息,比如:{ path: '/home', component: xxx, meta: {allowBack: false}}2.在全局的router.beforeEach 函数里面获取allowBack的状态,同转载 2017-12-19 10:32:47 · 18693 阅读 · 0 评论 -
vue 制作进度条
HTML: {{progress}}% css:div.progressContainer{ height: 20px; width: 96%; border-radius: 10px; background-color: #ddd; margin原创 2018-01-04 11:21:05 · 9764 阅读 · 0 评论 -
前后端交互时code码及其含义
今天总结一下前后端交互时常见的code码及其含义,错误时的解决方式1、200 这个码代表请求成功2、304 这个码代表使用缓存中缓存的资源3、400 这个码代表请求无效(Bad request), 出现的原因一般是 1)前端传的参数或参数类型与后端接收的参数或参数类型不一致 2)后端接收的格式是json格式,前端传的不是json格式的数据 3)传递的参数放在了链接上原创 2018-01-23 16:50:45 · 8089 阅读 · 0 评论 -
mockjs 的使用
最近前后端有点不协调,用了一下mockjs,下面记录一下我的环境是webpack+npm+vue,首先就用npm安装mockjs,安装命令是 npm install mockjs --save-dev,使用淘宝镜像也是可以的,就是使用cnpm替换npm,一样的效果安装好mockjs后,在main.js里引入mockjs// 引入mockjsrequire('./mock.js')原创 2018-01-17 12:12:34 · 7803 阅读 · 0 评论 -
vue 输入一个数自动获取最近的整十数
HTML:最近的整十数{{num}}jsdata(){ return {num:''}},methods:{ var num=parseInt(this.num); var n=num%100; var floor=Math.floor(num/100); var ceil=Math.ceil(n原创 2018-01-10 16:10:13 · 1220 阅读 · 0 评论 -
vue修改对象的属性值后页面不重新渲染
最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下:HTML页面如下: {{ item.name}} 编辑 js部分如下:原创 2017-12-15 16:20:23 · 66594 阅读 · 18 评论 -
vue+vuex+axios做登录、注册页权限拦截
在GitHub上有很多写好的模板,这个项目也是基于模板做的。现在记录一下我做的过程1、修改config文件夹里的dev.env.js里的BASE_API,把地址改成请求后端的公共部分BASE_API: '"http://192.168.xx.xx"',2、接下来就是操作src文件,先在 views里写好vew组件(login.vue,regist.vue),写好到route原创 2017-12-15 17:23:46 · 51390 阅读 · 19 评论 -
vue 用div制作含固定列的表格
下面是用div做的一个含固定操作列的表格,引入了vue,下面是核心部分html: {{item.name}} {{tag.col}} 操作原创 2018-01-05 14:46:48 · 5104 阅读 · 0 评论