VUE
编码博客控
这个作者很懒,什么都没留下…
展开
-
Vue中Class与Style绑定
操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以使用v-bind处理它们:只需要通过表达式计算出字符串结果即可。不过拼接字符串比较麻烦,因此在v-bind用于class和style时,vue做了专门的增强,表达式结果的类型除了字符串之外,还可以是对象和数组。绑定HTML Class(1) 对象语法可以给v-bind:class一个对象,以动态切换cl...原创 2019-10-11 21:24:45 · 97 阅读 · 0 评论 -
关于Vue中:key="index"的console警告
在写vue项目时,浏览器的console出现如下警告信息:[Vue warn]: Property or method "index" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, ...原创 2019-10-11 21:19:19 · 811 阅读 · 0 评论 -
Vue中组件之间8种通信方式,值得收藏
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系。 vue组件中关系说明:如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系; B与C之...转载 2019-10-08 22:15:10 · 310 阅读 · 0 评论 -
Vue 项目预渲染机制引入实践
周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着做不就完了嘛,结果年轻的我付出了整个周末… 这篇文章就记录一下最后是怎么配置的 T.T声明:1.以下配置只保留有必要的2.生成目录这里使用base代替,请自行修改3.vue-cli模板使用webpack,其他模板类推4.Githu...原创 2019-09-29 15:08:39 · 123 阅读 · 0 评论 -
Vue 项目数据动态过滤实践
这个问题是在下在做一个Vue项目中遇到的实际场景,这里记录一下我遇到问题之后的思考和最后怎么解决的(记性不好 -。-),过程中会涉及到一些Vue的源码,如果不太了解的话可以瞅瞅 Vue源码阅读系列文章~问题是这样的:页面从后台拿到的数据是由0、1之类的key,而这个key代表的value比如0代表女、1代表男的对应关系是要从另外一个数据字典接口拿到的;类似于这样的Api:{ "SEX_TY...原创 2019-09-29 14:59:42 · 238 阅读 · 0 评论 -
vue中keepalive怎么理解?
什么是keepalive我们平时开发中, 总有部分组件没有必要多次init, 我们需要将组件进行持久化,使组件状态维持不变,在下一次展示时, 也不会进行重新initkeepalive音译过来就是保持活着, 所以在vue中我们可以使用keepalive来进行组件缓存基本使用上面提到被keepalive包含的组件不会被再次init,也就意味着不会重走生命周期函数, 但是平常工作中很多业务场景...转载 2019-09-26 17:36:32 · 262 阅读 · 0 评论 -
换个角度使用VUE过滤器
过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作。官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已。但最近在做两款APP时,遇到一些特殊的需求。然后就对vue中的filter一些用法结合源码好好的梳理了下。下边我们以一个日期格式化展开讨论。本文配套的demo可以微信关注公众号【小院不小】回复vuefilter获得。1. 定义一个日期格式化函数都9012了,我们就采...转载 2019-09-25 16:29:45 · 137 阅读 · 0 评论 -
总结异步编程的六种方式
异步编程众所周知 JavaScript 是单线程工作,也就是只有一个脚本执行完成后才能执行下一个脚本,两个脚本不能同时执行,如果某个脚本耗时很长,后面的脚本都必须排队等着,会拖延整个程序的执行。以下为几种异步编程方式的总结,希望与君共勉。回调函数事件监听发布订阅模式PromiseGenerator (ES6)async (ES7)异步编程传统的解决方案:回调函数和事件监听初始...原创 2019-09-23 20:25:17 · 123 阅读 · 0 评论 -
Vue中拆分视图层代码的5点建议
一.框架的定位框架通常只是一种设计模式的实现,它并不意味着你可以在开发中避免所有分层设计工作。SPA框架几乎都是基于MVC或MVVM设计模式而建立起来的,这些模式都只是宏观的分层设计,当代码量开始随着项目增大而增多时,问题就会越来越多。许多企业内部的项目仍然在使用angularjs1.X,你会发现许多controller的体积大到令人发指,稍有经验的团队会利用好angularjs1构建的c...转载 2019-09-20 17:35:42 · 633 阅读 · 0 评论 -
Vue Dark Mode
文档您可以在网站上浏览Vue Dark Mode的文档。安装npm install vuedarkmode# Or if you prefer using yarnyarn add vuedarkmodeVue.js在您的main.js文件中:从“ vue ”导入Vue ;从“ vuedarkmode ”导入VueDarkMode ; Vue。使用(VueDar...转载 2019-09-17 17:54:49 · 955 阅读 · 0 评论