VueJS

分类下相关文章

Vue SSR 服务端渲染是否有必要

最近遇到一个问题,一个内容站是否适合前后端分离。对于我这之前并不是一个问题: 因为对于内容站我压根不会考虑前后端分离,毕竟后端模板已经足够灵活,完全没有分离的必要。 而 APP 和小程序是天然的前后端分离,也没有选择性。 但是,如果是一个团队协作呢? SSR 是什么 SSR 是 Server Side Rendering 的缩写,即服务端渲染。 Vue 有独立的专题页来讨论 SSR: https://vuejs.org/v2/guide/ssr.html https://ssr.vuejs.org/zh/ 可见这是一个绕不过的问题。 为什么会有 SSR 概念的出现 前提是页面已经用了类 ...

阅读全文...

VueJS v-model 自动将输入框获取的字符串转换为数字

JS 的类型转换容易出现 bug html input 输入框即便指定 type="number",也经常出现 v-model 获取到的值为字符串的情况。 于是就出现了,在数值计算逻辑中,数字与字符串相加的情况。 > 100 + "2.35" "1002.35" 而我们预期的是: 100 + 2.35 102.35 在钱相关的计算中,这非常危险。 所以,不得不使用 parseFloat() 或者 Number() 对字符串进行转换。 VueJS 自动转换 <input v-model.number="pric ...

阅读全文...

移动网页端使用 Vue Vant 组件上传文件

非图片文件如何显示预览图标 默认支持非图片文件的预览图标,效果可以接受。同时,可以看到文件名的前面一部分。 限制接受的文件类型 accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx" 限制上传的单个文件大小 max-size 文件大小限制,单位为 byte。 默认超出文件大小时,没有任何提示。但是该组件在文件超出大小时,会触发 oversize 事件。 模板中设置文件大小上限,并添加事件监听: <van-uploader :max-size=10485760 @ov ...

阅读全文...

Vue Element UI upload 组件上传文件之后 file list 依旧是空数组

在 element ui 的 GitHub issue 中搜索了一下,发现 upload 组件确实不支持自动更新 file list,需要手动在上传成功和删除的回调中处理文件列表同步。。。 这个体验太差了。 无奈只能手动实现,设置 on-success 和 on-remove 的回调处理。 模板代码 <div id="upload_file"> <el-upload class="upload-demo" action="/api/upload" :on-success="han ...

阅读全文...

设置 Element UI 组件默认加载英文语言包

Element UI 默认使用的是中文 locale,在英文网站中使用,会发现大量的组件提示信息为中文。 我是从 CDN 引入的 Element UI 文件,找到一个切换 locale 的解决方案。 首先,从 CDN 引入英文语言包 locale/en.js 然后,设置 element locale 为英文 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js& ...

阅读全文...

vant button 组件动态添加/删除 loading 属性

例如,vant 的 button 组件,有一个 loading 属性。 <van-button loading type="danger" loading-text="加载中..." /> 有 loading 属性时,按钮会显示一个进行中的动态效果 没有 loading 属性时,则是一个普通的按钮样式 通常在调用后台 api 时,会在 button 组件上,添加 loading 属性。当 api 调用结束, 则删除该属性。 简单的实现方法: <van-button :loading="handling ? true : ...

阅读全文...

Vue 组件库 Vant 的 Picker 选择器使用问题汇总

van-popup 不显示 bug 现象: 触发 picker 弹出事件后,van-overlay 黑色背景已出现,但是包含 van-picker 的 van-popup 并未显示出来。 Chrome 工具里看了一下, fixed 并未生效,虽然 position: fixed; 并没有被覆盖,但是显然是没有生效。 StackOverflow 上搜索了一下,说可能是父级元素使用 transform 影响到了 fixed 的生效。 于是,将父级元素中的 -webkit-transform: translateZ(0); 注释掉。果然 van-popup 就可以看到了。 translateZ( ...

阅读全文...

Vuejs 输入框监听回车事件

例如,我想在一个输入框输入内容之后,点击回车,自动触发一个处理输入内容的函数。 使用 @keyup.enter 即可: <input v-model="input" type="text" class="form-control" @keyup.enter="convert_code_to_name" placeholder="颜色代码或名称"> 演示效果: 颜色转换工具 demo ...

阅读全文...

v-show 与 v-if 的区别

平时在 vuejs 中用 v-if 使用习惯了,当突然看到 v-show 时,不由的产生了疑惑,既然有了 v-if, 为何还要 v-show. v-if 条件渲染,即,使用了 v-if 如果满足条件,则整个子节点都会被渲染出来,包括事件的绑定等 如果不满足条件,则整个子节点都会被删除,包括事件也会被解绑 v-show 实际上就是 display:none 的快捷方式。 v-show 只是隐藏了节点的显示,但是节点还在,其绑定的事件也都还在。 v-if 和 v-show 的不同使用场景 从两者的原理可以看出,v-if 的来回切换成本很高。而 v-show 在初始化时,需要全部渲染,成本相对 ...

阅读全文...

VueJS 实现管理后台新订单的语音提醒

逻辑 当新订单数量接口返回的数字大于之前缓存的值时,就播放提示音;并弹窗提醒。 实现代码 第一次用 js 调用音频播放,没想到这么简单。。。 new Vue({ el: "#sidebar", data: { "new_order_count": 0, }, mounted: function() { var audio = new Audio('/new_order.mp3'); var that = this; this.fetch_data('new_order_count', '/new_or ...

阅读全文...

v-charts 图表组件 - 基于 Vue 和 echarts 封装

现在稍微复杂一点的前端界面,我发现离开了 Vue 就写不动。 目前正在做一个数据的图表展示,发现 v-charts 真是个神器。完美结合了 Vue 和 echarts 的优点。 效果如图 配置方便直观 设置别名 双 Y 轴 很轻松实现,文档示例也非常人性化,比 echarts 官网文档更直观。 代码实现 模板 <ve-histogram :title="{text: '订单趋势', left: 'center', top: 'bottom'}" :data="order_data" :settings=" ...

阅读全文...

Vue 变量如何方便的绑定 laravel form 输入框

vuejs v-model 绑定 html input 输入框后,需要注意 v-model 变量并不能由 html input 的值进行初始化 但是 v-model 变量可以同步数据到 html input 所以,在 v-model 变量需要在 vue mounted 时进行初始化。例如, this.input_value = {!! $some_var !!}; 之后,就不需要做特殊处理了,v-model 会自动把值同步到 input 组件的 value 上。 具体说明,参考 vuejs 官方文档 https://vuejs.org/v2/guide/forms.html ...

阅读全文...

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

阅读全文...