VueJS

分类下相关文章

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 ...

阅读全文...

vuejs 初体验

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

阅读全文...