前端组件

分享： 很高兴今天有机会来跟大家聊一聊 Vue.js。分享前我想告诉大家的是，Vue.js 是一个前端框架，这个很重要。 为什么我没有选择 React？React 相对于整个开发业务来讲是比较「重」的，而且实现的方式其实挺超前的。 我虽然并不讨厌 React，但是由于 Vue 更加简单和轻便，可能对于一些相对简单的团队来讲，是一个更好的选择。 本次分享中，我会先介绍一下 Vue.js 的历史，然后重点讲讲掘金在开发中总结的一些组件化编程经验，最后说一说我们是怎么使用 Vue.js 的 首先介绍一下 Vue js，它是一个很「高大上」的前端库。 用库的目的是为了能在最少的时间里写出最多的代码，能够在产品经理找你麻烦之前就把整个项目搞定。我认为这是一个好的库所具有的意义。 MVVM 这类前端框架，它本身就是一个设计模式。这是一种可以用同一种方法解决一些普遍问题的思路，是一个抽象的概念。而 ViewModel 这个东西在这中间，相当于一个黑箱子。 如果我们不使用 MVVM 会怎么样呢？ 举个例子：当网站数据改变的时候，我们要手动做一下操作，把某一部分展示的 UI 重新渲染一遍，这会是一个很麻烦的过程。但是如果我们使用 MVVM 框架，当数据发生变化之后，UI 改变的这个部分就会由这个框架来帮我们搞定，这相当于它造了一个「轮子」，我们在上面跑就可以了，这就是 MVVM。 什么是前端框架

原文作者：http://www.cnblogs.com/Leo_wl/p/4780750.html 因为redux和react的版本更新的比较频繁，博客园这里用的redux版本是1.0.1，如果你关心最新版本的使用技巧，欢迎来我的Github查看(https://github.com/matthew-sun/blog/issues/18) ，我会在这里进行持续的更新和纠错。 React是最好的前端库，因为其发源于世界上最好的后端语言框架。 ---信仰 4.0 will likely be the last major release. Use Redux instead. It's really great. —Flummox框架作者 acdliteAndrew Clark 为什么使用React还需要使用别的框架来搭配？ React的核心是使用组件定义界面的表现，是一个View层的前端库，那么在使用React的时候我们通常还需要一套机制去管理组件与组件之间，组件与数据模型之间的通信。 为什么使用Redux？ Facebook官方提出了FLUX思想管理数据流，同时也给出了自己的 实现 来管理React应用。可是当我打开 FLUX 的文档时候，繁琐的实现，又臭又长的文档，实在难以让我有使用它的欲望。幸好，社区中和我有类似想法的不在少数，github上也涌现了一批关于实现FLUX的框架

3 月，跳不动了？>>> 上周花了 3 天的时间和老大一起重构了一下小程序的样式开发，虽然说在开发的过程中遇到了一些问题，但是最终减少了不少样式代码，同时功能上也更加强大。进一步来说，如果在后面我们的小程序用户想要自己定制化主题，也可以很快的实现。 全局样式开发 之前的小程序开发中，我们全方面使用了 Component 构造小程序组件以及页面(页面也可以使用 Component 构造器来编写)。当然一方面是因为小程序 Component 的开发体验非常好，拥有类似于 Vue mixin, watch 的 behaviors 和 observers ，比 Page 构造器强大了很多。另一方面，对于业务较重的小程序来说, Component 也有性能优势。可以参照 滴滴开源小程序框架Mpx 中的 Page与Component setData性能对照 。 在开发过程中，有很多样式是可以复用的。如果在之前开发中经常使用 Bootstrap 之类的 ui 库，那么你就会习惯使用这种库的 utilities 类。但是默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。不会受到全局样式 app.wxss 的影响。所以我们只能通过增加 @import 语法来辅助各个组件进行开发。 @import "xxx.css"; 如果你使用 CSS 预处理器来辅助小程序开发的话，可能就需要通过

移动h5开发资源整理 这2年来，移动h5开发逐渐成为一种主流，也不断趋向于成熟。硬件和浏览器的不断更新，曾经的浏览器兼容也不再是开发者的噩梦。 接触h5开发一年多，从最初的新手到现在，陆陆续续遇到过很多坑。这里把想到的一些经验与资源罗列出来，给刚入h5的同学带来一些帮助。该文章会持续更新。 内容比较多，可以点击下方『悬浮菜单按钮』进行选择需要阅读的章节。 基础知识 新手建议看看下面的在线教程。 html,css,JavaScript,jQuery在线教程： w3school在线教程： http://www.w3school.com.cn/ 菜鸟教程： http://www.runoob.com/ 参考手册： jQuery： http://hemin.cn/jq/ css： http://css.doyoe.com/ h5页面基本组成 meta viewport模板 以上支持响应式布局设计。 有用的js类库 jQuery 这个必须学会的。 在线教程： http://www.w3school.com.cn/jquery/index.asp 在线手册： http://hemin.cn/jq/ Zepto Zepto和jQuery基本是一样的，只是由于其体积更小，适合移动端使用。 如果你会用jquery，那么你也会用zepto。注意，zepto并没有实现jQuery的所有功能

组件化的思想 将一个页面中的处理逻辑放在一起，处理起来就会很复杂，不利于后续管理和扩展。 如果将页面拆分成一个个小的功能块，每个功能块实现自己的内容，之后对页面的管理和维护就变得很容易了。 注册组件的基本步骤 1.创建组件构造器 2.注册组件 3.使用组件 //创建组件构造器对象 const cpnC = Vue.extend({ template:` <div> <h2>hello world</h2> <p>hi world</p> </div> ` }) //注册组件 Vue.component('my-cpn',cpnC) //使用组件 <div id="app"> <my-cpn></my-cpn> </div> 全局组件 可以在多个Vue的实例下使用 Vue.component('my-cpn',cpnC) 局部组件 仅可以在当前Vue实例下使用 var vm = new Vue({ el: '#app', data: {}, methods: {}, components:{ mycpn: cpnC } }); 父子组件 <script> const cpnC1 = Vue.extend({ template:` <div> <h2>我是标题</h2> <p>我是内容，哈哈</p> </div> ` }) const cpnC2 = Vue.extend({

后台管理UI的选择 目录 一、EasyUI 二、DWZ JUI 三、HUI 四、BUI 五、Ace Admin 六、Metronic 七、H+ UI 八、Admin LTE 九、INSPINIA 十、LigerUI 十一、FineUI 十二、其它UI 十三、总结 最近要做一个企业的OA系统，以前一直使用EasyUI，一切都好，但感觉有点土了，想换成现在流行的Bootstrap为基础的后台UI风格，想满足的条件应该达到如下几个： 1、美观、大方、简洁 2、兼容IE8、不考虑兼容IE6/IE7，因为现在还有很多公司在使用Win7系统，系统内置了IE8 3、能通过选项卡打开多个页面，不想做单页，iframe也没关系 4、性能好，不要太笨重 5、最好以Bootstrap为基础 6、还希望在以后别的系统中能够复用。 一次次反复纠结的选择开始了，给大家介绍下我考虑过的UI，也给大家一个参考。 一、EasyUI easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。 使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。 easyui是个完美支持HTML5网页的完整框架。 easyui节省您网页开发的时间和规模。 easyui很简单但功能强大的。 优点：轻量、功能强大、免费

1.kubernetes架构与组件 Kubernetes集群是由一组节点，也就是node节点组成，可以是物理服务器，也可以是虚拟机。 每个node节点上都安装了kubelet和kube-proxy这两个node组件。 而安装了master组件的节点称为master node。 node组件通过kubelet组件与master组件进行交互，维护着该node上的pod的生命周期。 一个典型的master集群是由一个master node和若干个承载工作负荷的node组成。 kubernetes通过etcd存储着集群中的所有对象和状态。 kubernetes还提供了集群维护的超级命令行工具kubectl。 （1）master master组件主要包括：Apiserver、Scheduler、Controller Manager和etcd。 Api Server是master组件的中枢，其余的master组件都是通过调用Api的接口，实现各自的功能。 API server是整个集群控制的前端，是唯一可以修改集群状态和数据库的组件。 master组件是Kubernetes集群的大脑。 所有集群的控制命令都传递给Master组件并在其上执行。 每个Kubernetes集群至少有一套Master组件。来负责控制和管理整个集群，才能保证集群的正常运转。 它协调集群中的所有活动，包括集群中应用的调度

这段时间对项目做了一次整体的优化，全站有了20%左右的提升（本来载入速度已经1.2S左右了，优化度很低），算一算已经做了四轮的全站性能优化了，回顾几次的优化手段，基本上几个字就能说清楚： 传输层面：减少请求数，降低请求量 执行层面：减少重绘&回流 传输层面的从来都是优化的核心点，而这个层面的优化要对浏览器有一个基本的认识，比如： ① 网页自上而下的解析渲染，边解析边渲染，页面内CSS文件会阻塞渲染，异步CSS文件会导致回流 ② 浏览器在document下载结束会检测静态资源，新开线程下载（有并发上限），在带宽限制的条件下，无序并发会导致主资源速度下降，从而影响首屏渲染 ③ 浏览器缓存可用时会使用缓存资源，这个时候可以避免请求体的传输，对性能有极大提高 衡量性能的重要指标为首屏载入速度（指页面可以看见，不一定可交互），影响首屏的最大因素为请求，所以请求是页面真正的杀手，一般来说我们会做这些优化： 减少请求数 ① 合并样式、脚本文件 ② 合并背景图片 ③ CSS3图标、Icon Font 降低请求量 ① 开启GZip ② 优化静态资源，jQuery->Zepto、阉割IScroll、去除冗余代码 ③ 图片无损压缩 ④ 图片延迟加载 ⑤ 减少Cookie携带 很多时候，我们也会采用类似“时间换空间、空间换时间”的做法，比如： ① 缓存为王，对更新较缓慢的资源&接口做缓存（浏览器缓存

前端方面，EasyDSS流媒体服务器与EasyNVR有着根本的不同。EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的应该都知道它的好处。回归正题，组件的传值问题。 vue中对组件的定义： 组件 (Component) 是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情境下，组件也可表现为用 is 特性进行了扩展的原生 HTML 元素。 以EasyDSS前端为基础来实现传值： 父组件传给子组件 在子组件中使用 Prop 传递数据 props：监听父组件传过来的值，不监听，不会在子组件中使用（以对象形式来记录）； 上代码更直观： 父组件代码 <div class="video-window window3" id="3" @click="getAlt($event,3)" style="cursor:pointer"> <div class="message"> <i class="fa fa-history" aria-hidden="true"></i> 启动播放器 </div> <VideoJS :videoUrl="videoUrl3" live></VideoJS> /

16款优秀的Vue UI组件库推荐 源链接： https://www.cnblogs.com/zdz8207/p/vue-ui-framework.html Vue 是一个轻巧、高性能、可组件化的MVVM库，API简洁明了，上手快。从Vue推出以来，得到众多Web开发者的认可。 在公司的Web前端项目开发中，多个项目采用基于Vue的UI组件框架开发，并投入正式使用。 开发团队在使用Vue.js框架和UI组件库以后，开发效率大大提高，自己写的代码也少了，很多界面效果组件已经封装好了。 在选择Vue UI组件库的过程中，通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素，也收集整理了一些优秀的Vue UI组件库。 PS：国内的UI组件大部分都只有一部分的，常用的头部导航，底部导航，listview，grid表格很多都是没有的。 后面才发现，基于Vue的Quasar Framework 介绍 这个框架UI组件很全面，准备下次使用这个框架了 基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Framework https://github.com/quasarframework/quasar Quasar（发音为/kweɪ.zɑɹ/