分类下相关文章
2020-06-29 · 阅读 5303 · 字数 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 · 阅读 17637 · 字数 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 · 阅读 19220 · 字数 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 · 阅读 24700 · 字数 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 · 阅读 12835 · 字数 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 · 阅读 31388 · 字数 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 · 阅读 28781 · 字数 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 · 阅读 11227 · 字数 59
例如,我想在一个输入框输入内容之后,点击回车,自动触发一个处理输入内容的函数。 使用 @keyup.enter 即可: <input v-model="input" type="text" class="form-control" @keyup.enter="convert_code_to_name" placeholder="颜色代码或名称"> 演示效果: 颜色转换工具 demo ...
2019-08-14 · 阅读 9342 · 字数 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 · 阅读 17259 · 字数 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 · 阅读 22503 · 字数 472
现在稍微复杂一点的前端界面,我发现离开了 Vue 就写不动。 目前正在做一个数据的图表展示,发现 v-charts 真是个神器。完美结合了 Vue 和 echarts 的优点。 效果如图 配置方便直观 设置别名 双 Y 轴 很轻松实现,文档示例也非常人性化,比 echarts 官网文档更直观。 代码实现 模板 <ve-histogram :title="{text: '订单趋势', left: 'center', top: 'bottom'}" :data="order_data" :settings=" ...
2019-04-02 · 阅读 5358 · 字数 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 · 阅读 20617 · 字数 24
例如在页面 script 中执行 Toast.success('抄底成功'); 报错 Toast is not defined 正确的用法是 vant.Toast.success('抄底成功'); ...
2019-03-24 · 阅读 27655 · 字数 176
拉取历史记录,并在前端做无限下拉展示,是一个非常常见的使用场景。 最近在使用的 Vant (轻量、可靠的移动端 Vue 组件库),实现起来就非常方便。 模板实现代码 <div id="app" v-cloak> <van-list v-model="loading" :finished="finished" finished-text="暂无更多数据" @load="load_more_items" > ...
2019-03-10 · 阅读 11037 · 字数 187
在后台数据源不可控的情况下,很有可能出现商品图片 404 的情况,而随之而来的就是界面布局错乱。例如,下图,右侧商品图片丢失,导致图片外层 div 无法计算高度,以至于排版错乱。 VueJS 处理 404 的方法: 首先在 HTML 模板中,加上 error 处理函数 <img :src="product.image" alt="" @error="show_default_image"> 然后在 vue 实例的方法中加上对应的处理函数,使用默认图片替换 404 错误的图片 show_default_image: fu ...
生活 | 跑步 清单 足球 鲁班 探索 孤独的美食家 驾驶 电视剧 收纳 奶爸 健康 game 电影 周末 joke |
---|---|
Geek | 健身 Laravel Git Vim MySQL Linux UI Windows SVN 纪录片 管理 Shell 游记 工具 手机 BackboneJS 自建博客 Mac DNS Tornado CDN Django Python AngularJS 理财 前端 Nginx 爬虫 Redis Javascript Browser 浏览器 推广 OAuth CSS PHP Social Networks 安全 运维 创业 杂记 VueJS Android Image IDE Java ReactJS 数据分析 SQLite RESTful 读书笔记 家电 ecshop Vagrant wordpress docker SEO GTD magento mongodb nodejs weex 冷知识 ruby iOS 微信小程序 AI CMS 快应用 backpack 广告联盟 OA 短信 UWP Win CSharp Tampermonkey graphviz 钉钉 WPS 数据字典 微信公众号 Fuchsia Adobe XD SQL Server thinkphp 代码规范 商业模式 Flutter 头痛的问题 serverless 视频制作 国际化 golang 服务器 Kotlin 网站建设 5G 笔记本 图片 spark spring 物联网 InfluxDB 图像识别 postgre rust |
成长的烦恼 | 闲言碎语 待产 不睡觉 写作 程序员 孙心然语录 原则 大鸿语录 |
地球 | 植物 时间 中文 赚钱 国家地理 烟台 一生伏首拜阳明 emoji 弟子规 英文 国际贸易 |