前端组件

------ 学以致用、用以促学、学用相长 换到平台产品部后，我进了基础组件组，跟我的几个要好的同事一个组。基础组件组主要是维护一些公共的模块和组件，比如 rabbitmq ， mysql ， redis ， memcache ， tomcat ， ejabberd ， libevent 等等。这些我之前都没有接触过，一个个都是他们认识我，我不认识他们。所以刚开始的时候就一通乱学，老觉得时间不够用，经常加班，跟在终端产品部时的工作状态形成鲜明的对比。但是我喜欢这样的状态，这让我觉得充实，有劲。 我还没转过来之前，基础组件组就在预研一个新一代的网络管理系统。因为平台产品部正在做一个全新的 5.0 平台，所以需要一个全新的网络管理系统，来管理平台的所有服务器和接入平台的所有终端。我转过来没多久，这个网管系统就正式立项了，由基础组件组负责开发。新网管系统设计成 B/S 架构，分为数据收集模块，数据处理模块，数据存储模块和前端展示模块四大模块。因为这是基础组件组第一次从头开始做一个完整的项目，其他同事对界面处理这已块都不懂，然后就安排我做前端展示这一块。虽然我懂界面处理，可是我从来没有做过网页呀，没办法，只能从头开始学。所以那段时间我每天都泡在 w3cschool 这个网站上面，学习 html ， javascript ， css ， ajax 等等。 因为 rabbitmq ，

01-(了解)vuejs课程介绍.mp4 02-(理解)Vuejs的认识和特点介绍.mp4 03-(掌握)vuejs安装方式.mp4 04-(掌握)HelloVuejs的初体验.mp4 05-(掌握)Vue列表的展示.mp4 06-(掌握)小案例-计数器.mp4 07-(理解)Vue的mvvm.mp4 08-(理解)Vue的options选项.mp4 09-(理解)什么是Vue的生命周期.mp4 10-(理解)Vue的生命周期函数有哪些.mp4 11-(了解)定义vue的template.mp4 12-(掌握)插值操作-mustache语法.mp4 13-(掌握)插值操作-其他指令使用.mp4 14-(掌握)v-bind的基本使用.mp4 15-(掌握)v-bind动态绑定class(对象语法).mp4 16-(了解)v-bind动态绑定class(数组语法).mp4 17-(完成)v-bind和v-for结合的作业布置.mp4 18-(掌握)v-bind动态绑定style(对象语法).mp4 19-(了解)v-bind动态绑定style(数组语法).mp4 20-(掌握)计算属性的基本使用.mp4 21-(掌握)计算属性的复杂操作.mp4 22-(了解)课堂回顾.mp4 01-(理解)计算属性setter和getter.mp4 02-(掌握)计算属性和methods的对比.mp4

16款优秀的Vue UI组件库推荐 16款优秀的Vue UI组件库推荐 Vue 是一个轻巧、高性能、可组件化的MVVM库，API简洁明了，上手快。从Vue推出以来，得到众多Web开发者的认可。 在公司的Web前端项目开发中，多个项目采用基于Vue的UI组件框架开发，并投入正式使用。 开发团队在使用Vue.js框架和UI组件库以后，开发效率大大提高，自己写的代码也少了，很多界面效果组件已经封装好了。 在选择Vue UI组件库的过程中，通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素，也收集整理了一些优秀的Vue UI组件库。 PS：国内的UI组件大部分都只有一部分的，常用的头部导航，底部导航，listview，grid表格很多都是没有的。 后面才发现，基于Vue的Quasar Framework 介绍 这个框架UI组件很全面，准备下次使用这个框架了 基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Framework https://github.com/quasarframework/quasar Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建： 响应式网站 PWA

## 什么是路由 1. **后端路由：**对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 2. **前端路由：**对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现； 3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）； ## 在 vue 中使用 vue-router 1. 导入 vue-router 组件类库： ``` <!-- 1. 导入 vue-router 组件类库 --> <script src="./lib/vue-router-2.7.0.js"></script> ``` 2. 使用 router-link 组件来导航 ``` <!-- 2. 使用 router-link 组件来导航 --> <router-link to="/login">登录</router-link> <router-link to="/register">注册</router-link> ``` 3. 使用 router-view 组件来显示匹配到的组件 ``` <!-- 3. 使用 router-view 组件来显示匹配到的组件 --> <router-view

九. 路由 9.1 路由的介绍 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源 对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由） 9.2 路由的基本使用 ！！！ 第一步要导包 ！！！ 注意;vue-router.js 依赖于 vue.js 所以要注意顺序 <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-router-3.0.1.js" type="text/javascript" charset="utf-8"></script> html代码: <router-link to="/login" tag="button">登录</router-link> <router-link to="/register" tag="button">注册</router-link> <!-- vue-router 提供的占位符 显示相对应得组件 --> <router

React框架已经火了好长一段时间了，再不学就out了！ 对React还没有了解的同学可以看看我之前的一篇文章，可以快速简单的认识一下React。 React入门最好的实例－TodoList 自己从开始接触react一窍不通，到慢慢的似懂非懂，通过各种途径学习也有一阵了。学习过程中还会接触到很多新的东西，比如ES6、 webpack，过程艰辛谁人懂，见坑填坑慢慢来。今天把学习过程过滤了一下，只说项目实际需要用的东西，总结了一套能看到的东西，分享给大家，希望能让 读者少踩一些坑！ 本文看点 实际项目效果 ：最终你只需要在本地启一个服务，就能看到运行效果。 webpack的配置 ：项目实战中常用的插件和配置方法。 React用法 ：React在MVC（模型Model－视图View－控制器Controller）层面上主要扮演了视图的作用。我们可以学习它在项目中到底该如何使用。 React-router配置 ：单页面应用（SPA）离不开路由，我们可以学习在项目中React-router如何配置。 ES6语法 ：我们会用到一些在项目中常见的ES6语法。 antd的使用 ：蚂蚁金服出的一款基于React的框架，我们可以学习如何去使用。 项目效果 项目代码已经上传至github， 项目代码github地址 。大家把代码下载下来之后，跟随以下步骤即可在本地看到效果。 首先安装node环境。

什么是组件 ：组件的出现，就是为了拆分vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可; 组件化 和 模块化 的不同: 模块化： 是从代码逻辑的角度进行划分的;方便代码分层开发，保证每个功能模块的职能单一; 组件化： 是从UI界面的角度进行划分的;前端的组件化，方便UI组件的重用; 来源： https://www.cnblogs.com/TangXiaoHuiHui/p/12013443.html

目录 表的多对多关系的三种创建方式 查阅框架文档及百度案例: 全自动创建 纯手撸(了解) 半自动(推荐使用) forms组件简介 forms组件的作用 forms组件校验数据 forms组件渲染标签 forms组件渲染标签方式一 forms组件渲染标签方式二 form组件展示信息 forms组件自定义校验 正则校验 钩子函数 局部钩子: 校验单个字段 全局钩子: 校验多个字段 其他字段及参数 需要掌握 了解, 会copy即可 表的多对多关系的三种创建方式 查阅框架文档及百度案例: 基于人家已经写好的功能修改 先看配置参数 前期就是猜, 改几个参数看结果, 看猜的是否对 整体修改 全自动创建 class Books(models.Model): title = models.CharField(max_length=32) authors = models.ManyToManyField(to='Authors') class Authors(models.Model): name = models.CharField(max_length=32) 优点: 1. 不需要手动操作关系表, 全部由orm自动创建; 2. 并且内置了四个操作关系表的方法(add, remove, set, clear) 缺点: 自动创建的关系表无法扩展和修改字段 纯手撸(了解) class Books

实战篇 02：项目脚手架 本节参考代码： react-boilerplate 经过了刀耕火种的插件化时代，伴随着越来越繁荣的 npm 生态，近几年来前端开发的三大件 HTML、CSS 及 JavaScript 都发生了不同程度上的进化，这也让开发或选择一个合适的项目脚手架（boilerplate）成为了前端项目的第一个难点。在 React 生态中，虽然已经有了像 create-react-app 这样官方指定的脚手架项目，但为了深入理解一个前端脚手架所需要承担的责任与能够解决的问题，不妨让我们删繁就简一起来搭建一个只包含最少依赖的功能齐全的项目脚手架。 HTML 部分 在 JavaScript 框架接管了所有 DOM 相关的操作与更新后，HTML 方面的工作量就大量地减少了，很多时候只需要为框架提供一个可以注入 DOM 元素的根节点即可。 <!DOCTYPE html> < html > < head > < meta charset = " utf-8 " > </ head > < body > < div id = " app " > </ div > </ body > </ html > 为了让页面的缩放比例与当前用户设备的屏幕尺寸保持一致，我们可以在模板中添加 HTML5 新引入的 viewport 属性，这对于需要支持移动端的项目非常重要。 < meta name =

实战篇 02：项目脚手架 本节参考代码： react-boilerplate 经过了刀耕火种的插件化时代，伴随着越来越繁荣的 npm 生态，近几年来前端开发的三大件 HTML、CSS 及 JavaScript 都发生了不同程度上的进化，这也让开发或选择一个合适的项目脚手架（boilerplate）成为了前端项目的第一个难点。在 React 生态中，虽然已经有了像 create-react-app 这样官方指定的脚手架项目，但为了深入理解一个前端脚手架所需要承担的责任与能够解决的问题，不妨让我们删繁就简一起来搭建一个只包含最少依赖的功能齐全的项目脚手架。 HTML 部分 在 JavaScript 框架接管了所有 DOM 相关的操作与更新后，HTML 方面的工作量就大量地减少了，很多时候只需要为框架提供一个可以注入 DOM 元素的根节点即可。 <!DOCTYPE html> < html > < head > < meta charset = " utf-8 " > </ head > < body > < div id = " app " > </ div > </ body > </ html > 为了让页面的缩放比例与当前用户设备的屏幕尺寸保持一致，我们可以在模板中添加 HTML5 新引入的 viewport 属性，这对于需要支持移动端的项目非常重要。 < meta name =