v-for Vue风格指南

1. v-for设置key值 key的值应当是遍历元素的某个唯一属性,例如 item.id,而不是遍历的序号index。直接把key的值绑定为index, 可能会引起不必要的bug // good <ul> <li v-for="(item,index) in list" :key="item.id"> {{ todo.text }} </li> </ul> // very bad <ul> <li v-for="(item,index) in list" :key="index"> {{ todo.text }} </li> </ul> 如果要遍历的对象没有一个唯一的id, 非常建议给要遍历的元素加上唯一的id。推荐使用nanoid import nanoid from 'nanoid' ... someAjax() .then((res)=>{ res.users.forEach((item)=>{ item.id = nanoid() }) this.users = res.users }) .catch((err)=>{ console.error(err) }) ... 2. v-for元素一定要是对象 除非是最简单的渲染,如果要在渲染期间改变某个元素值,那么只能将简单元素构造为对象。 // very bad var example1 = new Vue({ el: '#example-1', data: { items: ['a', 'b', 'c'] } }) <div id="example-1"> <input v-for="item in items" v-model="item"> </div> // good var example1 = new Vue({ el: '#example-1', data: { items: [{id:1, value:'a'}, {id: 2, value:'b'}, {id:3, value:'c'}] } }) <div id="example-1"> <input v-for="item in items" :key="item....

2018-12-19 · 1 min · 王端端

WTF!! Vue数组splice方法无法正常工作

当函数执行到this.agents.splice()时,我设置了断点。发现传参index是0,但是页面上的列表项对应的第一行数据没有被删除, WTF!!! 这是什么鬼!然后我打开Vue Devtools, 然后刷新了一下,发现那个数组的第一项还是存在的。什么鬼?? removeOneAgentByIndex: function (index) { this.agents.splice(index, 1) } 然后我就谷歌了一下,发现这个splice not working properly my object list VueJs, 大概意思是v-for的时候最好给列表项绑定:key=。然后我是试了这个方法,发现没啥作用。 最终我决定,单步调试,如果我发现该问题出在Vue自身,那我就该抛弃Vue, 学习React了 单步调试中出现一个异常的情况,removeOneAgentByIndex是被A函数调用的,A函数由websocket事件驱动。正常情况下应该触发一次的事件,服务端却发送了两次到客户端。由于事件重复,第一次执行A删除时,实际上removeOneAgentByIndex是执行成功了,但是重复的第二个事件到来时,A函数又往agents数组中添加了一项。导致看起来,removeOneAgentByIndex函数执行起来似乎没有设么作用。而且这两个重复的事件是在几乎是在同一时间发送到客户端,所以我几乎花了将近一个小时去解决这个bug。引起这个bug的原因是事件重复,所以我在前端代码中加入事件去重功能,最终解决这个问题。 我记得之前看过一篇文章,一个开发者调通过回调函数计费,回调函数是由事件触发,但是没想到有时候事件会重发,导致重复计费。后来这名开发者在自己的代码中加入事件去重的功能,最终解决了这个问题。 事后总结:我觉得我不该怀疑Vue这种库出现了问题,但是我又不禁去怀疑。 通过这个bug, 我也学到了第二方法,可以删除Vue数组中的某一项,参考下面代码。 // Only in 2.2.0+: Also works with Array + index. removeOneAgentByIndex: function (index) { this.$delete(this.agents, index) } 另外Vue devtools有时候并不会实时的观测到组件属性的变化,即使点了Refresh按钮。如果点了Refresh按钮还不行,那建议你重新打开谷歌浏览器的devtools面板。

2018-12-12 · 1 min · 王端端

你应该尽早使用Vuex

之前做的一个项目,使用了Vuex。最近又做了一个项目,也打算用Vuex。只是某些Vuex的概念比较模糊了。所以打算写篇文章记录一下。 我记得以前看过一篇文章,核心思想就是你应该尽早使用Vuex,但是在网上也搜不到了。 无论谁来讲Vuex, 其实都没有官网讲的好,参见官网Vuex 是什么?, 如果你对Vuex有任何概念不清晰,官网都是最好的老师。 官网最后说: 如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。参考Creating a Global Event Bus with Vue.js 但是,杀鸡用牛刀也未尝不可。 程序员往往喜欢:Talk is cheap, show me the code。废话少说,放码过来。我也是,有时候想弄清楚一个问题,往往喜欢去直接看代码。但是对整体的设计原理概念不甚了解。 但是,当我看到官网这张图,我盯着看了几分钟后,理解了这张图,也完全理解了Vuex。 那么为什么要尽早使用Vuex呢? Vuex其实很简单,没你想象的那么复杂 越早Vuex使用越熟练,也能提高自己的知识储备 你迟早需要状态管理的,与其将来痛苦重构,不如尽早享受Vuex带来的畅爽感觉 至于怎么使用Vuex,我就不多说了。网上优秀的教程蛮多的。

2018-05-30 · 1 min · 王端端

Small is Powerful Vue mixins

small is beautiful new Vue({ el: '#app', methods: { hello: function(){ console.log('hello') } }, created: function(){ this.hello() } }) big is ugly new Vue({ el: '#app', methods: { hello: function(){ console.log('hello') }, hello1: function(){ console.log('hello1') }, hello2: function(){ console.log('hello2') }, hello3: function(){ console.log('hello3') }, // a lot of function be added, this is ugly helloN: function(){ console.log('helloN') }, }, created: function(){ this.hello() } }) mixins is powerful var mix = { created: function () { console....

2018-03-30 · 1 min · 王端端

如何在vscode中用standard style 风格去验证 vue文件

1 JavaScript Standard Style简介 本工具通过以下三种方式为你(及你的团队)节省大量时间: 无须配置。 史上最便捷的统一代码风格的方式,轻松拥有。 自动代码格式化。 只需运行 standard –fix 从此和脏乱差的代码说再见。 提前发现风格及程序问题。 减少代码审查过程中反反复复的修改过程,节约时间。 无须犹豫。再也不用维护 .eslintrc, .jshintrc, or .jscsrc 。开箱即用。 安装: npm i standard -g 关于JavaScript 代码规范, 你可以点击链接看一下。 2 如何在vscode中用JavaScript Standard Style风格去验证 vue文件 实际上JavaScript Standard Style有一个FAQ, 说明了如何使用。 但是有一点非常重要的作者没有提到,就是eslint-plugin-html这个插件必须要安装3.x.x版本的, 现在eslint-plugin-html, 已经升级到4.x版本,默认不写版本号安装的就是4.x版本的,所以会出现问题。参考 ESLint v4 is only supported by eslint-plugin-html v3, so you can’t use eslint-plugin-html v1.5.2 with it (I should add a warning about this when trying to use the plugin with an incompatible version on ESLint)....

2018-02-11 · 2 min · 王端端

Vue+ElementUI 手把手教你做一个audio组件

1. 简介 1.1. 相关技术 Vue Vue-cli ElementUI yarn (之前我用npm, 并使用cnpm的源,但是用了yarn之后,我发现它比cnpm的速度还快,功能更好,我就毫不犹豫选择yarn了) Audio相关API和事件 1.2. 从本教程你会学到什么? Vue单文件组件开发知识 Element UI基本用法 Audio原生API及Audio相关事件 音频播放器的基本原理 音频的播放暂停控制 更新音频显示时间 音频进度条控制与跳转 音频音量控制 音频播放速度控制 音频静音控制 音频下载控制 个性化配置与排他性播放 一点点ES6语法 2. 学前准备 基本上不需要什么准备,但是如果你能先看一下Aduio相关API和事件将会更好 Audio: 如果你愿意一层一层剥开我的心 使用 HTML5 音频和视频 3. 在线demon 没有在线demo的教程都是耍流氓 查看在线demon 项目地址 4. 开始编码 5. 项目初始化 ➜ test vue init webpack element-audio A newer version of vue-cli is available. latest: 2.9.2 installed: 2.9.1 ? Project name element-audio ?...

2018-02-09 · 7 min · 王端端

Vue + Vue-router + Element-ui 搭建一个非常简单的dashboard demo

做完这个demo后,你会体会到,Vue组件化,webpack, Vue-router等,并不是很难学习,你需要的只是拿起斧头的勇气 在做demo的过程中,我遇到一个问题,就是vue-router懒加载一直实现不了,纠结了半天。后来回到原点,去vue-route官网看文档,发现是因为syntax-dynamic-import插件没有安装。 所以说:你以为的bug, 实际上是你没看透文档 初次学习这个教程,你不需要有任何担忧某些东西不会,你也不需要写任何代码。因为基本上所有代码都是从element官网上拷贝的,你所做的只是把他们组装在一起罢了。 在线预览 仓库地址:https://github.com/wangduanduan/vue-el-dashboard 效果图: 使用到的技术: Vue Vue-router Element-ui webpack Normalize.css vue-awesome babel 1. vue-cli 安装模板 ➜ vue-el-dashboard git:(master) vue init webpack ? Generate project in current directory? Yes ? Project name vue-el-dashboard ? Project description A Vue.js project ? Author wangdd <wangdd@welljoint.com> ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ?...

2018-02-09 · 5 min · 王端端

Vue+websocket+stompjs 实时监控坐席状态demo

由于是前后端分离的demo, 程序的后端我不管,我只负责把前端做好,这只是个demo, 还有很多不完善的地方。 2018-01-09新增: 后端的MQ事件结构现在也改了,该demo只能看看了。 html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <table class="table" id="event-queue"> <thead> <tr> <th>当前状态</th> <th>状态改变时间</th> <th>姓名</th> <th>工号</th> <th>分机号</th> <th>对方号码</th> <th>呼入数</th> <th>呼出数</th> </tr> </thead> <tbody> <tr v-for="item in eventQueue"> <td>{{item.agentStatus | transAgentStatus}}</td> <td>{{item.agentStatusTime}}</td> <td>{{item.userName}}</td> <td>{{item.loginName}}</td> <td>{{item.deviceId}}</td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script> <script src="js/websocket-suport.min.js"></script> <script src="js/main.js"></script> </body> </html> js var tm = (function(){ var App = function(){}; var app = App....

2018-02-07 · 3 min · 王端端