vue
文章平均质量分 58
fredricen
这个作者很懒,什么都没留下…
展开
-
flask+vue实现简单的Web应用
简介flask是python在web开发上的一个比较轻量的开发框架,vue是前端视图库,是一个MVVM框架。flask+vue可以实现快速的现代web应用开发,这里我们以简单的读写配置文件为例,做一个示例。项目用到的开发基座有:python 3.8.8flask 1.1.2flask-cors 3.0.10vue 2.6.12vue-cli 4.5.13element-ui 2.15.2...原创 2021-06-28 13:01:17 · 25545 阅读 · 2 评论 -
vue2.x中过滤器和方法函数使用场景浅析
过滤器在vue2.x中允许自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>原创 2021-04-30 15:05:55 · 319 阅读 · 0 评论 -
Vue中如何将绑定的带参事件回调函数转换为节流或者防抖
函数定义lodash 中的节流函数throttle和防抖函数debounce官方文档是这样定义的:_.throttle(func, [wait=0], [options=])参数func (Function): 要节流的函数。[wait=0] (number): 需要节流的毫秒。[options=] (Object): 选项对象。[options.leading=true] (boolean): 指定调用在节流开始前。[options.trailing=true] (boolean): 指原创 2021-01-28 15:14:09 · 2680 阅读 · 2 评论 -
从Vue看ES6中Array的fill方法
引子在学习Vue的“渲染函数”时,查看到官方文档有一段这样的代码:render() { return Vue.h('div', Array.apply(null, { length: 20 }).map(() => { return Vue.h('p', 'hi') }) )}于是对数据构造方法产生了好奇,我们知道构造数组有一种方法就是通过构造函数,即var arr = new Array(10) //生成一个长度为10的数组/*与上面等价*/var原创 2020-11-20 13:02:14 · 1411 阅读 · 0 评论 -
vue中的代码逻辑封装心得
问题 watch: { isAuthenticated: function(val, oldVal) { for (const key of Object.keys(this.modelSearch)) { if (key !== 'authentication') { this.modelSearch[key] = '' } else { this.modelSearch[key] = val }原创 2020-09-22 16:05:24 · 628 阅读 · 0 评论 -
tinyMCE v5.4.2下的图片上传踩坑实录
tinyMCE初始化window.tinymce.init({ selector: `#${this.tinymceId}`, language: this.languageTypeList.zh, height: this.height, body_class: 'panel-body ', object_resizing: false, toolbar: this.toolbar.length > 0原创 2020-08-31 16:18:33 · 2546 阅读 · 0 评论 -
element-ui表单校验实现数值型兼容空值
rules:{ mandarinLevel: [ { message: '请选择普通话水平', trigger: 'change', transform(val) { if (val) { return Number(val) } } } ],}原创 2020-07-17 15:48:50 · 663 阅读 · 0 评论 -
vue2.X版本中filters访问methods中的方法
问题我们经常会用到过滤器filter,用于在处理变量的后操作。过滤器可以用在methods中,有两种思路可以实现,一个是采用全局过滤器,以官方文档中的代码为例:Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1)})new Vue({ methods原创 2020-07-07 10:43:20 · 16886 阅读 · 13 评论 -
vue-cli 4.x版本生成的工程,SCSS样式问题
问题vue-cli 4.x版本生成的vue工程,已经自动帮我们配置好了webpack的css-loader【清单详见这里】,我们在vue的单文件组件中写scss样式的时候,有些属性,比如background-image,需要配置url,譬如:background-image:url("/assets/img/background.jpg")但是这样的写法,在webpack的css-loader是无法解析打包的。分析这是由于css loader 会把非根路径的url解析为相对路径,加~前缀才解析为原创 2020-07-06 18:53:52 · 712 阅读 · 0 评论 -
高德地图自定义弹窗内容
需求使用vue2.x来实现高德地图自定义弹窗内容,可以通过一个按钮来切换不同的样式风格,即改变弹窗内容样式。分析高德地图官网为开发者提供了自定义弹窗内容的例子,见这里。官方提供的方式是Dom操作,即createElement、appendChild等方式。我们选择用vue,用vue的方式来实现Dom操作。vue的全局API中第一个是Vue.extend,这个是用来实现一个vue的子类构造器,其实可以看做是一个vue模板对象构造器,其实例化对象类似于Dom中的DocumentFragment接口。由原创 2020-05-17 21:41:50 · 12149 阅读 · 4 评论