vue
cominglately
时间过得好快 ...
勉力前行
展开
-
npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ECONNRES
文章目录场景解决场景最近在部署负载均衡,所以需要在新服务器上部署laravel项目, 之前开发机器上使用的是npm 6.5; 新机器使用的是npm 6.6, 执行npm install 报错npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ECONNRES...原创 2019-01-20 22:39:47 · 22612 阅读 · 0 评论 -
modal data-toggle and data-target
场景解释场景凡是modal 基本上都会用到这两个属性解释以某种方式操作某个元素 data-toggle 打开的方式 modal,popover,tooltipsdata-target 要操作的元素 ‘#id”...原创 2018-08-06 18:02:33 · 484 阅读 · 0 评论 -
laravel5.5 在vue中使用diffForHumans
场景分析参考文档解决场景这两天在做站内私信组件, 对话列表需要展示每条私信发送日期, humans 格式这样是不能在Vue组件直接使用的 {{ message.created_at.diffForHumans}}分析首先线分析一下为什么在组件中不能使用diffForHumans方法因为 message.created_at只是一个单纯的变...原创 2018-08-01 15:41:15 · 430 阅读 · 0 评论 -
vue white-space正确处理元素的内的换行元素
场景分析参考文档解决场景vue textarea填充了一些数据,但是展示的不出需要的效果, 换行符失效分析检查了textarea && 以及 存到数据库中的数据 ,换行符是有的,所以问题出在展示的地方因为使用vue 所以在解析数据的时候使用的是vue的解析符号{{}} 而不可以使用laravel的{!! !!} 所以没...原创 2018-08-01 11:38:43 · 4240 阅读 · 0 评论 -
vue2-multi-uploader 图片批量上传的组件
场景组件场景偶然发现的 mark一下,以后研究下组件abarta/vue2-multi-uploader原创 2018-08-05 20:49:07 · 2677 阅读 · 0 评论 -
vue-image-crop-upload 一个强大的图片剪切组件
场景分析组件地址安装用法场景对一个站点来说处理用户头像的功能是必不可少的, 分析哈 ,功能先看有没有组件用一下 组件地址组件dai-siki/vue-image-crop-upload安装npm install –save-dev babel-polyfill (安装依赖)npm install –save-d...原创 2018-08-05 20:42:37 · 3353 阅读 · 0 评论 -
Vue 重复触发表单提交
场景分析解决场景私信的组件多次点击发送按钮,造成同一条私信的重复发送分析在等待发送组件模态框自动关闭的过程中, 多次触发了发送按钮的click事件,导致多次发送了同样的数据解决方案可以利用 form disabled属性解决在私信发送之后禁用send button , 在关闭模态框之后,解禁send button &lt...原创 2018-08-03 17:04:58 · 1931 阅读 · 0 评论 -
vue 实现input表单元素的disabled
场景分析解决场景 今天产品经理提了一个需求: 一个API的账号体系增加一个checkbox控制API输出字段,但是有三个是伪控制,事实上是接口里面写死的, 所以是必须选中的 分析重点是怎么在Vue组件中实现 checkbox的disabled, 哈 这个肯定是需要使用元素绑定的Vue做这个操作可以实现dis...原创 2018-08-03 16:25:00 · 11663 阅读 · 0 评论 -
vue-fontawesome 字体分层 && 计数器
场景. 网站通知类消息肯定是需要计数器的参考文章 FortAwesome/vue-fontawesome https://github.com/FortAwesome/vue-fontawesome 样例 https://fontawesome.com/how-to-use/on-the-web/styling/layering 几种常用的类型解决...原创 2018-07-24 10:11:50 · 211 阅读 · 0 评论 -
Vue sweet-modal-vue 通用型的模态框
场景组件介绍 && 优势安装用法备注用例场景模态框很很常见别的提示形式,多标签的模态框也经常用到; 每次定制很繁琐,这就需要一个通用性的组件了组件介绍 && 优势 组件名 adeptoas/sweet-modal-vue 组件地址 https://github.com/adeptoas/...原创 2018-08-07 10:19:33 · 1834 阅读 · 0 评论 -
vue-area-linkage 省市区Vue组件
场景组件安装例子场景一般的站点都会用到的,eg:标记某个用户的地址属性组件dwqs/vue-area-linkage使用方法是简单的,github有很详细的用例安装npm i –save-dev vue-area-linkage area-data area-data组件提供数据(不建议全局注册这个)例子下面是一个省...原创 2018-08-12 11:40:36 · 3741 阅读 · 0 评论 -
vue halower/vue-tree 树状结构的展示
场景组件介绍安装 && 使用实列场景操作权限树组件介绍halower/vue-tree 强大的Vue组件安装 && 使用 安装 npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helpe...原创 2018-09-12 17:24:47 · 5387 阅读 · 0 评论 -
sagalbot/vue-select 选中元素变动事件(:on-change 踩坑)
场景分析方案 && 遇到的坑源码场景需要根据选中元素为依赖获取一个计算属性(array), 此时computed不能满足分析 官方文档的介绍 /** * An optional callback function that is called each time the selected .原创 2018-08-29 18:31:53 · 8255 阅读 · 0 评论 -
Vue 选取不同的产品,渲染出不同的页面 (computed 踩坑)
场景分析环境问题解决源码场景产品经理提了一个需求: 产品标准化处理,新增产品或者编辑产品的时候 可以直接通过页面操作; 一个产品的开通只要再网站输入要求即可产品新的属性也是页面操作分析现状各个产品线比较混乱,隶属于不同的项目组, 所以有各自的产品表 , 产品配置表实现各个产品合并成一个产品表, 提取公共属性,其余有差异的...原创 2018-08-29 18:16:07 · 1470 阅读 · 0 评论 -
Vue 自定义一个可以高度自由化的模态框组件
场景源码场景模态框 emm…下面是自定义的一个满足基本需求的模态框(自定义范围) 按钮样式按钮提示两个按钮跳转的url模态框title模态框body 另外操作也是极其简单的源码<template> <div class="modal fade" id="modal-p原创 2018-08-28 20:37:52 · 2061 阅读 · 0 评论 -
vue-validate 在编辑模式的一定报错的问题(初始化数据时机选择的不对)
场景分析解决案列场景使用baianat/vee-validate 校验表单数据,在编辑模式, 即使在有数据的情况下, 还是this.errors还有会有错误提示;编辑模式的数据来源 采用的是通过属性传递进来的分析做过的尝试 尝试JQ的change 事件去手动触发input表单的变动事件尝试将this.error.item置空, this.f...原创 2018-08-20 20:18:18 · 1367 阅读 · 0 评论 -
laravel5.5 404 "No query results for model [Ultraware\Roles\Models\Role]."
场景分析解决场景设置API路由 但是vue-resource请求返回以上的报错信息: "404 No query results for model [Ultraware\Roles\Models\Role]."分析导致这种情况的原因有很多 看到有人是清理缓存的方法解决的 php artisan cache:clear php:artisan c...原创 2018-08-20 10:14:08 · 2262 阅读 · 0 评论 -
vue-tree 一个递归的Vue的组件(checkbox)
场景组件安装用法场景做一个站点的权限控制的时候,需要递归的生成checkbox我的环境laravel5.5组件halower/vue-tree优点是使用简单安装 npm npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx ba...原创 2018-08-22 20:53:55 · 4924 阅读 · 0 评论 -
vue-select Error in getter for watcher "filteredOptions": "TypeError: e[t.label].toLowerCase is n
场景分析解决场景 sagalbot/vue-select 在组件初始化的时候报的错 Error in getter for watcher “filteredOptions”: “TypeError: e[t.label].toLowerCase is n 下面的是vue-select的相关信息 <v-sele...原创 2018-08-18 23:34:28 · 8881 阅读 · 0 评论 -
laravel5.5 vue-fontawesome组件的安装
场景分析安装配置用法场景 vue组件中使用font awesome5分析. vue有需要 自然要去github上面看看了, then `FortAwesome/vue-fontawesome`安装 npm i –save-dev @fortawesome/fontawesome-svg-core npm i –save...原创 2018-07-17 20:47:10 · 408 阅读 · 0 评论 -
vue-select 组件
场景解决参考文档安装用法场景. vue组件开发的时候,传统的select2方式已经不可以使用了解决sagalbot/vue-select参考文档https://github.com/sagalbot/vue-select安装 cdn 引入插件 &amp;amp;lt;!-- use th...原创 2018-07-10 18:08:00 · 11584 阅读 · 2 评论 -
Vue2.* computed property ' ' was assigned to but it has no setter.
场景分析解决场景 父组件传递了一个属性给子组件,子组件需要在完成某个动作之后,修改这个动作。当我将这个计算属性在computed处理后, 再次修改的时候,会有警告而且修改没有成功 computed property 'count_format' was assigned to but it has no setter.分析 count_form...原创 2018-07-16 12:28:08 · 43609 阅读 · 0 评论 -
vue2.5.6 升级之后组件传输参数的方式发生了变化 polation inside attributes has been removed
场景vue升级到2.5.6之后传递参数到组件汇报这样的错误分析1. 从提示分析,版的和参数方式不再支持 需要采用新的方式 Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead。For example, instead of <div ...原创 2018-05-06 21:51:45 · 2940 阅读 · 1 评论 -
vue v-show && v-model的简单使用
场景. vue对前端开发的友好是jQ比拟不了的分析. v-model可以实现表单元素和应用状态的双向绑定. v-show,v-if 配合v-model可以快捷实现一些简单功能. v-show 实现的原理是 display:none. v-if 元素存在或者不存在实例. textarea如果为空 则提示输入内容;否则去掉提示 展示输出按钮<!DOCTYPE ...原创 2018-05-06 11:58:42 · 5662 阅读 · 0 评论 -
vue2.5.6替换过滤器orderBy invalid expression: Unexpected string in task_lists | orderBy 'id'
场景. 使用v-for的时候,使用orderBy进行排序, v2.5.6控制台给出提示 invalid expression: Unexpected string in task_lists | orderBy ‘id’分析. 翻看官方文档,提示在v-for时弃用过滤器orderBy,使用computed排好序之后 替换展示 . 官方文档的连接 ` https...原创 2018-05-12 11:15:19 · 1333 阅读 · 0 评论 -
Vue @submit添加在laravelcollective/html的Form方法上面
场景. 使用laravelcollective/html的Form创建了一个表单,想要在上面绑定vue的submit事件解决. 将@submit事件当作属性属性传递给Form::open {{ Form::open(['url' => '', 'method' => 'get','id' => 'wang', '@submit' =&g...原创 2018-05-12 09:19:52 · 1414 阅读 · 0 评论 -
npm 升级到最新版本
场景. npm安装vue脚手架的时候 提示我的版本太低. 网上的教材不能解决问题解决1. npm update 2. sudo chown -R $USER:$(id -gn $USER) /home/carsonlius/.config3. npm update │ npm update check failed ...原创 2018-05-18 00:48:13 · 3046 阅读 · 0 评论 -
nodejs && npm 更新到最新版本
场景. nodejs如果不想有一些莫名其妙的问题 还是更新到最近版本吧转载地址https://www.jianshu.com/p/2b24cd430a7d转载 2018-05-17 14:45:10 · 3026 阅读 · 0 评论 -
vue2.5.16 警告: 组件内不推荐修改Propsvoid mutating a prop directly since the value will be overwritten whenev
场景 给组件传递参数设置 props : ['question_lists'], .getJson获取到了questionlists的数据在.getJson获取到了questionlists的数据在.getJson获取到了question_lists的数据 在.getJson的的回调函数中 自然需要将得到的数据赋值给question_lists Avoid mutatin...原创 2018-05-09 23:46:47 · 3779 阅读 · 0 评论 -
vue2.5.16 模板只支持一个控件Component template should contain exactly one root element.
场景. 在写组件template的时候遇到 Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.分析. 翻译一下就是vue template只可以包...原创 2018-05-09 00:20:00 · 715 阅读 · 0 评论 -
windows 下面搭建vue-cli
场景. vue脚手架肯定是要在自己电脑的本地搭建, 服务器当然不可能(命令行系统真的是没有什么意义)分析. 下载node.js 地址 `https://nodejs.org/en/download/`转载地址. 发现了一片很好的文章 `https://www.jianshu.com/p/1fcc8d55e44b`分析. windows10 和Linux搭建环境的步...转载 2018-05-19 21:38:57 · 239 阅读 · 0 评论 -
npm 引入vue-resource
场景. 使用的vue 必须要在 axios 和vue-resource之间选择一个解决 下载 npm install vue-resource –save-dev 加载 在main.js 中添加 import VueResource from 'vue-resource' ...原创 2018-05-20 10:25:08 · 3698 阅读 · 0 评论 -
thinkphp3.2 自定义的vue-select2组件
场景. vue组建中普通的select2 就不可行了, 这时候需要自定义的vue-select2组件出来. 因为我的是在组件中调用vue-select2组件 所以需要props双向绑定分析. 官方的列子是简单的一个组件 但是没有办法双向通信, 实现的内容也只是简单的select2; 所以功能还是 需要定制 . 在使用的thinkphp3.2 所以对vue的支持不是特别...原创 2018-06-22 14:44:01 · 574 阅读 · 0 评论 -
vuex actions传递多参数的处理
场景. 在使用vue components dispatch Vuex actions的时候需要传递参数给多个参数actions 但是在actions 只是可以接收到两个参数的问题分析. vuex actions 固定接受的第一个参数是dispatch对象 第二个参数是使用者本身定制的参数解决 调用的时候 第二个参数传递成多个元素的对象这样在actions 中第二...原创 2018-05-30 20:28:36 · 26378 阅读 · 2 评论 -
vuex actions正确使用vue-resource的方式( Error in mounted hook: "TypeError: Cannot read property 'get' of u)
场景. SPA中 使用vuex初始化一项数据,在vuex的actions中需要使用vue-resource 使用的方式是actions : { setTaskList : function (store) { let url = 'http://zhihu.carsonlius_liu.cn/api/tasks'; Vue.$http.get...原创 2018-05-30 00:27:01 · 41363 阅读 · 0 评论 -
vue 最容易上手的vue-table 插件(huangshuwei/vue-easytable)
场景. vue开发中对表格进行分页是最常见的操作,这就需要选择一个合适的插件了. 或许功能比不上 ratiw\vue-table, 但是这是我见过的最容易上手的一个表单分页插件了分析. 安装简单 &amp;&amp; 使用翻手册就可以处理了安装 &lt;link rel="stylesheet" href="https://unpkg.com/vue-easytabl...原创 2018-05-29 19:24:06 · 27512 阅读 · 0 评论 -
Vue 去除hash路由默认的#
场景. vue 开启路由后,默认的路由中会带上'#', 不雅解决. 实例化路由规则的时候 const router = new VueRouter({ mode: ‘history’, history: true, routes // (缩写)相当于 routes: routes })...原创 2018-05-27 17:44:40 · 10657 阅读 · 0 评论 -
vue 分页插件vue-paginate(前端分页的利器)
场景. 分页如果选择前端分页的话 这是个利器啊分析. 使用简单,功能齐全. 但是如果你的查询量大 就不要用这个插件了,因为他需要的是全量数据,为了减轻数据库的压力,我们不可能 在大数据下提供全量数据的用法 安装方式 第一种 npm install vue-paginate –save-dev ...原创 2018-05-27 10:32:33 · 18623 阅读 · 0 评论 -
vue 定制模态框组件
场景. 模态框是web开发过程中必不可少的一部分, 所以需要定制一个组件解决. 组件<template> <transition name="modal"> <div class="modal-mask"> <div class="modal-wrapper">原创 2018-05-26 17:00:01 · 2342 阅读 · 1 评论 -
php 获取post方法payload(json)形式参数的方法
场景. vue-resource发送了一个post请求,在后台$_POST都获取不到数据解决 $request_body = file_get_contents('php://input'); $data = json_decode($request_body, true);原创 2018-05-21 15:54:20 · 9996 阅读 · 0 评论