前端组件 | 易学教程

【前端知识体系-JS相关】组件化和React

阅读更多关于【前端知识体系-JS相关】组件化和React

1. 说一下使用jQuery和使用框架的区别？数据和视图的分离，（jQuery数据和视图混在一起，代码耦合）-------开放封闭原则以数据驱动视图（只关注数据变化，DOM操作被封装） 2.说一下对MVVM的理解？先说MVC：Model, View, Controller（主要用于后端） MVVM: Model, View, ViewModel[中间连接者，连接view和和model] 关于ViewModel 2.2.1 MVVM在React中对应关系 1） M(odel)：对应组件的方法或生命周期函数中实现的业务逻辑和this.state中保存的本地数据，如果React集成了redux +react-redux，那么组件中的业务逻辑和本地数据可以完全被解耦出来单独存放当做M层，如业务逻辑放在Reducer和Action中。 2） V(iew)-M(odel)：对应组件中的JSX，它实质上是Virtual DOM的语法糖。React负责维护 Virtual DOM以及对其进行diff运算，而React-dom 会把Virtual DOM渲染成浏览器中的真实DOM 3） View：对应框架在浏览器中基于虚拟DOM生成的真实DOM（并不需要我们自己书写）以及我们书写的CSS 4）绑定器：对应JSX中的命令以及绑定的数据，如className={ this.props.xxx }、

Vue咖啡app项目总结

阅读更多关于 Vue咖啡app项目总结

一、构建 Vue有自己的脚手架构建工具vue-cli,使用起来非常方便，使用webpack来集成各种开发便捷工具，比如： Hot-reload Vue的热更新，修改代码之后无需手动刷新网页，对前端开发来说非常方便 PostCss，再也不用去管兼容性的问题了，只针对chrome这样的现代浏览器写css代码，会自动编译生成兼容多款浏览器的css代码 ESlint，统一代码风格，规避低级错误，对于有代码洁癖的人来说是不可或缺的 Bable，ES2015出来已经有一段时间了，但是不少浏览器还没有兼容ES6，有了bable，放心使用ES6语法，它会自动转义成ES5语法 SCSS，一款 CSS预处理器，编译后成正常的CSS文件。为CSS增加一些编程的特性 … 除此之外，vue-cli已经使用node配置了一套本地服务器和安装命令等，本地运行和打包只需要一个命令就可以搞定，非常的方便二、实现功能 Goods、Ratings、Seller 组件视图均可上下滚动商品页点击左侧menu，右侧list对应跳转到相应位置点击list查看商品详情页，父子组件的通信评论内容可以筛选查看购物车组件，包括添加删除商品及动效，购物控件与购物车组件之间为兄弟组件通信，点击购物车图标，展示已选择的商品列表商家实景图片可以左右滑动 loaclStorage 缓存商家信息（id、name）三、组件关系 ├─

ReactJS中的自定义组件

阅读更多关于 ReactJS中的自定义组件

可控自定义组件： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/react.js"></script> <script src="js/react-dom.js"></script> <script src="js/browser.min.js"></script> </head> <body> <script type="text/babel"> var Radio=React.createClass({ getInitialState:function(){ return { value:this.props.defaultValue }; }, handleChange:function(event){ if(this.props.onChange){ this.props.onChange(event); } this.setState({ value:event.target.value }); }, render:function(){ var children=[]; var value=this.props.value||this.state.value; React.Children.forEach(this.props.children

微软工作日记 11/20/19

阅读更多关于微软工作日记 11/20/19

班车上，写点日记。来微软将近三个月了，不愧是传说中的养老公司，比在亚麻工作的时候轻松多了。人一轻松下来，心情就开心，心情开心了，就有动力学习。在这里，我终于开启了我的前端开发生涯。周围的人很少有喜欢前端开发的，独独我是个例外，喜欢慢慢调试各种组件直至完美。就像我玩模拟人生，每次总要花大把时间来调试头发脸型衣服鞋子身材等等。有点遗憾的是，大部组件是不用开发的，因为常用的基本组件都是标准化的，由组件小组专门管理和发布，其他组用的时候直接往里面填充数据就行。不过千里之行，始于足下，先把简单的除组件之外的工作做好，才能一步步深入复杂的。我的Mentor是个印度小哥，特别认真负责。我呢，新来的，时不时会写个bug, 但是小哥都很耐心地告诉我怎么纠正，怎么调试，怎么发布。小哥没事的时候喜欢唠唠嗑，开开玩笑，可能是有女儿的缘故，所以很有耐心，我发的PR他都会及时看和订正。有了这个mentor, 感觉真是太爽了。今天就发现了一个bug, 是我上上周写的，已经发布到生产环境了。这个功能其实是被间接影响到的，我将一个变量由string改为observable 类型，但是有一处使用没有修改，导致赋值失败，值为空，测试的时候也没有发现这个问题。mentor发现后通知我，因为影响到客户使用，所以要及时地把修复发布出去。从发现问题，寻找解决方案，到修复，再到批准发布，兜兜转转有两个小时

Vue常用开源项目汇总

阅读更多关于 Vue常用开源项目汇总

Vue常用开源项目汇总前言：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。易用（已经会了HTML,CSS,JavaScript 即可轻松上手）、灵活（简单小巧的核心，渐进式技术栈，足以应付任何规模的应用）、性能（17kb min+gzip 运行大小、超快虚拟DOM、最省心的优化）、渐进式JavaScript 框架。 Vue相关网站参考：　　Vue中文网站： http://cn.vuejs.org/ 　　Vue github开源地址： https://github.com/vuejs/vue 　　Vue.js专业中文社区： http://www.vue-js.com/ 　　前端开发Vue相关： http://www.opendigg.com/tags/front-vue vue ui组件 element ★9305 - 饿了么出品的Vue2的web UI工具套件 Vux ★6802 - 基于Vue和WeUI的组件库

vue基础知识总结

阅读更多关于 vue基础知识总结

vue 是渐进式前端js框架有以下的特点：　　1.适合做前端分离的项目　　2.Angular指令优势　　3.react组件优势 vue语言特点：　　1.简单-入门容易　　2.中文文档齐全　　3.生态发达（插件多）文本渲染指令：　　v-text 　　{{}} 　　可以解析html字符串表单绑定指令：v-model 属性绑定：　　v-bind ：属性名="属性值" 　　v-bind：title="msg" 　　:title="msg" 事件绑定：　　v-on：事件名="时间处理函数" 　　v-on：click = "showMsg" 　　v-on:click="showMsg()" 事件处理函数：methods：{showMsg();} 如果响应函数带括号默认不带$event事件参数如果响应函数不带括号默认不会带$event事件参数如果带括号($event)手动指定事件参数事件绑定的简写 @click="showMsg" 事件按键修饰符 .enter .esc 事件名： @keyup @click @dblclick双击 @blur空间失去焦点条件渲染 v-if ="表达式" 当表达式为真的时候显示　　　　为假的时候隐藏　　　　v-else　　　　　　v-show="表达式" v-show 通过css方式隐藏　　　　v-if

React入门知识点清单

阅读更多关于 React入门知识点清单

做前端的一定都知道现在是三大框架——Vue、React、Angular三足鼎立的时代。Vue是公认的最容易入门的，因为它文件结构上有传统的HTML的影子，让刚接触它的前端人员刚到很“亲切”。Angular虽然也有保留HTML，但它却是最难入门的，究其原因可能和他是由Google的后端程序员开发的，又是用的纯Typescript，异步使用Rxjs，对于前端新人来说门槛太高。React入门难度适中，网上各种言论说React上手比Vue难，可能难就难在不能深刻理解JSX，或者对ES6的一些特性理解得不够深刻，导致觉得有些点难以理解，然后说React比较难上手。今天就来整理一些React入门需要掌握哪些知识点。为什么要引入 React 在写 React 的时候，你可能会写类似这样的代码： import React from 'react' function A() { // ...other code return <h1>前端桃园</h1> } 你肯定疑惑过，上面的代码都没有用到 React，为什么要引入 React 呢？如果你把 import React from 'react' 删掉，还会报下面这样的错误：那么究竟是哪里用到了这个 React，导致我们引入 React 会报错呢，不懂这个原因，那么就是 JSX 没有搞得太明白。你可以讲上面的代码(忽略导入语句)放到在线

Vue总结

阅读更多关于 Vue总结

1 Vue 前端集成框架用于分离项目前端内容，实现前后端分离，有独立服务器？在哪？服务器or客户端？ 2 算法 3 单页面实现渐进式控制类似编程语言中的解释型语言 4 知识 5 单页面应用组件化开发 6 Django项目分为： 7 前后台不分离项目： 8 1）后台渲染页面：模板语音 {{}} {%%} 9 2）csrf-token => form post 请求 10 3）render、HTTPResponse、redirect => JSONResponse 11 4）ajax => 页面的局部刷新 12 13 前后台分离项目： 14 1）前台页面自己渲染 - 自己搭建运行的服务器 15 2）ajax完成数据请求 16 3）drf - django rest framework - restful - 接口 17 4）vue - 数据驱动 18 DOM驱动 19 JQ：内容样式事件操作：选择器获取标签、设置钩子（事件）、内容样式操作 20 数据驱动 21 Vue 22 cbv 23 fbv 24 MVVM设计模式 model view 把control分为VC和MC 25 Vue优点 26 1）单页面 - 硬件要求低 27 2）组件化开发 28 3）数据驱动 29 4）数据的双向绑定 30 5）虚拟DOM（内存DOM，效率高） 31 6）轻量级 32 new Vue(

VUE组件汇总

阅读更多关于 VUE组件汇总

内容 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★3705 - 三端样式一致的响应式 UI 库 vue-material ★3328 - 通过Vue Material和Vue 2建立精美的app应用 vuetify ★2925 - 为移动而生的Vue JS 2组件框架 Keen-UI ★2749 - 轻量级的基本UI组件合集 vonic ★1913 - 快速构建移动端单页应用 vue-multiselect ★1539 - Vue.js选择框解决方案 eme ★1529 - 优雅的Markdown编辑器 vueAdmin ★1455 - 基于vuejs2和element的简单的管理员模板 bootstrap-vue ★1267 - 应用于Vuejs2的Twitter的Bootstrap 4组件 Vue.Draggable ★1191 - 实现拖放和视图模型数组同步 eagle.js ★1128 - hacker的幻灯片演示框架 vue-awesome-swiper ★1012

vue开源项目库汇总

阅读更多关于 vue开源项目库汇总

来源： github.com Vue.js开源项目速查表： https://www.ctolib.com/cheatsheets-vuejs.html UI组件 element ★12468 - 饿了么出品的Vue2的web UI工具套件 Vux ★7759 - 基于Vue和WeUI的组件库 iview ★6121 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5827 - Vue 2的移动UI元素 vue-material ★2997 - 通过Vue Material和Vue 2建立精美的app应用 muse-ui ★2814 - 三端样式一致的响应式 UI 库 Keen-UI ★2670 - 轻量级的基本UI组件合集 vuetify ★2512 - 为移动而生的Vue JS 2组件框架 vonic ★1800 - 快速构建移动端单页应用 eme ★1496 - 优雅的Markdown编辑器 vue-multiselect ★1437 - Vue.js选择框解决方案 vueAdmin ★1206 - 基于vuejs2和element的简单的管理员模板 eagle.js ★1070 - hacker的幻灯片演示框架 bootstrap-vue ★1020 - 应用于Vuejs2的Twitter的Bootstrap 4组件 Vue.Draggable ★960 -

订阅前端组件