前端组件 | 易学教程

小程序第三方框架对比 ( wepy / mpvue / taro )

阅读更多关于小程序第三方框架对比 ( wepy / mpvue / taro )

众所周知如今市面上端的形态多种多样，手机Web、ReactNative、微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。但面对目前市面上成熟的小程序第三方框架如何针对自己的需求进行选择也是一个麻烦事,本文针对当前市面上的三大转译框架进行一个综合对比,希望能对大家的技术选择有所帮助,如有哪里不妥的地方希望指正; 　小程序开发有哪些痛点? 频繁调用 setData及 setData过程中页面跳闪组件化支持能力太弱(几乎没有) 不能使用 less、scss 等预编译器 request 并发次数限制　为什么使用第三方框架? 只要熟悉vue或react即可快速上手,学习成本低一套代码可在多端编译运行(微信,支付宝,h5,RN) 支付宝小程序暂不完善组件化开发，完美解决组件隔离，组件嵌套，组件通信等问题支持使用第三方 npm 资源使小程序可支持 Promise，解决回调烦恼可使用 Generator Fu-nction / Class / Async Function 等特性，提升开发效率对小程序本身的优化，如生命周期的补充，性能的优化等等支持样式编译器: Scss/Less，模板编译器，代码编译器：Babel

vue 父子component生命周期

阅读更多关于 vue 父子component生命周期

如今前端框架都流行组件化，页面元素都可以使用组件进行高度概括，那么处理组件之间的关系就如同处理页面架构一样重要。正确理解组件之间的关系，才能让代码按照我们与预料方式工作。最近参与了一个Vue.js的项目，在处理父子嵌套组件之间关系时遇到了较大的阻力，虽然问题最后解决了，但是以花费大量时间为代价的，记录在这里，希望下次不踩同样的坑，能更高效的处理此类问题。 0 问题描述同react，vue组件也有一套完整的生命周期，不同阶段有不同的分工。总体来讲经常会用的生命周期钩子有以下几种： created mounted destroy 通常会在这些钩子中处理一些异步请求，最常见的就是发起网络请求调用api获取数据。这里有个问题：在单一组件中，钩子的执行顺序是 created -> mounted -> destroyed ，但当父子组件嵌套时，父组件和子组件各拥有各自独立的钩子函数，这些父子组件的这些钩子是如何交融执行，且执行顺序又是怎样的呢? 最近开发中遇到的一个“诡异”的问题，就是由于对父子组件生命周期钩子执行顺序理解不透彻引起的。问题是这样的：有一个组件有由一系列子组件组成，子组件又被分解成组件，这样下来就构成了三级组件。需求是在组件显示在页面上之后，再将数据初始化进行回显。父组件获取数据后传递到子组件，要求子组件根据这个值将内部元数据进行过滤和加工

记一个复杂组件（Filter）的从设计到开发

阅读更多关于记一个复杂组件（Filter）的从设计到开发

此文前端框架使用 rax ，全篇代码暂未开源（待开源）原文链接地址： Nealyang/PersonalBlog 前言貌似在面试中，你如果设计一个 react/vue 组件，貌似已经是司空见惯的问题了。本文不是理论片，更多的是自己的一步步思考和实践。文中会有很多笔者的思考过程，欢迎评论区多多交流和讨论。从需求讨论、技术方案探讨到编码、到最终的测试，经历过了很多次的脑暴，也遇到过非常多的坑，其中有可能跟业务有关、也有可能跟框架有关，基于这些坑，又讨论了很多解决方案和非常 hack（歪门邪道）的对策。但是随着时间的推移，再回头看看当时的 hack 代码，很多都不太记得为什么这么写了，所以这里简单记录下，Filter 组件的开发过程。以便后面查询，更希望能大家一起探讨，以求得更优质的代码架构和实现思路。由于代码编写使用基于底层 weex 的 rax 框架，所以有些坑，或许对于正在使用 react 或者 vue 的你并不会遇到，可以直接忽略说说业务 Filter，已经常见的不可再常见的组件了，顾名思义，就是个筛选过滤器。我们先看看现有 app 上的一些 filter 展现形式。既然做组件，我们就需要它足够的通用，足够的易于扩展。阿里拍卖的 Filter 飞猪的 Filter 在说 Filter 的业务特征之前，我们先约束下每一部分的命名，以便于你更好的阅读此文：

30分钟精通React Hooks

阅读更多关于 30分钟精通React Hooks

你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？ ——拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗？ ——拥有了Hooks，生命周期钩子函数可以先丢一边了。你在还在为组件中的this指向而晕头转向吗？ ——既然Class都丢掉了，哪里还有this？你的人生第一次不再需要面对this。这样看来，说React Hooks是今年最劲爆的新特性真的毫不夸张。如果你也对react感兴趣，或者正在使用react进行项目开发，答应我，请一定抽出至少30分钟的时间来阅读本文好吗？一个最简单的Hooks 首先让我们看一下一个简单的有状态组件： class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> <

Vue.js-组件化前端开发新思路

阅读更多关于 Vue.js-组件化前端开发新思路

Vue.js-组件化前端开发新思路 12017.04.14 18:31:25字数 6228阅读 5632 本文章是我最近在公司的一场内部分享的内容。我有个习惯就是每次分享都会先将要分享的内容写成文章。所以这个文集也是用来放这些文章的，顺便也当图床用。 1. 认识Vue.js Vue.js（读音 /vjuː/，类似于view）是一套构建用户界面的渐进式框架。如果你有react或者Angular开发经验，你肯定不会对Vue.js感到太过陌生。Vue.js是踩在Angular和React肩膀上的后来者，它充分吸收了二者的优点，是MVVM框架的集大成者。我们只需要花10分钟写一点代码，就能大概窥见Vue的本质。 1.1 数据绑定所有的MVVM框架要解决的第一件事都是数据绑定。首先要将Model的变化渲染到View中，当有用户输入还需要把用户的修改反映到Model中。所谓的MVVM就是这么来的。 <!DOCTYPE html> <html> <head> <title>Hello Vue</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> </body> <script> var app = new Vue(

给定制的vuejs组件添加v-model双向绑定支持

阅读更多关于给定制的vuejs组件添加v-model双向绑定支持

用过vuejs的前端工程师，对于v-model一定印象深刻。它向类似textarea,input等原生html原生添加双向数据绑定的能力非常方便。但是对于你的定制vue组件并不是能够直接应用v-model的，我们需要做一些额外的工作，但是这个额外工作是非常简单的。为了理解如何给你的组件提供v-momeiydel支持，你应该深入地了解v-model本身底层是如何工作地。v-model初看起来就像是一个魔术，但是真的没有那么神秘。 v-model="syncedProp" 等价于以下代码 :value="syncedProp" @input="syncedProp=$arguments[0] 或者 :value="syncedProp" @input="syncedProp=$event.target.value 理解了以上地两点，那么如果需要支持v-model，你自己的组件需要做的就是: 1. 接收一个:value的property 2. 当用户变更value值的时候发送一个@input事件基础实现: 我们假设我们有一个date picker的组件，该组件接收year,month的value:{month:1,year:2019},我们希望该组件有两个输入Inputs,一个用于month,一个用于year,并且通过v-model来更新绑定的对象.这里是实现的例子代码:

Django form组件

阅读更多关于 Django form组件

forms组件前戏手动实现一个注册功能用户名不能含有'haha',密码不能小于3位数  <form action="" method="post"> <p>username:<input type="text" name="username"> <span>{{ errors.username }}</span></p>  <p>password:<input type="text" name="password"> <span>{{ errors.password }}</span></p> <input type="submit"> </form> # 后端 def login(request): # 定义一个报错信息字典,用于前端span标签错误提示 errors = {'username':'', 'password':''} if request.method == 'POST': # 获取到用户名合密码 username = request.POST.get('username') password = request.POST.get('password') # 判断用户名和密码规则 if 'haha' in username: errors['username'] = '用户名不规范' if len

django框架 day08

阅读更多关于 django框架 day08

今日内容： 1.多对多三种创建方式 2.forms组件 3.钩子函数 4.forms组件其他字段及操作方式 5.cookie和session 1.多对多三种创建方式第一种：全自动（推荐使用）优势：不需要你手动创建第三张表不足: 由于第三张表不是你手动创建的，也就意味着第三张表字段是固定的无法做扩展。示例： class Book(models.Model): title = models.CharField(max_length=32) price = models.DecimalField(max_digits=8,decimal_places=2) authors = models.ManyToManyField(to='Author') class Author(models.Model): name = models.CharField(max_length=32) 第二种：纯手动（这种了解就可以了）自己创建第三张表。优势：第三张可以任意的扩展字段不足：orm查询不方便，因为正向查询的时候是依靠字段的，这个时候俩边都没有字段。 class Book(models.Model): 　　title = models.CharField(max_length=32) 　　price = models.DecimalField(max_digits=8,decimal

前端面试题汇总大全（含答案）-- 持续更新

阅读更多关于前端面试题汇总大全（含答案）-- 持续更新

目录一、HTML 篇 1. 简述一下你对 HTML 语义化的理解？ 2. 标签上 title 与 alt 属性的区别是什么？ 3. iframe的优缺点？ 4. href 与 src？二、CSS 篇 1. 介绍一下 CSS 的盒子模型？ 2. css 选择器优先级？ 3. 垂直居中几种方式？ 4. 简明说一下 CSS link 与 @import 的区别和用法？ 5. rgba和opacity的透明效果有什么不同？ 6. display:none和visibility:hidden的区别？ 7. position的值， relative和absolute分别是相对于谁进行定位的？三、HTML / CSS 混合篇 1. HTML5、CSS3 里面都新增了那些新特性？ 2. BFC 是什么？ 3. 常见兼容性问题？四、JS 篇 1. JS 数据类型 ? 2. 判断一个值是什么类型有哪些方法？ 3. null 和 undefined 的区别？ 4. 怎么判断一个变量arr的话是否为数组（此题用 typeof 不行）？ 5. “ ===”、“ ==”的区别？ 6. “eval是做什么的？ 7. 箭头函数有哪些特点？ 8. var、let、const 区别？ 9. new操作符具体干了什么呢？ 10. JSON 的了解？ 11. documen.write 和 innerHTML

Vue2.0+组件库总结

阅读更多关于 Vue2.0+组件库总结

UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 eme - 优雅的Markdown编辑器 vue-multiselect - Vue.js选择框解决方案 vue-table - 简化数据表格 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 vue-blu - 帮助你轻松创建web应用 vueAdmin - 基于vuejs2和element的简单的管理员模板 vue-syntax-highlight -

订阅前端组件