1.2 前端类库与框架
文章平均质量分 96
数佳
prompt
展开
-
jQuery——1
《从零玩转jQuery》李南江https://study.163.com/course/courseMain.htm?courseId=1005220017简书笔记https://www.jianshu.com/nb/23491401中文jQueryhttp://hemin.cn/jq/学习该课程,参考上述笔记和API,自己总结锤炼吸收,以后方便参考。一、初识jQuery ...原创 2018-09-04 23:06:49 · 384 阅读 · 0 评论 -
Vue构建工具
目录一、单文件组件二、不同构建版本 1、运行时+编译器vs.运行时 2、开发环境vs.生产环境模式三、webpack一、单文件组件通常使用Vue.component定义全局组件,在页面中用标签引入。这种方式在很多中小规模的项目中运作的很好,在这些项目里JavaScript只被用来加强特定的视图。但在更复杂的项目中,或前端完全由JavaScript驱动的时候,缺点变得...原创 2018-11-24 22:51:59 · 427 阅读 · 0 评论 -
Vue规模化——vue-router、vuex
一、路由vue-router后端路由:对于普通的网站,所有的超链接都是URL地址,URL地址对应服务器上的资源;前端路由:对于单页面应用程序,主要通过URL中的hash(#)来实现页面跳转,HTTP请求中不会包含hash相关的内容。插件下载:https://github.com/vuejs/vue-router,https://unpkg.com/vue-router/dist/vue-...原创 2018-11-24 22:53:16 · 347 阅读 · 0 评论 -
webpack入门
目录一、起步 1、安装 2、基本使用 3、创建bundle文件 4、使用配置文件二、开发 1、webpack-dev-server自动打包编译 2、html-webpack-plugin自动添加js入口文件三、管理资源 1、加载CSS、less、scss 2、加载图片 3、加载字体四、bable处理高级js语法五......原创 2018-11-26 15:02:25 · 954 阅读 · 0 评论 -
React基础——虚拟DOM和Diff算法
目录一、虚拟DOM和Diff算法 1、为什么需要虚拟DOM 2、什么是虚拟DOM 3、用JS对象模拟DOM树 4、Diff算法比较两棵虚拟DOM树的差异 5、将差异应用到真正的DOM树 6、总结React起源于Facebook的内部项目,用来架设Instagram(照片交友)网站。在2013年5月开源。React的设计思想极其独特...原创 2019-01-21 10:30:06 · 486 阅读 · 0 评论 -
Vue可复用性&组合
一、混入 二、自定义指令除了核心功能默认内置的指令(v-model和v-show),Vue也允许注册自定义指令。在Vue2.0中,代码复用和抽象的主要形式是组件,然而有的情况下,你仍然需要对普通DOM元素进行底层操作,这时会用到自定义指令。如当页面加载时,输入框将获得焦点,只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。// 如果不使用指令,就需要操作...原创 2018-11-16 10:01:03 · 620 阅读 · 0 评论 -
Vue过渡&动画
目录一、单元素/组件的过渡1、在CSS过渡和动画中自动应用class2、使用第三方CSS动画库,如Animate.css3、在过渡钩子函数中使用JavaScript直接操作DOM二、v-for列表过渡三、初始渲染的过渡动画能够提高用户体验,帮助用户更好的理解页面中的功能。Vue在插入、更新或者移除DOM时,提供多种不同方式的应用过渡效果。一、单元素/组件的过渡V...原创 2018-11-16 10:00:07 · 471 阅读 · 0 评论 -
jQuery——2
《从零玩转jQuery》李南江https://study.163.com/course/courseMain.htm?courseId=1005220017简书笔记https://www.jianshu.com/nb/23491401中文jQueryhttp://hemin.cn/jq/学习该课程,参考上述笔记和API,自己总结锤炼吸收,以后方便参考。四、jQuery事件 ...原创 2018-09-06 17:43:57 · 180 阅读 · 0 评论 -
Vue基础、指令
目录一、概述二、安装三、基本代码 实例的生命周期钩子四、插值五、class、style绑定 1、绑定HTML class 2、绑定内联样式六、事件处理v-on @ 按键修饰符七、双向数据绑定v-model八、列表渲染v-for和key属性九、条件渲染v-if和v-show十、计算属性和侦听器一、概述...原创 2018-10-17 23:00:15 · 284 阅读 · 0 评论 -
Bootstrap——全局CSS样式
1、.container为页面内容和栅格系统包裹.container容器,响应式,大屏固定宽度且居中,小屏百分百自适应。2、.row . col-*-*Bootstrap中定义了一套响应式的网格系统,将一个容器划分成12列,然后通过col-*-*的类名控制每一列的占比(每列宽度通过百分比实现)。每一个列默认有一个15px的左右外边距,row类的一个作用是通过左右-15px屏蔽掉这个...原创 2018-10-07 13:34:43 · 333 阅读 · 0 评论 -
Bootstrap——组件
1、导航条对于.navbar-defined是在.navbar-default的基础上自定义的导航条样式。将.navbar-default的代码拷贝到自己的.css文件中,通过Ctrl+D选中下一个或Ctrl+Shift+L选中全部navbar-default修改为navbar-defined,再按照需要修改CSS代码。<!-- 导航条、自定义导航条样式、静止在顶部 -->...原创 2018-10-07 18:20:16 · 578 阅读 · 0 评论 -
Bootstrap简介
框架,库lib library,从第三方引入的包,把常用的功能预先写好至一些文件(.js或.css等)。jQuery作为一个框架,提供一套比较便捷的操作DOM的方式。What:Bootstrap,含义是引导指令、引导程序,是一个词,不是合成词BootStrap。Bootstrap是前端框架(界面工具集),是Twitter公司的两名前端工程师Mark Otto和Jacob Thornton在20...原创 2018-09-28 21:18:10 · 711 阅读 · 0 评论 -
字体图标
简介字体图标,文件小且是矢量的。对于不同的字体,实际上是键盘上的字符对应不同的矢量图。因此,可以作自定义的矢量图,使每张图对应不同的编码,通过修改字体font-family、使用编码找到相应的矢量图。制作——icomoonhttps://icomoon.io/->->(选择.svg文件,导入自定义的图标)->选中自定义图标及要使用的网站预定义图标,点击Gen...原创 2018-09-28 23:28:19 · 1656 阅读 · 0 评论 -
Bootstrap——JavaScript插件
1、轮播图role、aria-xx属性,只跟语义相关。修改id名,也可以用section等代替最外层div。该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图,bootstrap.js会自动为当前元素添加图片轮播的特效。每一个li就是一个单独的控制点。data-target属性指定当前控制点控制的是哪一个轮播图,...原创 2018-10-07 23:32:43 · 456 阅读 · 0 评论 -
less
1、概述 2、less的使用 3、注释4、定义变量 5、嵌套 6、Mixin 7、Import 8、函数less是一门CSS预处理语言,它扩展了CSS,增加了变量、Mixin、函数、嵌套、循环等特性,使CSS更易维护和扩展。官网http://lesscss.org/ 中文网http://lesscss.cn/ ht...原创 2018-10-14 21:50:18 · 883 阅读 · 0 评论 -
Vue组件
目录一、组件注册 1、全局注册 2、局部注册二、data三、组件动态切换四、组件传值 1、父组件向子组件传递数据prop 2、父组件向子组件传递方法、子组件向父组件传值五、插槽slot六、处理边界情况组件:为了拆分Vue实例的代码量,以不同的组件划分不同的功能模块。模块化:代码逻辑的角度,方便代码分层开发,保证每个功能模块的职...原创 2018-11-13 22:36:10 · 160 阅读 · 0 评论 -
React基础——安装、JSX、组件、生命周期
https://react.docschina.org/docs/hello-world.htmlReact教程二、基本使用webpack、Vue中的一、二搭建webpack环境(1)安装npm install --savereact react-dom安装react:用于创建组件和虚拟DOM,包括组件的生命周期。react-dom:将组件和虚拟DOM放到页面展示,Reac...原创 2019-01-26 11:11:29 · 626 阅读 · 0 评论