前端组件

写文件上传时，在网上看过很多关于upload组件文章，今天我就总结下自己运用upload组件的心得。 最有力的说明就是代码了，上代码 1.运用iview upload组件上传文件（带token,带参数） 1.1. 前端vue代码 1.组件<div style="align-items:center;display:flex;justify-content:flex-start;"> 　　<Upload action="/myblog/mycontroller/mymethod" 　　:headers="{'Authorization':token}" 　　:data="fileData" 　　:before-upload="onBefore" style="margin-left: 5px;"> 　　<Button icon="ios-cloud-upload-outline"style="margin-top: 8px;" type="primary" size="large" >导入</Button> 　　<!--<span v-if="file !== null" style="color:green;">{{ file.name }}</span>--> 　　</Upload> </div>2.变量 data () { 　　return { 　　 file:null, 　　

本文梳理如何搭建和构建前端组件库. 了解几个问题 为何需要组件化？ 大部分项目起源都是源于业务方的各种各样的 奇葩 需求。随着公司的业务发展，公司内部开始衍生出很多的B2C系统、后台系统，前端部门也疲于应对越来越多同质化的项目，这些项目在很多基础模块层、源代码存在不小的相似，甚至存在相似的业务模块。 笔者曾经所在的一个电商团队，前端成员基本每个人多做过登录注册、购物车、支付、微信登录...... 大量重复的业务代码。由于组内技术没有强制规范 本质上相同的东西，重复的去code就显得浪费. 分析这些问题发现： 日渐增多的业务场景需求 前端资源有限，无法支持所有项目的快速迭代 公司内部诸多产品业务混乱、体验不统一 于是开发底层的工具去服务不同业务就很有必要： 设计一套公司内部的基础组件库支撑各个前端项目，提升项目和业务的可用性和一致性。 一个前端团队拥有大量的业务场景和业务代码，相似的页面和代码层出不穷，如何管理和抽象这些相似的代码和模块，绝大多数团队会遇到这样的问题。 不断的拷代码？ 修改代码？还是抽象成组件？显然后者更高效。所以在多项目存在高度的可控、底层依赖的情况下，前端实现组件库是最好的选择。 组件化，又或者组件抽离的目的是为了 功能 共享方便维护，其能够带来的好处是少写代码，统一管理、统一维护。一套基础组件代码千锤百炼精而又精，从而起到快速支撑业务迭代，提升开发效率的目的。

前言 虽然前端开发作为 GUI 开发的一种,但是存在其特殊性,前端的特殊性就在于“动态”二字，传统 GUI 开发，不管是桌面应用还是移动端应用都是需要预先下载的,只有先下载应用程序才会在本地操作系统运行,而前端不同,它是“动态增量”式的,我们的前端应用往往是实时加载执行的,并不需要预先下载,这就造成了一个问题,前端开发中往往最影响性能的不是什么计算或者渲染,而是加载速度,加载速度会直接影响用户体验和网站留存。 《Designing for Performance》 的作者 Lara Swanson 在2014年写过一篇文章 《Web性能即用户体验》 ，她在文中提到“网站页面的快速加载，能够建立用户对网站的信任，增加回访率，大部分的用户其实都期待页面能够在2秒内加载完成，而当超过3秒以后， 就会有接近40%的用户离开你的网站 ”。 值得一提的是,GUI 开发依然有一个共同的特殊之处,那就是 体验性能 ,体验性能并不指在绝对性能上的性能优化,而是回归用户体验这个根本目的,因为在 GUI 开发的领域,绝大多数情况下追求绝对意义上的性能是没有意义的. 比如一个动画本来就已经有 60 帧了,你通过一个吊炸天的算法优化到了 120 帧,这对于你的 KPI 毫无用处,因为这个优化本身没有意义,因为除了少数特异功能的异人,没有人能分得清 60 帧和 120 帧的区别,这对于用户的体验没有任何提升

目录 归纳总结 vue中组件的用法： 如何运行vue项目（维护他人的项目） 前期学习 一、生命周期函数（11个） 二、模板语法： 三、计算属性，方法和侦听器 1.计算属性computed（有缓存机制） 2.方法实现： 3.watch侦听器实现 四、计算属性的setter和getter 1.getter 2.setter 五、VUE的样式绑定 六、VUE中的条件渲染 1.v-if 和 v-show 的区别? 2. v-if和 v-else-if 和 v-else？ 3.key值的应用 七、VUE的列表渲染 1.key值 2.数组方法 3.template的妙用 4.对象的形式遍历key 5.set 八、组件使用细节 1.is属性 2.ref的使用 九、父子组件的数据传递 1.父组件向子组件传值 2.子组件向父组件传值 十、组件参数效验与非props特性 1.组件参数效验 2.props特性和非props特性 十一、给组件绑定原生事件(.native) 十二、非父子组件间的传值 十三、VUE中使用插槽 1.父组件通过插槽可以更方便的向子组件插入dom元素 2.父组件中有传递那么即使 中定义了元素仍然不起作用只用父组件传递的，没有才用自己的 3.具名插槽 4.VUE中的作用域插槽 十四、动态组件与v-once指令 1.通过点击btn实现互相展示隐藏 2.动态组件 3.v

Vue项目环境搭建 """ node ~~ python：node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip：npm是一个终端应用商城，可以换国内源cnpm vue ~~ django：vue是用来搭建vue前端项目的 1) 安装node 官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm install -g cnpm --registry=https://registry.npm.taobao.org 3) 安装vue项目脚手架 >: cnpm install -g @vue/cli 注：2或3终端安装失败时，可以清空 npm缓存 再重复执行失败的步骤 npm cache clean --force """ Vue项目创建 1) 进入存放项目的目录 >: cd *** 2) 创建项目 >: vue create 项目名 3) 项目初始化 pycharm配置并启动vue项目 1) 用pycharm打开vue项目 2) 添加配置npm启动 vue项目目录结构分析 ├── v-proj | ├── node_modules // 当前项目所有依赖，一般不可以移植给其他电脑环境 | ├── public | | ├── favicon.ico // 标签图标 | | └── index.html

SpringMVC的工作原理图： SpringMVC流程 1、 用户发送请求至前端控制器DispatcherServlet。 2、 DispatcherServlet收到请求调用HandlerMapping处理器映射器。 3、 处理器映射器找到具体的处理器(可以根据xml配置、注解进行查找)，生成处理器对象及处理器拦截器(如果有则生成)一并返回给DispatcherServlet。 4、 DispatcherServlet调用HandlerAdapter处理器适配器。 5、 HandlerAdapter经过适配调用具体的处理器(Controller，也叫后端控制器)。 6、 Controller执行完成返回ModelAndView。 7、 HandlerAdapter将controller执行结果ModelAndView返回给DispatcherServlet。 8、 DispatcherServlet将ModelAndView传给ViewReslover视图解析器。 9、 ViewReslover解析后返回具体View。 10、DispatcherServlet根据View进行渲染视图（即将模型数据填充至视图中）。 11、 DispatcherServlet响应用户。 组件说明： 以下组件通常使用框架提供实现： DispatcherServlet：作为前端控制器

一、Vue Router 的使用 JavaScript: 1.创建组件：创建单页面应用需要渲染的组件 2.创建路由：创建VueRouter实例 3.映射路由：调用VueRouter实例的map方法 4.启动路由：调用VueRouter实例的start方法 HTML: 1.使用v-link指令 2.使用<router-view>标签 router.redirect: 1.应用在首次运行时右侧是一片空白，应用通常都会有一个首页，例如：Home页。 2.使用router.redirect方法将根路径重定向到/home路径： router.redirect({'/': '/home'}) router.redirect 方法用于为路由器定义全局的重定向规则，全局的重定向会 在匹配当前路径之前执行。 执行过程: 当用户点击v-link指令元素时，我们可以大致猜想一下这中间发生了什么事情： 1.vue-router首先会去查找v-link指令的路由映射 2.然后根据路由映射找到匹配的组件 3.最后将组件渲染到<router-view>标签 1. 引入Vue和Vue-Router插件 <script src="vue.js"></script> <script src="vue-router.js"></script> 2. HTML <div id="box"> </div> <!--定义模版

2.SpringMVC介绍 2.1.SpringMVC是什么 SpringMVC是Spring组织下的一个表现层框架。和Struts2一样。它是Spring框架组织下的一部分。我们可以从Spring的整体结构中看得出来： 2.2.SpringMVC的作用 1.接收Web请求中的参数 2.把处理好的数据返回给页面 2.3.为什么要学习SpringMVC 技术是要更新换代的，可以说Springmvc是对Struts2的技术更新，Struts2太老了，许多设计已经过时，效率不符合现在业务（互联网）的需要，而且SpringMVC与Spring是一家的它们之间的衔接是无缝的，所以使用SpringMVC更方便和Spring进行整合。 更重要的一点是Struts2存在安全漏洞，之前的某些版本曾经造成过一些企业的损失，这也加速了Struts2的迅速老去。 那为什么之前还要学习Struts2呢？是因为今后工作中不一定都是从事新的系统开发，你有可能去维护一个已经上线的老系统，比如许多传统行业里面应用的系统Struts2的使用率仍然不小，因此从学习的角度Struts2也要学习掌握。 2.4.了解SpringMVC的处理流程 要想引入SpringMVC做表现层开发，最基本的需要完成两件事： 1. 配置好前端控制器DispatcherServlet。 2.

一.Vue项目环境搭建 “ node~~~python:node是用c++编写来运行js代码的 npm(cnpm)~~~pip:npm是一个终端应用商城，可以换国内源cnpm vue~~~django:vue是用来搭建vue前端项目的 1) 安装node 官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm install -g cnpm --registry=https://registry.npm.taobao.org 3) 安装vue项目脚手架 >: cnpm install -g @vue/cli 注：2或3终端安装失败时，可以清空 npm缓存 再重复执行失败的步骤 npm cache clean --force ” 二.Vue项目创建 1) 进入存放项目的目录 >: cd *** 2) 创建项目 >: vue create 项目名 3) 项目初始化 三.pycharm配置并启动vue项目 1) 用pycharm打开vue项目 2) 添加配置npm启动 四.vue项目目录结构分析 ├── v-proj | ├── node_modules // 当前项目所有依赖，一般不可以移植给其他电脑环境 | ├── public | | ├── favicon.ico // 标签图标 | | └── index.html

一：Element 　　element ui框架的按钮组件，这款由饿了么前端开源的UI框架，一经面世，就收获大量程序员的芳心。在github 上更是高达29.8k的star早已说明一切。用于开发PC端的页面还是绰绰有余的。如果说你是用vue开发者，却没用过element UI，那你肯定不是合格的vue开发者。 　　文档地址： http://element-ui.cn 二：iview 　　iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发，支持 ES2015 高质量、功能丰富 友好的 API ，自由灵活地使用空间，由TalkingData开发维护，有很多知名互联网企业都在使用。 　　官网地址： https://www.iviewui.com/ 三：vuetify 　　Vuetifyjs 根据材料设计规格提供 UI 布局。 V 1.0 Alpha 版本提供了超过 80个 reusbale 组件，其中包含一个易于记忆的语义设计，它基于名称简单明了 type-as-you 的类型属性。在GitHub 上有超过 7K 的 star。 　　官网地址： https://vuetifyjs.com/zh-Hans/ 四：vue-strap 　　基于 Vue.js