前端组件 | 易学教程

React入门最好的学习实例－TodoList

阅读更多关于 React入门最好的学习实例－TodoList

前言 React 的核心思想是：封装组件，各个组件维护自己的状态和 UI，当状态变更，自动重新渲染整个组件。最近前端界闹的沸沸扬扬的技术当属 react 了，加上项目需要等等原因，自己也决定花些时间来好好认识下这个东西。然后花时间自己写了一个demo： react-todos ，你可以先点这里去看react-todo react首先值得拍手称赞的是它所有的开发都基于一个组件（component），组件和组件之间传递方法，而且每个组件都有一个状态（state），当方法改变了这个状态值时，整个组件就会重绘，从而达到刷新，另外，说到重绘就要提到虚拟dom 了，就是用js模拟dom结构，等整个组件的dom更新完毕，才渲染到页面，简单来说只更新了相比之前改变了的部分，而不是全部刷新，所以效率很高。项目初始化大家先新建一个项目文件夹，在里面建一个项目信息的文件 package.json : { "name": "react-todos", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC",

拒绝996，选对框架很关键！看这里。。。。。。

阅读更多关于拒绝996，选对框架很关键！看这里。。。。。。

近日，996工作制再起波澜，各番立场争论不休！作为程序猿，怎么解决996的烦恼？与其抱怨抵制，提高自身更来得实际。工欲善其事必先利其器，研发或选择一款好的开发平台尤为重要。一款老牌开源快速开发平台Jeecg-Boot，技术全新换代版本，非常值得大家参考学习。导读 ⊙平台首页UI升级，精美的首页支持多模式 ⊙提供4套代码生成器模板（支持单表、一对多） ⊙集成Excel简易工具类，支持单表、一对多导入导出 ⊙代码生成器，生成代码自带Excel导入导出，表单提供弹出风格和抽屉表单选择 ⊙系统权限大升级，支持按钮权限，数据权限（可控制不同人看不同数据） ⊙数据日志记录功能，可记录数据变更日志，对比版本功能 ⊙查询过滤器开发完成，根据页面配置自动生成查询条件，支持多种匹配规则 ⊙Online在线报表配置功能完成，在线输入sql生成数据报表 ⊙平台移动兼容优化，改造所有功能，支持移动自适应 ⊙消息中心开发完成（支持短信、邮件、微信推送等等，支持自己扩展） ⊙增加系统性能监控各种功能（Redis监控、Tomcat、jvm、服务器信息、请求追踪等） ⊙在线文档同步升级 ————你想要的，都来了！【此版本是JeecgBoot 初成长稳定版本，企业级应用基本功能已经全部完成（Excel导入导出、按钮权限、数据权限、代码生成器、查询过滤器、Online在线报表、系统监控、数据日志）

vue-router原理

阅读更多关于 vue-router原理

文章目录用hash、history实现单页面 hash history vue-router 三种模式 hash和history的区别 vue-router的实现其他问题 1、什么是单页应用，原理？ 2、单页面和多页面的区别？ 3、Vue-router有哪些钩子？使用场景？ 4、完整的路由导航解析流程 5、vue-router的三种跳转方式用hash、history实现单页面 hash hash原理：hash router 有一个明显的标志是url 中带有#，我们可以通过onhashchange监听url中的hash来进行路由跳转 # 后面的 fragment 发生改变时，页面不会重新请求，其他参数发生变化，都会引起页面的重新请求 Onhashchange事件触发条件：这是一个HTML 5新增的事件，当#值发生变化时，就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。直接更改浏览器地址，在最后面增加或改变#path；通过改变location.href或locaion.hash的值通过触发点击带锚点的连接浏览器前进后退可能导致hash的变化，前提是两个网页地址中的hash值不同（会留下一个历史记录）它的使用方法有三种： window.onhashchange = func; <body

Vue组件代码分块和懒加载

阅读更多关于 Vue组件代码分块和懒加载

前端开发中，随着业务和页面增加，以组件为基本单位的结构下，组件数量会增长极快，为了优化我们会很显然地想要进行一些工作：代码分块懒加载非必要资源文件非必要资源，指的首次渲染出某页面所不必要的资源，如因为用户操作才出现的图片、弹窗等。代码分块和懒加载在页面层面具有极大的优化作用，用户很可能只是浏览dashboard页面，可能根本就不会去看详情等页面，那我们就不必将详情页面的代码和dashboard页面代码混在一起，用户看某个页面时只加载那个页面对应的资源即可，可以较大地提升用户体验。本文就在Vue工程下如何在组件层面配置代码分块和懒加载进行讲解。本文在@vue/cli 3以上版本。懒加载组件一般来说，Vue中使用某组件过程大致如下： <script> // Home.vue import HelloWorld from '@/components/HelloWorld.vue' export default { components: { HelloWorld, }, } </script> 这是我们最熟悉的方式了，我们在访问 Home.vue 时，Webpack为我们保证了 HelloWorld.vue 一定是存在的，这是由依赖关系决定的（ Home.vue 依赖于 HelloWorld.vue ）。这很正常对吧，但是如果 HelloWorld.vue 是非必要资源呢

2020年，11种应该加入工具箱的顶级VueJS开发员工具

阅读更多关于 2020年，11种应该加入工具箱的顶级VueJS开发员工具

全文共 3283 字，预计学习时长 10 分钟图源：Unsplash 这次，小芯为大家安排上了11种顶级VueJS开发人员工具。 Vue JS最近越来越流行，这主要是因为它为人们学习和开发应用程序提供了便利。无论是想要使用Vue的经验丰富的开发人员还是新手，使用正确的工具都很有必要。这将有助于快速创建出色的应用程序，而不必做重复工作。在为本文列表选取工具时，小芯考虑了整个Vue JS开发周期。从为新应用程序设置样板文件开始，涵盖了许多重要的应用程序概念、调试甚至测试。非常值得一看，话不多说，我们速速开始~ 图源：Unsplash 1. Axios Axios是一种广受欢迎的第三方库，用于创建和管理ajax请求。将Vue曾经的“官方”ajax库“vue资源”从其存储库中分离出来之后，Vue团队的首选就是Axios。这提高了Axios的普及程度，使用人数也有所增加。出现此现象的理由很充分，虽然Axios不是Vue官方存储库的一部分，但它与自己的前身十分相似，而且具有通用性，支持取消功能，拥有TypeScript定义。使用Axios的一个好处是如果服务器本身不支持承诺，用户需要自行提供子脚本。 2. Vue Apollo GraphQL是一种利用API的多功能工具。它允许查询应用程序或功能所需的合适数据。VueApollo是一种将GraphQL用于Vue的最便捷方法。

Vue组件

阅读更多关于 Vue组件

定义Vue组件什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；组件化和模块化的不同：模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；全局组件定义的三种方式使用 Vue.extend 配合 Vue.component 方法： var login = Vue.extend({ template: '<h1>登录</h1>' }); Vue.component('login', login); 直接使用 Vue.component 方法： Vue.component('register', { template: '<h1>注册</h1>' }); 将模板字符串，定义到script标签种： <script id="tmpl" type="x-template"> <div><a href="#">登录</a> | <a href="#">注册</a></div> </script> 同时，需要使用 Vue.component 来定义组件： Vue.component('account', { template: '#tmpl' }); 注意：

django Form组件上传文件

阅读更多关于 django Form组件上传文件

上传文件　　注意：FORM表单提交文件要有一个参数 enctype="multipart/form-data" 普通上传： urls： url(r'^f1/',views.f1), url(r'^f2/',views.f2), views：　 def f1(request): if request.method == "GET": return render(request,'f1.html') else: import os #导入os模块 #request.get / post /FILES方式.get()取值去文件name=fafafa的值 file_obj=request.FILES.get("fafafa") #拿到一个文件对象 f=open(os.path.join('static',file_obj.name),'wb') #将文件名加入到static目录下 for chunk in file_obj.chunks(): #chunk块文件的大小,循环file_obj文件对象.chunks f.write(chunk)#写到文件里面去 f.close() # return HttpResponse(".....") return render(request,'f1.html') html：　　 <!DOCTYPE html> <html lang="en">

介绍React.memo, useMemo 和 useCallback

阅读更多关于介绍React.memo, useMemo 和 useCallback

什么是 React.memo ？ React.memo 和 React.PureComponent 类似， React.PureComponent 在类组件中使用，而 React.memo 在函数组件中使用看下面两个例子，有两个计数器组件，两个计数器的数据都来源于父组件，第一个计数器通过点击按钮数字会不断累加而发生改变，第二个计数器没有按钮控制数字改变。 const App = ( ) => { const [ count1 , setCount1 ] = React . useState ( 0 ) const [ count2 , setCount2 ] = React . useState ( 0 ) const increaseCounter1 = ( ) => { setCount1 ( count1 => count1 + 1 ) } return ( < > < button onClick = { increaseCounter1 } > Increase counter 1 < / button > < Counter value = { count1 } > Counter 1 < / Counter > < Counter value = { count2 } > Coutner 2 < / Counter > < / > ) } 计数器组件 const

Vue项目开发目录结构

最近做一些CI+Vue开发的简单项目，由于刚开始一直从事后端，对Vue了解不是很多，fork了团队的项目代码发现项目的文件夹很多，一时间有些懵，上网上参考了部分资料，博客园中的放晴的天空与狮子爱吃草两位的博客提供了很大的帮助，现将该部分知识做以下总结。下图为Vue项目文件夹：以下就项目文件夹中的各文件的作用进行介绍： ├── build/ # Webpack 配置目录 ├── dist/ # build 生成的生产环境下的项目 ├── config/ # Vue基本配置文件，可以设置监听端口，打包输出等 ├── node_modules/ # 依赖包，通常执行npm i会生成 ├── src/ # 源码目录（开发的项目文件都在此文件中写） │ ├── assets/ # 放置需要经由 Webpack 处理的静态文件，通常为样式类文件，如css，sass以及一些外部的js │ ├── components/ # 公共组件 │ ├── filters/ # 过滤器 │ ├── store/ 　　　　 # 状态管理 │ ├── routes/ # 路由，此处配置项目路由 │ ├── services/ # 服务（统一管理 XHR 请求） │ ├── utils/ # 工具类 │ ├── views/ # 路由页面组件 │ ├── App.vue # 根组件 │ ├──

react前端自动化测试： jest + enzyme

阅读更多关于 react前端自动化测试： jest + enzyme

1.背景本文中的自动化测试指的是单元测试（UT），所谓单元测试也就是对每个单元进行测试，通俗的将一般针对的是函数，类或单个组件，不涉及系统和集成。单元测试是软件测试的基础测试，主要是用来验证所测代码是否和程序员的期望一致。 jest 是 facebook 开源的，用来进行单元测试的框架，功能比较全面，测试、断言、覆盖率它都可以，另外还提供了快照功能。 2.安装与配置 2.1安装安装jest npm install --save-dev jest 安装babel-jest npm install --save-dev babel-jest 安装enzyme，需要根据项目的react版本来安装对应的enzyme npm install --save-dev enzyme enzyme-adapter-react-16 安装react-test-renderer npm install --save-dev react-test-renderer 2.2配置 package.json 中添加： { "scripts": { "test": "jest" } } 执行npm run test 命令可在终端运行查看测试运行结果。同时 Jest 还提供了生成测试覆盖率报告的命令，只需要添加上 --coverage 这个参数既可生成，再加上--colors可根据覆盖率生成不同颜色的报告

订阅前端组件