VueJS

2020-06-29 · 阅读 5262 · 字数 886

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

阅读全文...

2020-03-02 · 阅读 17574 · 字数 152

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

阅读全文...

2019-12-01 · 阅读 19161 · 字数 287

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

阅读全文...

2019-11-21 · 阅读 24618 · 字数 204

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

阅读全文...

2019-11-21 · 阅读 12777 · 字数 72

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

阅读全文...

2019-09-14 · 阅读 31291 · 字数 139

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

阅读全文...

2019-09-11 · 阅读 28687 · 字数 309

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

阅读全文...

2019-09-06 · 阅读 11159 · 字数 59

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

阅读全文...

2019-08-14 · 阅读 9294 · 字数 248

平时在 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 在初始化时，需要全部渲染，成本相对 ...

阅读全文...

2019-07-11 · 阅读 17179 · 字数 267

逻辑 当新订单数量接口返回的数字大于之前缓存的值时，就播放提示音；并弹窗提醒。 实现代码 第一次用 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 ...

阅读全文...

2019-07-07 · 阅读 22435 · 字数 472

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

阅读全文...

2019-04-02 · 阅读 5310 · 字数 119

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

阅读全文...

2019-03-24 · 阅读 20560 · 字数 24

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

阅读全文...

2019-03-24 · 阅读 27603 · 字数 176

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

阅读全文...

2019-03-10 · 阅读 10991 · 字数 187

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

阅读全文...