前端开发知识点总结

包括了CSS和bootstrap的学习。花费了好长时间总结出来的。所有东西一目了然，希望对前端朋友有所帮助。

前端开发知识点总结

• 1. 响应式布局入门
  • 1. viewport 是用户网页的可视区域，针对移动网页优化的页面的viewport meta标签大致如下：
    • 1.1. width:控制viewport的大小，device-width为设备的宽度； height: 和width相对应，指定高度
    • 1.2. initial-scale:初始缩放比例，即页面第一次load的时候缩放比例
    • 1.3. maximum-scale:允许用户缩放到的最大比例； minimum-scale:允许用户缩放到的最小比列
    • 1.4. user-scalable:用户是否可以手动缩放
  • 2. css3多媒体查询的用法
    • 2.1. viewport(视窗)的宽度与高度；设备的宽度与高度；朝向（智能手机横屏，竖屏）；分辨率
  • 3. 响应式布局
    • 3.1. 一个网页设计，多个设备使用；是通过缩放来实现的；会用到媒体查询
• 2. 栅格系统布局、弹性盒子布局
  • 1. 栅格系统布局
    • 1.1. container容器：设置整个栅格化布局的宽度；row行：防止它的内部的列column元素溢出到别的行；
    • 1.2. column列：列是栅格系统纵向排布依据，pc端是12列，移动端是6列
  • 2. 弹性盒子布局
    • 2.1. flex-direction的四个属性：row（默认值）：主轴为水平方向，起点在左端； row-reverse：主轴为水平方向，起点在右端； column：主轴为垂直方向，起点在上沿； column-reverse：主轴为垂直方向，起点在下沿；
    • 2.2. flex-wrap属性：默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 它可能取三个值： （1）nowrap（默认）：不换行 （2）wrap：换行，第一行在上方 （3）wrap-reverse：换行，第一行在下方
    • 2.3. justify-content属性定义了项目在主轴上的对齐方式。 .box { justify-content: flex-start | flex-end | center | space-between | space- around; }
    • 2.4. order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 .item { order: <integer>; }
• 3. bootstrap知识点
  • 1. 引入和栅格参数
    • 1.1. 从bootstrap中文网上下载并引入到所做的项目中
    • 1.2. bootstrap提供了两个容器：.container类：用于固定宽度并支持响应式布局的容器,.container-fluid类：用于100%宽度，占据全部视口（viewport）的容器
    • 1.3. row在水平方向创建一组column;栅格系统中的column是通过1到12的值来表示跨越的范围
  • 2. 按钮和表单
    • 2.1. 可作为按钮使用的标签或元素为<a>、<button>或<input>元素添加按钮类(button class)即可使用bootstrap提供的样式
    • 2.2. 按钮的预定样式：.btn-default(默认样式) ; .btn-primary(首选项) ；.btn-success(成功) ；.btn-info(一般信息) ； .btn-warning(警告) ; .btn-danger(危险) ； .btn-link(链接) ； 使用.btn-lg 、.btn-sm 或 .btn-xs就可以获得不同尺寸的按钮；通过给按钮添加.btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变成为了（block）元素；
    • 2.3. 所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置为定制的效果
    • 2.4. 内联表单：在bootstrap框架中实现内联表单，只需要在<form>元素中添加类名“form-inline”即可
  • 3. 缩略图和分页
    • 3.1. 缩略图组件的默认样式：通过“.thumbnail”样式配合bootstrap的网格系统来实现
    • 3.2. 使用：在图片外层添加带有class为.thumbnail的<a>标签；缩略图再配以栅格参数，实现缩略图布局；
    • 3.3. 我们可以向基本的缩略图中添加各种HTML内容
      • 把带有class.thumbnail的<a>标签改为<div>;在该<div>内，可以添加任何想要添加的内容
    • 3.4. 分页导航：带页码的分页导航 -> 百度中搜索中的分页导航
      • 禁用和激活状态：.disabled类 ；.active类
      • 大小设置：.pagination-lg 和 .pagination-sm
    • 3.5. 分页导航：带翻页导航 -> 博客中的导航
      • 使用方法：为ul标签加入pager类；previous:让“上一步”按钮居左； next让“下一步”按钮居右 ；如果在li标签上添加了disabled类名的时候，分页按钮处于禁用状态。
  • 4. 导航和导航组件
    • 4.1. 给<ul>标签添加.nav类样式，并追加.nav-tabs，可以获得选项卡式的导航
    • 4.2. 给<ul>标签添加.nav类样式，并追加.breadcrumbs，可以获得路径导航
    • 4.3. 制作导航条时导航的外层包裹块的类名为.navbar ; 在.navbar容器中放置一个表单，需给表单添加.navbar-form类名;
    • 4.4. 在.navbar容器中放置一个按钮（非用于折叠的按钮），需给按钮添加.navbar-btn类名
  • 5. 下拉菜单
    • 5.1. .dropdown: 将下拉菜单触发器和下拉菜单都包裹在其中；下拉菜单.dropdown-menu ;
    • 5.2. 对齐：下拉菜单默认是左对齐，.dropdown-menu-right能够使之右对齐
    • 5.3. 分割线：role="separator" .divider; 禁用菜单项：为下拉菜单中的<li>元素添加.disabled类
  • 6. Carousel插件
    • 6.1. 使用类名为 .carousel的容器来包含整个轮播内容；使用类名为.carousel-inner的容器来包含所有轮播项目; 在轮播区中，使用类名为.item的容器来包含单个轮播项目;
    • 6.2. 属性.data-slide-to可将滑块移动到一个特定的索引; 属性 .data-slide接受关键字prev或next，用来改变幻灯片相对于当前位置的位置;
    • 6.3. 轮播（Carousel）插件中的方法中，（假设轮播插件的外层div的id=”indentifier”）$('#identifier').carousel('cycle') 方法可以让轮播项目从左到右循环。
  • 7. 标签页
    • 7.1. 在标签式标签页中，标签页导航区ul的类名为.nav .nav-tabs；
    • 7.2. 在胶囊式标签页中，标签页导航区ul的类名为.nav .nav-pills；
    • 7.3. .fade .in类是为标签页设置淡入淡出效果的
    • 7.4. 假设标签页导航区的<ul id=”nav”>，试写出通过JavaScript来启用标签页的代码。 <script> $('#nav a').click(function (e) { e.preventDefault() $(this).tab('show')}) </script>
  • 8. Collapse折叠插件
    • 8.1. 制作一个面板时必须包含面板的头、内容和脚注; 带脚注的面板，面板的脚注会从情境效果中继承颜色;
    • 8.2. 在Collapse插件中，类Collapse是用来隐藏内容的
• 4. Vue知识点
  • 1. Vue开发基础
    • 1.1. Vue:Vue通过虚拟DOM技术来减少对DOM的直接操作；通过尽可能简单的API来实现响应的数据绑定，支持单向和双向数据绑定。
    • 1.2. Vue： (类似于View)是一套用于构建用户界面的渐进式框架；与其他大型框架相比，Vue被设计为可以自底向上逐层应用；Vue可以开发一个全新项目，也可以将Vue引入到一个现有的项目中。
    • 1.3. Vue的优势： 轻量级：Vue简单、直接，所以Vue使用起来更加友好； 数据绑定： 数据驱动视图，视图也可以驱动数据； 指令：指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为； 插件： 插件用于对Vue框架功能进行扩展；
    • 1.4. Visual Studio Code编辑器特点： 轻巧极速，占用系统资源较少； 具备语法高亮显示、只能代码补全、自定义快捷键和代码匹配等功能； 跨平台； 主题界面的设计比较人性化； 提供了丰富的插件；
    • 1.5. Vue的下载和引入：Vue核心文件Vue.js引入： <script src=”vue.js” ></script>
    • 1.6. 浏览器：是开发和调试Web项目的工具，使用量较多的是Chrome浏览器
      • Vue-devtools:Chrome浏览器的扩展，用于调试Vue
    • 1.7. webpack打包工具
      • 安装webpack
        • webpack:web项目的打包工具（项目发布需要打包）
        • 安装webpack；查看webpack版本；卸载webpack
    • 1.8. 构建Vue项目
      • 安装脚手架
      • 创建webpack模板的Vue项目
      • 启动项目
  • 2. Vue开发基础（上）
    • 2.1. 创建Vue实例：通过new关键字实例Vue({})构造函数
    • 2.2. Vue实例配置对象
      • data:Vue实例数据对象
      • methods:定义Vue实例中的方法
      • components:定义子组件
      • computed:计算属性
      • filters:过滤器
    • 2.3. Vue实例配置对象
      • el:唯一根元素
      • watch:监听数据变化
    • 2.4. Vue数据绑定
      • 内联样式
      • 绑定样式
  • 3. Vue开发基础（下）
    • 3.1. Vue.directive:用来注册自定义指令，对低级DOM元素进行访问，为DOM元素添加新的特性
    • 3.2. Vue.extend:Vue.extend用于基于Vue构造器创建一个Vue子类，可以对Vue构造器进行扩展
    • 3.3. Vue.set：Vue的核心具有一套响应式系统，通过监听器监听数据层的数据变化
  • 4. 过渡和动画
  • 5. 路由
  • 6. 状态管理
  • 7. 开发环境
  • 8. 服务器端渲染