前端组件

分页组件几乎是一般网站都会涉及到的组件，网上有很多这样的插件，自己挑来跳去选择了这一款。 官方Demo网址： http://mricle.com/JqueryPagination 功能强大，可扩展性比较强，而且幕后的工程师一直在完善这个插件，不废话了，上干货。 （模拟场景:商店网站，根据用户选择的查询条件，来查询数据库，并展示到前台） 1.JSP页面 如果你的web项目前台是基于bootstrap,js只需要引入2个js： <script path="/style/js/JqueryPagination/jquery.pagination-1.2.4.js" /> <script path="/style/js/JqueryPagination/jquery.pagination-1.2.4.min.js" /> 引入一个css: <style path="/style/css/jquery.pagination.css" /> 页面元素： <div id="myPage" class="m-pagination"></div> 2.JS 控制 a.组织要查询的商品的特征和限制条件，条件来自于页面用户输入或者是下拉框选择，组织为一个Object,类似与java 中的map; var cxtj = { lx : $("#splx").val(), 商品类型 scrq : $("

声明 本系列文章内容梳理自以下来源： Angular 官方中文版教程 官方的教程，其实已经很详细且易懂，这里再次梳理的目的在于复习和巩固相关知识点，刚开始接触学习 Angular 的还是建议以官网为主。 因为这系列文章，更多的会带有我个人的一些理解和解读，由于目前我也才刚开始接触 Angular 不久，在该阶段的一些理解并不一定是正确的，担心会有所误导，所以还是以官网为主。 正文- Angular-CLI 命令 Angular 的项目其实相比老旧的前端项目模式或者是 Vue 的项目来说，都会比较重一点，因为它包括了： 模块 @NgModel， 组件 @Component， 指令 @Directive 等各种各样的东西，而每一种类型的 ts 文件，都需要有一些元数据的配置项。 这就导致了，如果是手工创建 ts 文件，需要自己编写很多重复代码，因此，可以借助 Angular-CLI 命令来创建这些文件，自动生成所需的这些重复代码。 而且，不仅在创建文件方面，在对项目的编译、打包等各种操作中也需要借助 Angular-CLI。 所以，日常开发中，不管是借助 WebStrom 的图形操作，还是直接自己使用命令方式，都需要跟 Angular-CLI 打交道，了解一些基本的配置和命令也是有好处的。 安装的方式就不讲了，要么直接使用 WebStrom 内置的，要么借助 npm 下载一个，要么通过

前端开发页面 使用Vue开发页面 遇到环境配置问题：一系列包，需求，Vue的导入 遇到less文件导入问题：npm 安装所需依赖文件 遇到Iview组件使用问题：npm安装所需依赖文件，并且需要Package添加 遇到项目安装问题 遇到CSS排版布局问题：布局版面 遇到改变点击按钮改变DIV内容问题：使用router，路由，点击改变网址路由，改变组件内容，使用router-view Vue框架的熟练使用：组件的开发 上述是运行时自动跑出的链接。 实际链接 需要将0.0.0.0改成localhost 引入CSS文件 使用iview组件的一些问题，注意使用组件时的一些作用域的问题，render函数中的作用域是上一级的。里头的变量，函数外不得调用。路由的熟悉~~，在配置路径时出现问题，需要格外注意拼写规范性。。。。 Iview图标使用问题，在render函数里添加Icon失效，询问后发现是版本问题~~ CSS调整样式方式 SVN上传更新文件，需要带钩子~ 开发习惯，可以自行封装常用方法或者组件放在一个目录里，import方便使用，也可以自行封装Post方法使用 在使用其他组件的函数时，需要注意函数中更改数据的情况，this代表上下文，在不同组件代表不同对象 父子组件传值各有各的方法 子组件向父组件传值： func为子组件发送的事件名，需要在后面加上发送的值，Register为函数

最近研究servlet，看书时候书里讲到了c/s架构到b/s架构的演变，讲servlet的书都很老了，现在的b/s架构已经不是几年前的b/s架构，其实b/s架构就是web应用开发，对于这样的架构我们现在应该考虑的是前端和后端的分离（注意：这里的后端是指服务端）。 　　Web前端现在是一个独立的技术工种，这个工种的产生主要是针对互联网行业的需求，我在以前的文章里曾经讲到过，一个大型互联网网站，例如想淘宝网，它绝对不是一个Web项目，而是一群web项目的集合，那么如果不在前端进行整合，这么多web项目前端开发一定存在大量重复劳动，并且运维时候也存在难以统一管理的问题。本文假想一个面对需要前端资源整合的组织，如何做到前后端分离的解决思路。本文详情如下： (一) 前后端分离的目的和作用 　　做Web开发也可以说是B/S架构开发，B端和S端从技术体系角度而言异构性很大，换而言之就是B端使用的技术和S端使用的技术不适于同一个体系，这样的结果导致实际开发中，很难做到专业分工，如果项目开发过程中管控不到位，这样的问题可能会影响到整个项目的开发质量，因此前后端分离的目的之一就是要做到专业化分工，提高项目的质量和开发效率。 　　随着技术的发展，当下的Web开发形势已经和以前有了很大的不同，早期的Web项目是一个封闭的项目，用户从浏览器里看到的页面直到后台数据库都是在一个项目里集成的

实现组件更新数据功能 上 将输入框中的默认数据动态渲染出来 输入框失去焦点的时候 更改商品的数量 子组件中不推荐操作数据 把这些数据传递给父组件 让父组件处理这些数据 父组件中接收子组件传递过来的数据并处理 [mw_shl_code=applescript,true]<div id="app"> <div class="container"> <my-cart></my-cart> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var CartTitle = { props: ['uname'], template: <br/><div class="title">{{uname}}的商品</div><br/> } var CartList = { props: ['list'], template: ` <div> <div :key='item.id' v-for='item in list' class="item"> <img :src="item.img"/> <div class="name">{{item.name}}</div> <div class="change"> <a href="">－</a> 1.

一、ReactJS简介 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。 二、对ReactJS的认识及ReactJS的优点 首先，对于React，有一些认识误区，这里先总结一下： React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式； React的服务器端Render能力只能算是一个锦上添花的功能，并不是其核心出发点，事实上React官方站点几乎没有提及其在服务器端的应用； 有人拿React和Web Component相提并论，但两者并不是完全的竞争关系，你完全可以用React去开发一个真正的Web Component； React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工作。 1、ReactJS的背景和原理 在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而 复杂或频繁的DOM操作通常是性能瓶颈产生的原因

作者： 胡子大哈 原文链接： http://huziketang.com/books/react/lesson17 转载请注明出处，保留原文链接和作者信息。 上一个评论功能的案例中，可能会有些同学会对一个地方感到疑惑： CommentList 中显示的评论列表数据为什么要通过父组件 CommentApp 用 props 传进来？为什么不直接存放在 CommentList 的 state 当中？例如这样做也是可以的： class CommentList extends Component { constructor () { this.state = { comments: [] } } addComment (comment) { this.state.comments.push(comment) this.setState({ comments: this.state.comments }) } render() { return ( <div> {this.state.comments.map((comment, i) => <Comment comment={comment} key={i} /> )} </div> ) } } 如果把这个 comments 放到 CommentList 当中，当有别的组件也依赖这个 comments 数据或者有别的组件会影响这个数据

vux github ui demo: https://github.com/airyland/vux Mint UI 项目主页: http://mint-ui.github.io/#!/zh-cn demo: http://elemefe.github.io/mint-ui/#/ github地址: https://github.com/ElemeFE/mint-ui 中文文档地址: http://mint-ui.github.io/docs/#!/zh-cn iview iView 配套的工作流: https://github.com/icarusion/vue-vueRouter-webpack github地址: https://github.com/iview/iview 官网: https://www.iviewui.com/ vue-mui 官网: http://mui.yaobieting.com/ github地址: https://github.com/creatshare/vue-mui radon-ui 中文文档： https://luojilab.github.io/radon-ui/#!/ github: https://github.com/luojilab/radon-ui antd vue 中文文档: http://okoala.github.io

vux github ui demo: https://github.com/airyland/vux Mint UI 项目主页: http://mint-ui.github.io/#!/zh-cn demo: http://elemefe.github.io/mint-ui/#/ github地址: https://github.com/ElemeFE/mint-ui 中文文档地址: http://mint-ui.github.io/docs/#!/zh-cn iview iView 配套的工作流: https://github.com/icarusion/vue-vueRouter-webpack github地址: https://github.com/iview/iview 官网: https://www.iviewui.com/ vue-mui 官网: http://mui.yaobieting.com/ github地址: https://github.com/creatshare/vue-mui radon-ui 中文文档： https://luojilab.github.io/radon-ui/#!/ github: https://github.com/luojilab/radon-ui antd vue 中文文档: http://okoala.github.io

内容 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