VueJS

分类下相关文章

从 CDN 引入的 Vant,调用 Toast 提示时报错 Toast is not defined

例如在页面 script 中执行 Toast.success('抄底成功'); 报错 Toast is not defined 正确的用法是 vant.Toast.success('抄底成功'); ...

阅读全文...

使用 Vue 的 Vant.js List 列表组件实现无限下拉

拉取历史记录,并在前端做无限下拉展示,是一个非常常见的使用场景。 最近在使用的 Vant (轻量、可靠的移动端 Vue 组件库),实现起来就非常方便。 模板实现代码 <div id="app" v-cloak> <van-list v-model="loading" :finished="finished" finished-text="暂无更多数据" @load="load_more_items" > ...

阅读全文...

VueJS 将 404 图片替换为默认图片

在后台数据源不可控的情况下,很有可能出现商品图片 404 的情况,而随之而来的就是界面布局错乱。例如,下图,右侧商品图片丢失,导致图片外层 div 无法计算高度,以至于排版错乱。 VueJS 处理 404 的方法: 首先在 HTML 模板中,加上 error 处理函数 <img :src="product.image" alt="" @error="show_default_image"> 然后在 vue 实例的方法中加上对应的处理函数,使用默认图片替换 404 错误的图片 show_default_image: fu ...

阅读全文...

Vue 阻止点击事件向父级传递

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

阅读全文...

Vue 实现多图上传并可以调整图片顺序

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

阅读全文...

使用 Function.prototype.bind 为 vuejs 组件的回调函数添加额外参数

在使用 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 ...

阅读全文...

坑:Vue 动态添加的数据属性,双向绑定渲染异常

代码示例,使用 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; ...

阅读全文...

使用 vue-router 获取 URL 查询参数

引入 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); }, }); ...

阅读全文...

VueJS 的树形下拉框组件

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

阅读全文...

使用 vue 为 image src 赋值

今天写了这么一段代码 <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= ...

阅读全文...

vuex 的基本概念

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

阅读全文...

VueJS 2 导致 HTML5 Canvas 绘制的图像无法显示

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

阅读全文...

vuejs 中如何优雅的获取 Input 值

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

阅读全文...

vuejs - nextTick 解决异步 DOM 刷新问题

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

阅读全文...

使用 v-cloak 防止页面加载时出现 vuejs 的变量名

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

阅读全文...

近期节日

2019年04月01日 愚人节
2019年04月01日 复活节
2019年04月02日 国际儿童图书日
2019年04月04日 寒食节
2019年04月05日 清明节
2019年04月07日 世界卫生日
2019年04月11日 世界帕金森病日
2019年04月20日 谷雨
2019年04月22日 世界地球日
2019年04月23日 世界读书日
2019年04月26日 知识产权日
2019年04月30日 全国交通安全反思日
查看更多节日