VueJS

2019-01-22 · 阅读 11832

实际案例 点击图片中间的删除按钮，则触发删除逻辑 点击图片其他区域，触发图片放大预览逻辑 正确的实现如下 <li v-for="(element, index) in images" @click="preview(index)" > ... <span> <i @click.stop="remove(index)"></i> </span> ... </li> 如果不加 stop 的话，在点 ...

阅读全文...

2019-07-31 · 阅读 18648 · 字数 919

由于 Element UI 的 Upload 上传组件只支持多图上传，但并不支持图片的顺序调整，而实际使用场景中，例如，产品封面轮播图，经常要用到图片顺序调整功能。所以，找了一下解决方案。 一些备选方案 JQuery UI sortable 效果演示，参考：https://codepen.io/malkafly/pen/gbVYZb 上面示例中使用的排序组件是 jquery ui 中的 sortable 功能。 但是，我测试的过程中，感觉 jquery ui 的这个功能非常不流畅，经常出现没有响应的情况。 Sortablejs 找到一个竞品 sortablejs, 从对比视频上看，优化效果明显 ...

阅读全文...

2018-12-15 · 阅读 6670

在使用 Element UI VueJS 的上传图片组件时，遇到一个问题。需要在一个列表中使用多个 el-upload 组件，当其中一个组件数据更新时（上传成功，或者删除成功），能够及时更新绑定的变量。 on-success 回调，默认支持的三个参数是 res, 上传图片的后台接口返回 file, 新增的图片文件 fileList，图片列表 默认是不支持当前循环的 index 。 解决方法是使用 Function.prototype.bind <tr v-for="(item, index) in items" class="array-row&quot ...

阅读全文...

2018-09-06 · 阅读 11950

代码示例，使用 element ui 的 el-table, 将返回的数据列表，逐行渲染到 table row 上，每行可以编辑 staffs 字段，即用 el-select v-model 绑定了 staffs 字段。 <template slot-scope="scope"> <el-select v-model="scope.row.staffs" multiple ... 问题的现象是，数据在初始化之后，可以正确的渲染到视图上，但是后续修改的内容没有同步渲染到视图上。 有问题的代码。 var that = this; ...

阅读全文...

2018-09-05 · 阅读 15776

引入 vue-router.min.js，然后与 Vue 实例绑定即可 例如： http://www.sunzhongwei.com/test_vue?name=zhongwei var router = new VueRouter({ mode: 'history', routes: [] }); new Vue({ router, el: '#my_app', mounted: function() { var name = this.$route.query.name; console.log(name); }, }); ...

阅读全文...

2018-12-11 · 阅读 26356

现实场景 多级分类，且大分类下的二级分类中，存在同名二级分类的问题。在添加产品时，从线性单列下拉框中选择对应的子分类非常困难，甚至可以说是 mission impossible。 那么，层级化的树形下拉框组件就非常合适了。 网上找了个 VueTreeselect 组件，网址 https://vue-treeselect.js.org/ 是用 VueJS 实现的一个组件。 无法通过 ajax 初始化数据 通过 ajax 拉取的后台数据，在前端怎么也展示不出来。 原来 options 只能在初始化时设置，在之后通过 ajax 回调中赋值是无效的。。。负分！ 无法选择父级节点 去掉下面的配置 :d ...

阅读全文...

2019-03-10 · 阅读 56844

今天写了这么一段代码 <img src="{{ img_src }}" > img_src 是 vue 里存储图片地址的一个变量。然后，这段代码报错了。。。 Google 了一下，才知道正确的写法应该是 <img :src="img_src" /> 原来我是个大xx。。。 mustache 的变量括号不能用于 HTML 属性 对应 HTML 属性，需要使用 v-bind，即 <img v-bind:src="img_src" /> v-bind 可以缩写为 :, 即 <img :src= ...

阅读全文...

2017-06-17 · 阅读 9225

在 weex 的 demo 项目 hacknews 里看到了 vuex 的使用。于是了解了一下 vuex 的基本概念。 可以将 vuex 理解为一个前端 MVC 的规范。 如果没有 vuex 世界是怎样的？ 场景一: 新闻类 APP，首页需要拉取新闻列表 只需要在页面初始化时 ajax 获取新闻列表即可，获取之后给对应的变量赋值。 然后页面自动渲染。 这种情况，似乎没有 vuex 什么事情。 硬要说有什么关系的话，那就是把访问服务器的逻辑剥离出来。方便复用。(然而，这里根本复用不了。。。) 场景二： APP 中需要登录之后，才能拉取部分数据，而这些接口都需要用到代表登录态的 token。 即， ...

阅读全文...

2017-01-20 · 阅读 20281

在使用 vuejs 2.1.8 时，出现一个奇怪的问题，原页面 canvas 绘制的图像，之前可以正常显示。 但是引入 vuejs 2 ，并实例了一个 vue 对象，图像在页面刷新后就不显示了。只有当动画继续绘制几秒之后，才会出现。console 中也没有任何报错信息，通过日志来看，js 代码的确运行正常，只是看不到图像。。。 代码结构如下 var ctx = document.getElementById('ca').getContext('2d'); var app = new Vue(...); 完全没有头绪，只能 Google 了，发现一个完全类似的情况 Vue interferin ...

阅读全文...

2019-03-10 · 阅读 136624

原生 js 使用 getElementById 比较麻烦的地方 需要为元素设置 id 设置 id 之后，无法复用，因为一个页面中不能存在两个相同的 id 双向绑定 v-model 分两种情况 input 默认为空。这种情况使用 v-model 最方便，通过 this.inputName 即可获取到对应的值。 input 有默认值。即，设置了 value 属性的 Input。这种情况不能使用 v-model。否则 data 中的初始化值会把 value 的值覆盖掉。正确的姿势是使用 v-model, 然后通过 ajax 从后台拉取默认值，给对应的 vuejs 变量赋值。对于简单的后台渲染页 ...

阅读全文...

2016-09-26 · 阅读 24401

上周使用 vuejs 时，遇到这样的情况。更新了一个状态变量，此变量用于控制一个弹出输入框是否显示。但是变量置为 true 之后，下个逻辑 setfocus 却没有执行。 当时怀疑是 vuejs 并不是即时刷新的，所以导致 setfocus 失败。google 了一下，的确如此，使用 vuejs 内置的 nextTick 解决了，即将 setfocus 逻辑置于 nextTick 的回调函数中即可。 但是，vuejs 刷新 dom 的逻辑是怎样的呢？ nextTick 的用法 tick 中文翻译是，钟的嘀嗒声。这个词用的很应景，妙！ Defer the callback to be exec ...

阅读全文...

2018-12-11 · 阅读 45117

使用 vuejs 做了一个简单的功能页面，逻辑是，页面加载后获取当前的经纬度，然后通过 ajax 从后台拉取附近的小区列表。但是 bug 出现了，在显示小区列表之前，会闪现小区名对应的 vuejs 变量名。 案发现场的 HTML 代码 <ul v-for="item in items"> <li>{{ item.name }}</li> </ul> 页面加载时，会闪现 {{ item.name }} Google 了一下，发现 vuejs 内置的 directive v-cloak 可以解决这个问题。非常简单 HTM ...

阅读全文...

2016-08-18 · 阅读 7436

最近在做一个图片上传的功能，允许用户一次选择多个本地图片进行上传。原本以为很简单的逻辑，就用 jquery 开搞。 于是屎堆一般的代码诞生了，各种选择器、各种拼接 html 串；关键问题是距离功能实现还差很远，而我已经厌倦了这座屎山。临时决定尝试一下 vuejs，原因是基于双向绑定来做上传进度更新、是否完成判断要简单得多，关键是代码可读性感人。 没想到，vuejs 文档扫了不到五分钟，就能顺利开搞。我觉得这样归功于之前对 angular 1 的基础还在，而 vuejs 在双向绑定、模版层基本是抄袭了 angular 1 的实现。“还是熟悉的味道，还是原来的配方” 这个形容毫不为过。原本用 jq ...

阅读全文...