前端组件

1、active-class是哪个组件的属性？嵌套路由怎么定义？ 答：vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？ 答：在router目录下的index.js文件中，对path属性加上 /:id。使用router对象的params.id 3、vue-router有哪几种导航钩子？ 答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件 4、scss是什么？安装使用的步骤是？有哪几大特性？ 答：预处理css，把css当前函数编写，定义变量,嵌套。 先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader 4.1、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？ 答：css的预编译。 使用步骤： 第一步：用npm 下三个loader（sass-loader、css-loader、node-sass） 第二步：在build目录找到webpack.base.config.js

1.什么是面向对象？什么是面向过程？ 1）面向对象的重点是 对象 。当解决一个问题的时候，面向对象会把事物抽象成对象，也就是说这个问题包含哪些对象，然后给这些对象赋一些属性和方法，让每个对象执行自己的方法，问题得到解决。 2）面向过程的重点是 过程 。解决一个问题的时候，面向过程会把问题拆分成一个个的函数和数据（方法的参数）。然后按照一定的顺序执行这些方法，执行完这些方法，问题得到解决。 2.什么是面向对象程序设计？ 答：将计算机需要处理的问题都抽象成对象，在抽象成类，帮助人们实现对现实世界的抽象与数字建模。 面向对象的程序设计更加符合人的思考逻辑和对事物的处理。 3.什么是对象？什么是类？ 答：对象是由类实例化出来的，类的实例称为对象。 类是具有相同特征和功能的对象的抽象。 类和对象的关系就好比模具和铸件的关系，类的实例化结果就是对象，而对象的抽象就是类。 4.什么是继承？ 在面向对象的编程中，当两个类具有相同的特征（属性）和行为（方法）时，可以将相同的部分抽取出来放到一个类中作为父类，其他两个类继承这个父类。继承后的子类自动拥有了父类的部分属性和方法。 通过继承创建的新类被称为“子类”或“派生类” 被继承的类称为“基类”、“父类”或“超类” 比如： 狗{ 吠； } 牧羊犬 继承 狗{ 放羊; } 上面的例子中，狗类是父类，牧羊犬类是子类。牧羊犬类通过继承获得狗类的吠的能力

本篇文章是《程序员修炼之道》第二章的笔记，总结了高效程序员需要遵守的一些原则和常用的开发模式，对我们有非常重要的指导意义。建议每个程序员都应该学习并掌握这些原则。如果大家觉得这个系列文章有价值，我们可以组织一次抽书的活动，鼓励大家从原文学习。 DRY 原则 软件开发过程无时无刻都伴随着维护，如果项目中有大量的重复代码会对我们的维护工作造成很大的麻烦。比如：一段代码在多个地方出现， 一旦要修改就需要我们同时修改多个地方，如果某个地方忘记修改就可能导致一些不必要的错误。因此作者提出 DRY原则 - Don't repeat yourself（不要重复你自己） 。 我们平时有不少重复的场景， 同时也有避免重复的解决方法，下面举几个例子。 代码与注释：我们经常被说教要在代码里加注释。但注释并不是越多越好，我们应该把注释留给高级的说明，对于比较低级的说明用代码代替注释即可。否则，就存在重复的知识，每次修改代码都要想着修改注释 代码与文档：文档的更新是永远滞后于代码的，经常更新了代码但忘记更新文档。我们可以采用一些辅助技术或者自研的技术，比如：API doc、Java doc 之类的工具，代码更新后，文档会随着更新 设计中的重复：假设某个类中有个起始坐标和结束坐标两个属性，这时再加一个两点间距离的属性就有点重复了，因为我们可以根据起止点计算出距离 临时性的重复

前言：之前的三篇介绍了下bootstrap table的一些常见用法，发现博主对这种扁平化的风格有点着迷了。前两天做一个excel导入的功能，前端使用原始的input type='file'这种标签，效果不忍直视，于是博主下定决心要找一个好看的上传组件换掉它。既然bootstrap开源，那么社区肯定有很多关于它的组件，肯定也有这种常见的上传组件吧。经过一番查找，功夫不负有心人，还是被博主找到了这个组件：bootstrap fileinput。关于这个组件的简单应用，博客园大牛 伍华聪 写过一篇 基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用 ，只不过很多细节都没有涉及，于是博主在完成开发任务之余，总结了下这个组件的一些常见用法。在此记录下，就算做个笔记吧，也给需要使用的朋友提供点方便。 源码以及API地址： bootstrap-fileinput源码： https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API： http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示： http://plugins.krajee.com/file-basic

一、学习插件编写背景 作为一名前端人员，应该注重前端复用性及组件化，更应该考虑前端的性能优化，做到代码简洁有序，不冗余。特别是在大型团队中，如果一个团队中存在多个功能相似的组件，举个栗子，拿分页组件举例，某一个项目系统中使用这个项目下人员编写的一个分页组件，另一个项目系统中使用另一个项目下人员编写的一个分页组件，诸如此类，还有很多个项目系统也是如此，那么将造成团队内部组件冗余不清晰。每个新接手一个项目系统的人员都得熟悉特定的这个项目系统下的诸如分页组件的其他组件，等熟悉之后才能更好地进行项目需求开发。这也正是每个公司想要封装属于自己内部的一套组件库的原因。 二、学习历程 1. 学习封装组件的几种普遍方法及思维 通过JavaScript面向对象的思想，prototype属性（这种属性是比较普遍的） 通过$.fn.pluginName方式（通过jQuery来扩展插件） 2.学习方式 找自己感兴趣的插件来学习，下载其源码，学习如何编写一个组件。之前在看React的combineReducer方法的源码的时候，其实React的思想已经很完备了，combineReducer这个方法就是将多个reducer分别处理不同的action，然后将不同action处理后的state合并成一个最新的state返回。感受最深的是，combineReducer这个方法对于接收参数的验证处理，考虑到了各种情况

上下固定，中间滚动布局(FLEX) <div id="app"> <div class="header"></div> <div class="views"></div> <div class="footer"></div> </div> <style> #app{display: flex;flex-direction: column;height: 100%;} .views{flex: 1; overflow-y: scroll;-webkit-overflow-scrolling: touch;} /*-webkit-overflow-scrolling: touch; 解决苹果手机下网页滑动不顺畅问题*/ .header{} /*高度随意设置*/ .footer{} /*高度随意设置*/ </style> Vue插件封装(loading实例) src/omponents/loading/Loading.vue <template> <div class="loading" v-show="show"> <i class="i-loading"></i> </div> </template> <script> export default { props: { show: Boolean } } </script> <style lang="scss" scoped>

　　在网络工程中，路由能保证信息从源地址传输到正确地目的地址，避免在互联网中迷失方向。而前端应用中的路由，其功能与之类似，也是保证信息的准确性，只不过来源变成URL，目的地变成HTML页面。 　　在传统的前端应用中，每个HTML页面都会对应一条URL地址，当访问某个页面时，会先请求服务器，然后服务器根据发送过来的URL做出处理，再把响应内容回传给浏览器，最终渲染整个页面。这是典型的多页面应用的访问过程，由服务器控制页面的路由，而其中最令人诟病的是整页刷新，不仅存在着资源的浪费（像导航栏、侧边栏等通用部分不需要每次加载），并且让用户体验也变得不再流畅。 　　为了弥补多页面应用的不足，有人提出了另一种网站模型：单页面应用（Single Page Application，简称SPA）。SPA类似于一个桌面应用程序，能根据URL分配控制器（即由JavaScript负责路由），动态加载适当的内容到页面中，减少与服务器之间的通信次数，不再因为页面切换而打断用户体验。虽然名称中包含“单页”两字，但浏览器中的URL地址还是会发生改变，在视觉上与多页面保持同步。而实现SPA的关键就是路由系统，在React的技术栈中，官方给出了支持的路由库：React Router，后文将会着重分析该库。 　　当然，SPA也存在着自身的缺陷，例如不利于SEO、增加开发成本等，使用与否还是得看具体项目。 一、版本 　

HTC(HTML Component)开发简介 1.摘要 本文在实例的基础上讨论了HTC(HTML Component)的编程方法，提出了一种编写脚本组件的基本模式。 2.目标读者 HTML开发人员，脚本开发人员，系统分析人员 3.背景知识 HTML, DHTML, CSS 4.引言 HTC(HTML Component)直译为HTML组件，并不是一项新技术。可是说谈不上是一门技术。实际上只是IE浏览器内置的一种脚本封装机制。由于讨论的人很少，而Microsoft也没有什么技术支持，故而应用的人很少。但是HTML有着很好的特性可以使我们的开发工作高效。并且你有可能发现，HTC或许可以改变你以往开发应用的方式。 在MSDN online对HTC的定义仅如下几句: HTML Components (HTCs) provide a mechanism to implement components in script as Dynamic HTML (DHTML) behaviors. Saved with an .htc extension, an HTC is an HTML file that contains script and a set of HTC-specific elements that define the component. (HTC是由HTML标记

Vue 渐进式 JavaScript 框架 通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目 一、走进Vue 1、what -- 什么是Vue 可以独立完成前后端分离式web项目的JavaScript框架 2、why -- 为什么要学习Vue 三大主流框架之一：Angular React Vue 先进的前端设计模式：MVVM 可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发 3、special -- 特点 单页面web应用 数据驱动 数据的双向绑定 虚拟DOM 4、how -- 如何使用Vue 开发版本： vue.js 生产版本： vue.min.js <div id="app"> {{ }} </div> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app' }) </script> 二、Vue实例 1、el：实例 new Vue({ el: '#app' }) // 实例与页面挂载点一一对应 // 一个页面中可以出现多个实例对应多个挂载点 // 实例只操作挂载点内部内容 2、data：数据 <div id='app'> {{ msg }} </div> <script> var app = new Vue({ el: '

一、生命周期钩子 　　用处：在组件从创建到销毁过程中的某个时间节点，想要完成的某个事，如，在组件创建完成后，想要干嘛干嘛，在被销毁后想要做某些事。 　　　　　再比如created钩子： 组件创建后，渲染前，可以请求后台，拿到最新的数据更新完成后，再渲染到页面，这样页面上就是数据库中最新的数据了　 　　　　　而mounted：页面被渲染后，的钩子　 　　　　　 访问methods要通过$options 　　　　　　console.log(this.$options.methods) 　　 生命周期钩子案例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue组件的生命周期钩子</title> </head> <body> <div id="app"> <div> <h1>什么是生命周期钩子</h1> <h1>一个Vue子组件从创建到销毁整个生命周期过程中一些时间节点回调的方法</h1> </div> <local-tag></local-tag> </div> </body> <script src="vue/vue.js"></script> <script> let localTag = { template:` <div> <h2 @click="btnClick"> {{msg}}</h2> <