前端组件 | 易学教程

前端简历

阅读更多关于前端简历

简历的本质在写简历之前，我们必须清楚的了解一件事情，那就是简历是什么？它不是人生履历，不是项目清单，也不是技能大放送。简历的存在只有一个目的 —— 帮你约到面试。只要能达到这个目的，简历可以是一段视频，一个开源项目，一张照片，甚至是一行字，比如： I wrote javascript 当然，绝大部分简历的形式，就是我们所熟知的，是一篇文章。即使你通过其他方式获得了面试，当你入职的时候，还是要有这么一份纸质简历的，所以不要想着偷懒。其实简历不只是表现自己，更是传递以下三个信息，增强通过率。是什么（你能做什么？，擅长什么？）比别人好在哪些地方（相比其他同行，你的优势？）如果雇佣你，招聘方会得到什么好处（能不能为企业带来效益？）正如你抉择跳槽，思考要不要留在这个公司的时候，你也可能考虑下面三点待遇（给的钱够不够？福利好不好）环境（同事nice不？老板好不好？事少离家近？工作开心与否？是否帅哥美女多？嗯哼）个人（有晋升机会不？能否再进步？）当然企业和你的相互选择其实正如上面几点中的考量和博弈，当然面试是平等的，是相互选择的结果，所以有你对企业的考量，也有企业对你的考量回归到写简历，和很多人在大学写议论文写作文是不同的，过分的论证会显得自夸，反而容易引起反感，所以要点到为止。这里的技巧是，提供论据，把论点留给阅读简历的人自己去得出。放论据要具体，最基本的是要数字化

Vue组件

阅读更多关于 Vue组件

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

Vuejs

阅读更多关于 Vuejs

Vue开发去哪网App 用到的了Vue中的知识点 Axios –Ajax数据的获取 Vue Router –做多页面之间的路由 Vuex –各个组件之间的数据共享异步组件 —代码上线，性能更优 Stylus –编写前端的样式递归组件 –实现组件自身调用自己 slider 插件实现轮播图开始！ Hello Vue <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello Vue</title>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="./js/vue.js"></script> </head> <body> <div id="app1"> </div> <div id="app"> {{content}} </div> <script> var dom = document.getElementById('app1'); dom.innerHTML = "Hello Vue" setTimeout(function () { dom.innerHTML = 'Bye Vue' },2000) // 创建Vue实例 var

VC模式下javascript项目重构

阅读更多关于 VC模式下javascript项目重构

项目现状项目为单页web应用，只针对chrome浏览器，无开发文档。由于是追求进度的项目，开发约定极少，除了jquery、LAB.js、bootstrap以及一些UI组件外，没有使用其他开源组件。项目简单封装了 ajax请求 , form表单信息获取 , 缓存 , 获取和渲染模板函数以及一些UI组件，ajax请求没有按照restful api进行封装。现在项目开发中所遇到的问题：代码命名不规范，例如 action , do_action 代码结构不清晰，没有按照功能或mvc拆分成独立的文件，只能依靠dom去查找具体的业务代码在哪里模板写的有问题，复用模板使用id来做dom索引，或混入javascript业务逻辑，也有整个模板只包含一行代码工具类封装与引用不规范，主要是没有注释，没有规范的例子可做参照,导致出现错误的使用工具类业务逻辑的流转依靠dom操作，例如，在实现数据联动的时候，往往需要手动点击刷新按钮或者$(...).click()。模板渲染封装太薄，导致不同模块的模板渲染方法各异，且会渲染模板中的javascript代码无法对代码进行代码测试，只能依靠人工测试确保代码质量 css文件过大，基本上所有的css都集中在一个css文件下页面跳转策略是隐藏老页面，显示新页面。重构项目方案代码书写规范 css规范 : http://www.iteye.com

React Hooks的999999个好处

阅读更多关于 React Hooks的999999个好处

最近前几个月开始，新项目都开始完全使用typescript+hooks，先不说typescript吧，hooks是真的香🤣 1.更好的分离页面和逻辑，重用逻辑的方法现在前端项目的组件化，一般都是基于最基础的UI组件库（里面也有组件的功能逻辑），加上业务逻辑，封装一个个component，container。组件是 UI + 逻辑的复用，但逻辑复用能力等于 0。而在项目中，很难做到轻松的把 UI 和逻辑分开。(这里的逻辑并不是简单的能抽离的那种工具函数)。在此之前，React有Mixin（ES6Class就已经废弃了，不谈了），HOC，render props来抽离逻辑。 HOC HOC并不是react提供的api，而是基于react特性的一种模式，常见的例子就是大家常见的react-redux中的connect函数，antd的form.create函数，HOC是一个函数，参数接受一个组件，返回一个新组件 render props render props 我理解是平级组件之间单向依赖的一种模式，和HOC一样也不是什么react提供的api，也是一种模式，由React Trainning成员的一个大佬提出替代HOC的一种更好的模式。首先需要一个提供可变数据源的组件，然后给这个组件传入一个叫render函数的props(叫啥名字都行

【译】统一样式语言

阅读更多关于【译】统一样式语言

原文地址： A Unified Styling Language 原文作者：本文已获原作者 Mark Dalgleish 授权译文出自：掘金翻译计划译者： ZhangFe 校对者： JackGit , yifili09 , sunshine940326 , sunui 统一样式语言在过去几年中，我们见证了 CSS-in-JS 的兴起，尤其是在 React 社区。但它也饱含争议，很多人，尤其是那些已经精通 CSS 的人，对此持怀疑态度。 "为什么有人要在 JS 中写 CSS？这简直是一个可怕的想法！但愿他们学过 CSS !" 如果这是你听到 CSS-in-JS 时的反应，那么请阅读下去。我们来看看为什么在 JavaScript 中编写样式并不是一个可怕的想法，以及为什么我认为你应该长期关注这个快速发展的领域。相互误解的社区 React 社区经常被 CSS 社区误解，反之亦然。对我来说这很有趣，因为我同时混迹于这两个社区。我从九十年代后期开始学习 HTML，并且从基于表格布局的黑暗时代就开始专职于 CSS。受 CSS 禅意花园启发，我是最早一批将现有代码向语义化标签和层叠样式表迁移的开发者。不久后我开始痴迷于 HTML 和 JavaScript 的分离工作，在服务器渲染出来的页面中使用非侵入式 JavaScript 同客户端交互。围绕这些实践

ASP.NET Core MVC 视图

阅读更多关于 ASP.NET Core MVC 视图

原文: ASP.NET Core MVC 视图 ASP.NET Core MVC中视图的知识和ASP.NET MVC有很多相似之处，学习难度较低。以下内容主要体现了编程中模块化的思想，模块化才应是我们关注的重点。 Layout 布局用于提供各个页面所需的公共部分，如：菜单、页头、页尾等。在ASP.NET Core中默认的布局文件是位于/Views/Shared文件夹下的 _Layout.cshtml 文件： _Layout_Default_Location.jpg 我们通常在 _Layout.cshtml 中引入公共资源，如： <link href="~/css/reset.css" rel="stylesheet" /> <link href="~/css/index.css" rel="stylesheet" /> <script src="~/js/common/net/ajaxHandler.js"></script> <environment names="Development"> <script src="~/js/lib/vue/vue.js"></script> </environment> <environment names="Production"> <script src="~/js/lib/vue/vue.min.js"></script> <

前端框架vue.js系列（9）：Vue.extend、Vue.component与new Vue

阅读更多关于前端框架vue.js系列（9）：Vue.extend、Vue.component与new Vue

vue构造、vue组件和vue实例这三个是不同的概念，它们的关系有点类似于Java的继承概念：关系：vue构造->vue组件->vue实例也就是说不同的vue组件可以共用同一个vue构造，不同的vue实例可以共用同一个vue组件。在大型项目中，用过java开发的都知道，继承是非常重要的，前端也一样。我们先看看他们之间的实现代码区别： <script> //vue构造 Vue.extend({ props: [], data: function() { return {} }, template: "" }); //vue组件 Vue.component("mycomponent", { props: [], data: function() { return {} }, template: "" }); //vue实例 new Vue({ el: "", data: {} }); </script> 从上面的代码可以看出，vue构造和vue组件所需的部分初始化结构参数是一样的，这意味着vue实例可以直接跳过vue组件直接使用vue构造对自身组件初始化，也就是vue构造->vue实例，下面是三种API的区别： vue.extend 特点： 1.只能通过自身初始化结构使用范围： 1.挂载在某元素下 2.被Vue实例的components引用 3.Vue.component组件引用

VUEX

阅读更多关于 VUEX

文章目录 1.vue中各个组件之间传值 2.了解vuex中的各个js文件的用途 3. vuex使用步骤 1.安装vuex 2.在src目录下创建store模块，分别维护 3 在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块 4 在main.js中导入并使用store实例 4.vuex取值： 5.vuex存值 6.调用ajax 1.vue中各个组件之间传值 1.父子组件父组件–>子组件，通过子组件的自定义属性：props 子组件–>父组件，通过自定义事件：this.$emit(‘事件名’,参数1,参数2,…); 2.非父子组件或父子组件通过数据总数Bus，this.root.root.root.emit(‘事件名’,参数1,参数2,…) 3.非父子组件或父子组件更好的方式是在vue中使用vuex 方法1: 用组件之间通讯。这样写很麻烦，并且写着写着，估计自己都不知道这是啥了，很容易写晕。方法2: 我们定义全局变量。模块a的数据赋值给全局变量x。然后模块b获取x。这样我们就很容易获取到数据 2.了解vuex中的各个js文件的用途官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作 Vuex分成五个部分： 1.State

day 56 forms组件

阅读更多关于 day 56 forms组件

day 56 forms组件 01. forms组件作用渲染标签校验数据保留信息 02. 使用forms组件的前提提前写好一个类 from django import forms class MyForm(forms.Form): name = forms.CharField(label='用户名') pwd = forms.CharField(label='密码') 03. forms组件的使用校验数据 def register(request): forms_obj = MyForms() # 为get请求渲染前端页面用 if request.method == 'POST': forms_obj = MyForms(request.POST) # 将POST这个字典直接传给类 if forms_obj.is_valid(): # 判断是否符合校验规格 return HttpResponse('数据全部正确') return render(request, 'register.html', {'forms': forms_obj}) 向forms对象传入一个字典，key为字段名（可以多传，不能少传）判断是否符合is_valid 查看不符合要求的字段errors 如何查看符合校验规则的数据cleaned_data 渲染前端标签生成一个空的forms组件对象

订阅前端组件