前端学习总结
11-BOOTSTRAP
bootstrap知识总结
-
起步
-
css
-
bootstarp.css
- 6800
-
-
js
-
jquery.js
-
bootstrp.js
- 2000
-
bootlint.js
-
html5shiv.js
-
respond.js
-
-
html
- html lang="zh-CN"
- <meta http-equiv=
-
-
全局CSS样式
-
最外层 div.container
-
按钮
- btn
- btn-defatult
- btn-danger/warning/success/info/primary
- btn-lg/sm/xs 默认
- btn-block
-
图片
- .img-rounded
- .img-circel
- .img-thmbnail
- .img-responsive
-
文本
- .text-danger/success/warning/info/primary
- .bg-danger/success/warning/info/primary
- .text-left/center/right/justify
- .text-uppercase/text-lowercase/captitailze
-
列表
- list-unstyled
- .list-inline
-
表格
- .table
- .table-bordered
- .table-striped
- .table-hover
- .table-responsive 必须用table父元素 div添加属性
-
栅格
-
div.contaner
-
row
-
col
-
....
-
col-lg-*
-
col-md-*
-
col-sm-*
-
col-xs-*
-
col-md-offset-*
-
.hidden-xs
- .hidden-sm
-
-
表单
-
默认
- <input class="form-control"
-
行内
-
水平
-
-
下拉菜单
-
组件
-
字体图标
-
警告框
-
- X
-
......
-
-
进度条
-
-
列表组
-
缩略图
-
- <img src="1.jpg"
-
-
-
媒体对象
-
-
js插件
-
重构
Twritter Bootstrap:（详细看Bootstarp中文网）
-
CSS框架 由上千个class来组成。
-
1.起步-引入Bootstrap框架到网页
-
1、 指定当前文档的基础语言
-
- 为浏览器自动翻译功能指定语言基础
-
- 为读屏软件指定发音基础
-
-
- 视口 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"
-
3.跨浏览器IE兼容性设置
-
<meta http-equiv="x-ua-compatible"content="IE=edeg">
-
x-ua-compatible
- x: Cross
- ua: User Agent
- 指定用哪个IE的内核来进行页面的渲染
-
IE-edeg
- 指定渲染页面的IE浏览器的内核额
- IE=6： 指定使用IE6的内核来渲染页面。 在高于IE6（包含）的浏览器中，统一都使用IE6内核渲染。 低于6的 使用当前最高版本的内核渲染
-
-
4.引入 bootstrap.css
-
5.引入两个兼容性 JS 文件
-
用来 让 老版本IE支持H5的新标记以及C3媒体查询技术
-
- html5shiv.min.js 第三方JS 用于让老版本的IE支持HTML5 新标记
-
- respond.min.js 第三番JS 自调函数 用于让老版本的 IE支持CSS3媒体查询
-
-
- 引入两个行为依赖的JS文件
-
jQuery.js ,bootstrap.js
-
- 尽量在页面的最底部（之上)位置进行引入
-
2.注意引入顺序
- 先运入 jQuery.js
- 再引入 bootstrap.js文件
-
7.引入 测试JS文件
-
用于检查页面结构是否按照bootstrap的要求进行编写
-
1 、引入bootlint.js 文件，位于bootstrap.js之后
-
2.编写测试代码
- bootlint.showLintReportForCurrentDocument( [] )
-
-
-
- 内容部分
-
1.CSS Reset
- *{ box-sizing:border-box ;}
-
- 上千个class
- 直接用
-
默认将屏幕类型分为4类：
-
- 大型屏幕（lg）： w>=1200px 屏幕较宽的PC机显示器
-
- 中型屏幕（md [middle]） 992px<=w<=1199px 普通PC机屏幕
- 3.小型屏幕（sm [small]） 768px<=w<=991px 各种pad屏幕
-
- 超小型屏幕 （xs [extra small]） w<=767px 各种手机屏幕
-
-
提供的两个容器class
-
- 定宽容器：
-
在不同的宽度设备上 均提供固定的宽度值
- 类： .container
- lg:width:1170px;
- md:width:970px;
- sm:width:750px;
- xs:width:100%;
-
2.变宽容器：
-
在任何设备中，宽度都是100%
- 类： .container-fluid
- 子主题 2
-
-
-
3.全局样式-按钮
-
bootstrap中的所有按钮都依赖于 .btn 类
-
页面中允许设置为按钮样式的元素有
- a
- button
- input( button,submit,reset)
-
按钮的样式类
- .btn
- .btn-default: 默认按钮的效果（白底黑字）
- .btn-primary: 首选项（深蓝底，白字）
- .btn-success: 成功 （绿色底，白字）
- .btn-warning: 警告 黄底 白字
- .btn-danger: 危险 红底 白字
- .btn-info: 信息 浅蓝底，白字
-
4.不同尺寸按钮的 class
- .btn-lg
- .btn-sm
- .btn-xs
-
- 块级按钮 class
- .btn-block
-
-
4.全局样式-列表
- list-unstyled 不带任何标记的列表
- list-inline 内联列表（行内列表）
-
dl-horizontal 水平 定义列表
-
5.全局样式-图片
-
.img-rounded 圆角图片
-
.img-circle 圆形图片
-
.img-thumbnail 缩略图 外围有层框
- 自带过渡的效果
-
.img-responsive 响应式图片
-
-
6.全局样式-表格
- table-bordered 带边框的表格
- table-striped 隔行变色表格 （tbody）
- table-hover 带鼠标悬停效果的表格
- table-responsive 响应式表格（为表格父元素添加）
-
- 辅助类：
-
关闭按钮：
- ×
-
三角符号：
- 类
-
让内容块居中
-
...
-
-
子主题
-
1网页里能够实现布局的技术
-
div+float
- 好处：效率高
- 不足： 灵活 不控制
-
table布局
- 好处：好控制 简单
- 不足： 效率低
-
-
2 效率高 兼容人员控制的结构， 栅格布局系统
-
- 栅格布局系统
-
好处： 效率高 容易控制 实现响应式
-
不足：none
-
本质：
- 就是由div组成的table样式的响应式结构（使用float布局）
-
4 使用方法：
-
1、栅格布局系统最外层，必须是bootstrap提供的两个容器之一。
- .container
- .container-fluid
-
2、 允许在容器中放置若干个 “行”
- 类： .row,表示一行
-
3、 在行（div.row）中允许放置列,在每行中最多等分成12列 所以在创建列时 要指定 列 的宽度（当前列要几列的宽度）
-
4、列 会根据适用的屏幕分成4种不同的类型
-
类：
- ·1、 .col-xs-* 在超小屏幕中 占*列的宽度 (*代表1~12的数字)
-
-
.col-md-* 同上
-
-
-
.col-sm-* 同上
-
- 4 .col-lg-* 同上
-
-
5.列向右偏移数量：
-
每个列都可以指定向右偏移几列的位置
- .col-xs-offset-n: 在xs 屏幕下 当前咯额要向右偏移 N 个位置
- .col-sm-offset-n: 在 sm 屏幕下 当前咯额要向右偏移 N 个位置
- .col-md-offset-n: 在 md 屏幕下 当前咯额要向右偏移 N 个位置
- .col-lg-offset-n: 在 lg 屏幕下 当前咯额要向右偏移 N 个位置
-
-
-
5 栅格布局系统的嵌套 （列必须放在 row 的里面）
-
.col-- 相当于容器
- 子主题
-
适用于不同屏幕的列的Class(XS/SM/MD/LG)，可以兼容更大的屏幕：
- 小屏幕class可以兼容大屏幕的显示效果：
- .col-xs-6: 在xs/sm/md/lg 都占6列的宽
- 大屏幕的内容class视不能兼容小屏幕的 所以大屏幕的内容放在小屏幕中都是以100%显示的 （纵向排列）
-
可以在一个列div中，指定在不同屏幕下的宽度占比
-
指定 列 在特定屏幕下隐藏。
- .hidden-lg（md/ sm/ xs）: 在lg(md/sm/xs) 屏幕下隐藏
-
-
-
全局样式-表单
-
表单控件与关联的lable（文本）要放在表单控件组中允许包含以下内容：
-
- lable: 标签文本
-
- input : 表单控件元素
-
- 提示文本： 可选的， 提示的内容（ class="help-block"）
-
-
默认表单：
-
效果：
- lable，控件，提示的文本，全部都是纵向排列。
- EX： <div class="form-group> 用户名： 提示文本
-
-
内联表单：
- .sr-only:Sreen Reader Only
-
水平排列表单
-
水平表单=表单+栅格布局系统
-
栅格：
- 最外层： container/ container-fluid
- 行： div.row
- 列： div.col--
-
-
水平表单：
- 最外层： .container / .container-fluid 或
- 行： div.row 或 div.form-group 一个 .form-group就是一行
- 列 ： div.col-- 或 或
-
-
-
- 组件
-
由多个元素组成的一个复杂的结构
-
组件：
-
下拉菜单：
-
结构：
-
将 触发器 和 菜单 包裹在一个 .dropdown 或 .dropup 或 position:relative 的元素中
-
外层元素： dropdown,dropup,position:relative
-
内层元素：
-
触发器
-
菜单
-
由
- 或
-
由 列表 作为菜单时，允许以下列表项增加以下 class 来完成特殊效果：
- li.divider : 分割线
- li.disabled: 禁用菜单项
- li.dropdown-header: 标题
来充当 class="dropdown-menu" -
-
-
-
-
导航：
-
都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
-
标签页：
-
胶囊式标签页：
- HTML 标记相同，但使用 .nav-pills 类： 胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。
- 子主题 2
-
-
图标字体（glyphicon）
-
在页面中，显示为图标 本质是文字。允许为图标设置 字体 颜色 大小 阴影，粗斜体
-
图标字体：
-
- Glyphicons 收费
-
- FontAwesome 免费
-
使用自定义图标字体时，一定要先添加图标字体 然后在使用图标字体 从而保证客户端也会有图标字体文件。
-
***.css @font-face{ 声明一个服务器的字体 }
- @font-face{ font-family:"自定义名称"; src:url('图片字体的路径') ;}
- 子主题 2
-
使用图标字体：
- 选择器 { font-family:"自定义名称“；}
- 1、 创建一个元素，必须保证为 空。
- 2、 让元素的 class="glyphicon glyphicon-*"
-
-
2
-
-
简单组件
-
组件-按钮组
-
作用： 将多个按放在一个组中( btn-group)
-
语法：
-
-
3、按钮组的尺寸
- 为.btn-group 增加 .btn-group-*设置尺寸
- .btn-group-lg:超大号按钮组
- .btn-group-sm: 小号按钮组
- .btn-group-xs: 超小号按钮组
-
- 两端对齐的按钮组
-
5、 垂直显示的按钮组
-
-
组件-警告框
-
所以的警告框都依赖 .alert
-
不同颜色的警告框 增加以下类：
- 子主题 1
-
允许被关闭的警告框：
- 1、警告框元素必须依赖 .alert-dismissible
- 2、 触发器元素 ： data-dismiss="alert" 凡是data开头的 都是用来调用。
-
-
组件-缩略图
-
要配合着栅格系统一起来用 最好将图片设置为 img-responsive
-
基本的缩略图（thumbnail）:
- <a href="#" class="thumbnail>
- <a href="#" class="thumbnail>
-
复杂的缩略图(图片 文字 按钮)
-
文字区域
缩略图标题
-
-
-
组件-媒体对象
- media：
-
-
组件-列表
-
组件-面板
- 允许呈现出 头部 主体 尾部的结构的组件。
-
组件-导航条
-
基本导航条的实现：
- 1、最外层 由div 并且引用 navbar navbar-default两个类选择器来组成。
- 2、nav中必须添加一个 容器 （container/container-fluid）
- 3、 允许在 容器 中 增加网站的品牌或标识内容 将 .navbar-header 的元素放在 容器中即可
- 4 .navbar-header 中的 链接/文字/图片 要引用 .navbar-brand的类选择器
-
导航条中的导航（链接列表）
- 导航条中的导航依赖于 .nav .navbar-nav 即可。
- 子主题 2
-
在导航条中的表单
-
导航条中的表单不适合用 bootstrap提供的表单类 需要为 navbar 中的 增加 class：.navbar-form
-
注意：
- navbar-form 默认是没有浮动的 需要自己手动指定浮动效果
- 透过 navbar-left/ navbar-right 处理左右浮动问题
-
-
导航条中的按钮
-
需要增加样式 .navbar-btn 来处理按钮在导航条中的位置
- 子主题 1
-
-
导航条的文本
- 文本需要增加 navbar-text 来处理文本在导航条中的位置
-
导航条中的浮动方式
- 透过 navbar-left实现左浮动
- 通过 navbar-right 实现右浮动
-
实现导航条的固定
- 为导航条增加以下类，来实现固定效果
- 固定顶端： .navbar-fixed-top
- 固定低端： .navbar-fixed-bottom
- 注意： 最好为 body 设置至少50px的内边距 固定定位脱离文档；流
-
-
-
-
4.JS插件-定义页面内元素的行为（Plugins）
-
插件-提供了一组操作的行为 每种行为基本上都有两种调用方式
-
调用方式：
-
1 data-*
- 向插件中调用行为
- ex: data-toggle="dropdown"
- data-toggle="tab"
- data-dismiss="alert"
-
2、 JS编程方式：通过代码来调用行为
-
-
插件-工具提示：
-
为元素增加以下内容：
- data-toggle="tooltip"/定义鼠标移入的行为/
- title=“提示的文本”
-
-
插件-弹出框：（popover）
-
为元素添加以下内容
- 1、 、data-toggle="popover"
-
- data-placement="top/right/bottom/left"
- 3 title="弹出框标题（可选）"
- 4 data-content="弹出框内容"
- 必须配合JS代码 $("选择器")。popover();
-
-
插件-标签页
-
1、导航部分（nav nav-tabs）
- li 的属性： data-toggle="tab"
- a 的属性： href="#显示的内容"
-
2、内容部分
- 外层：
- 2、 在 tab-content中华包含任意多的内容模块（class="tab-pane"）
-
-
插件-模态对话框
-
1、触发器：
-
可以由 a button 来充当
-
button标记的话
- 1、data-toggle="modal"
- 2.data-target="打开的模态框ID"
-
a
- data-toggle="model"
- href="#打开的模态框ID"
-
-
-
2、模态框
-
1、第一层
-
- 增加 data-backdrop="static"
- 作用： 只能通过关闭按钮关闭对话框 其他方式不能关闭。
-
作用：提供最基本的遮罩层
-
-
2、第二层
- 提供内容区域的尺寸，定位
-
3、第三层
- 提供内容区域的 边框 背景 倒角 阴影
-
4、第四层
-
模态框头部
- 增加关闭按钮：
-
主体
-
定义内容部分
-
-
-
-
插件-Collapse 折叠插件
-
触发器
-
a 元素充当触发器
-
属性：
- 1、 data-toggle="collapse"
- 2/ href="#被折叠元素的ID"
-
-
button 元素充当触发器
-
属性：
- 1、1、 data-toggle="collapse"
- 2、 data-target="#被折叠元素的ID"
-
-
-
被折叠的元素
-
属性：
- 1、class="collapse"
- 2、 id="" ,提供给触发器使用
-
-
2、手风琴- Accordion
-
3、 响应式导航条
-
当屏幕尺寸>=768px时，可以正常显示所有的内容，当<=767时，导航条只显示 品牌 和 按钮（触发器）
-
结构：
-
1、 .navbar-hearder
-
.navbar-brand
- 在任何情况下都会显示的品牌标识
-
.navbar-toggle
- 当屏幕尺寸 >=768 时 不显示
- 当尺寸 <=767 时 显示
-
-
2、 .navbar-collapse
- 被折叠的内容
- 当屏幕尺寸>=768时 正常显示
- <=767时 隐藏，需要通过触发器展开
-
-
-
-
插件-图片轮播 Carousel
-
基本轮播广告
- div class="carousel " data-ride="carousel">
- div class="carousel " data-ride="carousel">
-
指定轮播时间：
- 子主题 1
-
3、 带图片说明文本的轮播
-
说明文本标题
说明文本的内容
-
-
4、带方向按钮的轮播效果
-
5、 带圆点导航的轮播效果：
-
-
-
5.定制-自定义Bootstrap的效果（改源码） 和 less
-
1、 样式语言的分类
-
静态样式语言：
-
CSS
-
可以直接被浏览器处理解析，但css并不是合格的“编程语言”，缺少编程中的最基本的要素：
-
变量
- 子主题 1
-
运算符
-
静态语言的确定：可维护性差
-
-
-
动态样式语言：
- less stylus sass/scss
- 不能直接被浏览器运行：必须经过“编译（compile）”得到一个静态 样式语言（css）,再交给浏览器运行
-
-
2、 Less我、语言
-
官网：
-
是一个预处理语言，必须要要经过编译得到一个CSS文件，再交给浏览器去使用。
-
Less，扩充了CSS，在静态的语言上增加了一部分动态内容。Less中是完全兼容和支持的。
-
在网页中使用的两种方式：
-
1、在客户端浏览器中编译less
- 不推荐
-
- 在服务器端编译less
-
极力推荐。
-
步骤：
-
- 编写 xxx.less
- 2、 搭建 less编译器，将 xxx.less 翻译成 xxx.css
-
- 编写 xxx.html,并且引入 xxx.css
-
-
-
-
搭建less编译器
- 是由JS编写的。
- 1、安装独立的JS的解释器-N0deJS
-
less语法：
-
less 完全支持 CSS语法
-
less中支持的注释有单行注释 和 多行注释
- 多行注释： /* */
- 单行注释： //
- 注意： 只有多行注释会被编译到 CSS 中。
-
less中支持变量（variable）
-
变量： 在less中可以变化的数据，并且该数据可以被其他位置进行引用。
-
语法：
- @变量名：值；
-
变量的使用：
- 选择器{属性名：变量名 }
-
-
less中允许使用运算符
-
-
-
- /
-
-
- 子主题 2
-
-
在less中支持在一组样式中 混入 （mix） 另一组样式
- 选择器1{} 选择器2{........选择器1........}
- 选择器2中会包含选择器1的样式。
-
带参数的混合
-
在声明选择器的时候，允许使用“参数”来表示暂时不确定的数据，在最终混入的时候，将确定的数据传入进来。
-
语法：
- 声明： 选择器1（@参数名）{ 属性名：@参数名； }
- 使用： 选择器2{......选择器1（值）；}
-
-
嵌套：！！！
-
允许早一个选择器 嵌入声明 另一个选择器，以便完成后代 或 子代结构的选择器声明。
-
语法 ：
- 子主题
-
-
函数：
-
在less中表示的是一段独立的功能 。
-
1、 lighten()
-
颜色减淡函数
-
EX：
- color：lighten(#e4393c,30%);
-
-
2、darken()
- 颜色加深函数
- 同上
-
3、 img-width(“url”)
- 计算图片原始真实的宽度
-
- img-height("url")
- 计算指定图像的真实高度。
-
- ceil(number)
- 向上取整 最后得到的是比 number 大的最小整数
- ceil(58.5;) 结果为 59
-
6、 floor(number)
- 向下去整 得到的是比 number小的整数
- floor(58.5); 结果为 58
-
-
文件的导入：
-
可以将其他less文件导入到当前的less文件中。
-
语法：
- @import "xxx.less";
-
-
-
Boostrap定制：
-
按照自己的需求修改bootstrap的源码，以便达成要的效果。
-
结构：
-
Core variables and mixins
- 整个bootsrap中药用到的所有的变量的声明 和混合
-
Reset and dependencies
- 重写 以及 依赖的 文件
-
Core CSS ！！！
- 核心内容 CSS-全局CSS样式声明
-
Componets
- 所有组件 less
- 一个文件对应一个组件
-
Components w/ JavaScript
- 插件
-
Utility classes
- 工具类
-
用谁引入谁 不用就隐藏（注销） 减少CSS代码量
-
-
-
12-VUE.js
day1
-
框架概述 framework
-
什么是框架
- 框架指的是一套非常优秀可被反复使用的代码， 帮助开发者解决一些复杂的问题。 比如jQuery帮助搞定简化DOM操作、老版本浏览器兼容问题
-
框架有啥好处
- 提高了代码的复用率 降低模块之间的耦合度 提高开发速度 提高代码质量
-
-
VueJS概述
-
what
- Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。 另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，Vue也完全能够为复杂的单页应用程序提供驱动
-
Vue的开发模式 和 之前接触的jQuery、原生JSDOM操作是不同的， 之前要想修改视图，首先找元素； 在使用Vue时，专心把精力放在修改数据。 DOM驱动 ---》 数据驱动。
- where - 饿了么 滴滴 阿里巴巴gitlab。。。
实现UI层的渐进式的框架 VueJS可以用在很多地方，从简单的表单验证，到复杂的大型企业应用程序，Vue都可以胜任；核心库是实现UI层的。
- why -①非常好的中文文档 ②学习曲线比较缓和（容易上手） ③速度快 ④体积小 ⑤基于组件化（webcomponent）的开发方式 ⑥代码的可读性、可维护性比较好
- how - cli - #安装nodejsnodejs.org/en/ #全局安装 vue-cli npm install --global vue-cli #创建一个基于 webpack 模板的新项目 vue init webpack my-project #安装依赖，走你 cd my-project npm install npm run dev
- js - 直接下载，引入js文件即可 - 第一个例子 - <!DOCTYPE html>{{msg}}-
双花括号
-
语法
- {{表达式}}
-
作用
- 执行表达式，将表达式的结果 输出到当前调用元素的innerHTML中
-
demo
-
{{car.brand}}
{{3+5}}
-
Vue指令
-
循环指令
-
语法
- 语法1：
-
-
根据in关键词后的集合，去循环创建多个标签， 举例： myList:[100,200,300] {{tmp}}
语法2：
- demo - <!DOCTYPE html><!-- Vue提供了一个循环的指令： v-for --> <ul> <li v-for="tmp in myList"> {{tmp}} </li> </ul> <!-- v-for第二种语法：可以取到临时变量对应的index--> <p v-for="(value,key) in car"> {{"key is "+key+" value is "+value}} </p> <p v-for="(value,key) in myList"> {{"key is "+key+" value is "+value}} </p>- 选择指令 - 语法 - <any v-if="表达式"></any>v-if v-else-if v-else 根据表达式执行的结果的真假 来选择是否要挂载到DOM
- demo - <!DOCTYPE html>{{msg}}
仅会员可见
<p v-if="answer=='a'">A</p> <p v-else-if="answer == 'b'">B</p> <p v-else-if="answer == 'c'">C</p> <p v-else>D</p>- 事件指令 - 语法 - <any v-on:eventName="处理函数名字"></any>通过v-on去给指定的事件绑定一个处理函数
- <button v-on:click="handleClick">clickme</button>//通过@后边跟上事件的名字，和v-on:是一样的效果 <button @click="handleClick">clickme
- 注意事项 - 方法在定义时，要放在Vue实例的methods属性new Vue({ methods:{ handleClick:function(){ //做一些操作 } } })
- demo - <!DOCTYPE html>{{msg}}
clickMe clickMe<select v-on:change="handleChange"> <option value="red">红色</option> <option value="green">绿色</option> <option value="blue">蓝色</option> </select> <form v-on:submit.prevent="handleSubmit"> <input type="checkbox"/>是否同意本站协议 <br/> <button>登录</button> </form>- 其他常用指令 - v-bind - 将变量中的值 通过 v-bind 绑定到元素指定的属性img v-bind:src="myImage" a v-bind:href="myLink" v-bind:style='{backgroundColor:myBGColor}' v-bind:class='{myRed:isRed}' v-bind:disabled="!isValid"
v-bind也支持简写 a v-bind:href="myLink" ===》 a :href="myLink"
- v-show - v-show="表达式" 根据表达式执行的结果的真假 来切换display显示还是隐藏 - <button v-show="hasMore">加载更多</button> <p v-show="!hasMore">没有跟多数据可以加载了</p> - v-html - v-html="变量" 根据变量更新对应的innerHTML - 双向数据绑定指令 - 双向数据绑定：方向1：data --> view 之前所接触的循环、判断、显示隐藏等指令，主要的功能是将数据 绑定到视图； 方式：①双花括号 ②常见的指令
方向2：view --》 data 将表单控件中 用户操作的 结果 绑定到 数据 方式：v-model - demo
- 基础 - <input type='text' v-model=''kw"/>{{kw}}
- 高级 - <input type="text" v-model.lazy="userAddress"/> <p>{{"用户输入的结果为"+userAddress}}</p> <!-- 有两个输入框，一个按钮， 点击按钮时将输入框输入的数据进行求和，将结果输出在控制台--> <input type="number" v-model.number="num1"/> <br/> <input type="number" v-model.number="num2"/> <br/> <button @click="addSum">add</button> <br/> <!-- trim去掉收尾的空白字符--> <input type="text" v-model.trim="myNotes"/> <p>{{myNotes.length}}</p>day2
-
自定义指令
-
步骤
-
创建
- new Vue({ directives:{ change:{ bind:function(){}, update:function(){}, unbind:function(){} } }, data:{ count:10 } })
-
-
bind方法以及update方法 都是有参数的， 一个是el，对应的是调用指令的元素 一个bindings，是一个对象：name/rawName/value/oldValue...
- 使用 - <div v-change='count'></div> - demo - new Vue({directives:{ changeBackgroundColor:{ bind:function(el,bindings){ el.style.backgroundColor = bindings.value } } } })
-
自定义过滤器
-
过滤器：实现数据的筛选、过滤和格式化 就是把数据变的复合页面显示的要求
-
语法
- {{表达式 | myFilter(arg1,arg2)}}
-
创建过滤器
- new Vue({ filters:{ myFilter:function(myInput,arg1,arg2){ return 处理后的结果 } } })
-
-
组件的创建和使用
-
组件是一个可以被反复使用的 带有特定功能的视图
-
组件化的好处
- ①提高开发速度
- ②提高代码的复用率
- ③降低耦合度
- ④提高代码的质量
- ⑤降低测试难度
-
组件的创建
-
Vue.component( 'my-component',{ template:'渲染的元素' } )
-
注意事项：
- 当我们在组件中需要渲染多个元素的时候， 应该将多个元素放在一个容器，否则是有问题的
-
-
使用组件
- 像使用普通的html标签去使用
-
-
复合组件
- 组件树
- 复合组件并不是一个新的概念，就是一个普通的组件 只不过是由其他的组件构成的。
-
组件的生命周期
-
四个阶段
-
create
- beforeCreate
- created
-
mount
- beforeMount
- mounted
-
update
- beforeUpdate
- updated
-
destroy
- beforeDestroy
- destroyed
-
-
demo
-
在组件挂载完毕之后， 启动定时器，来修改组件中元素的透明度
- mounted:function(){ setInterval(function(){ this.opacityValue+=0.1; if(this.opacityValue > 1){ this.opacityValue = 0; } }.bind(this),100) }
-
hello
-
-
-
watch
-
监听数据的变化
-
① 在data中 定义kw
-
②在组件中
-
③使用watch
- Vue.component( 'my-component', { watch:{ kw:function(){ //根据数据的变化做处理 } } } )
-
day3
-
组件间通信
-
props down (父组件 将数据 传递给子组件)
-
步骤1
-
步骤2
- 在子组件接收数据：
Vue.component('son',{
props:['myName','myAge'],
template:
<h1>{{myName}}</h1>})
- 在子组件接收数据：
Vue.component('son',{
props:['myName','myAge'],
template:
-
-
events up (子组件 将数据 传递给父组件)
-
步骤1
- 在父组件 调用 子组件时 通过v-on或者@绑定一个自定义事件 以及 对应的处理函数
- Vue.component('parent',{ methods:{ rcvMsg:function(msg){ //msg就是通过事件传递的数据 } },
-
-
template:'<son @customEvent="rcvMsg">' })
- 步骤2 - Vue.component('son',{mounted:function(){ //在业务需要的时候 通过emit('customEvent',123) } })
- 父子组件通信parent
- $refs - 使用场景：父组件如果要想获取子组件中数据或者方法 - 步骤 - 1、给子组件要指定一个属性- 2、通过引用名字mySon怎么得到子组件的实例？ this.$refs.mySon
- $parent - 在子组件中 获取 父组件的实例中数据或者方法 - 步骤 - this.$parent - 兄弟组件通信 - 兄弟组件通信，可以借助于①一个空的 vue实例 ②event - 步骤 - var bus = new Vue() - 熊大 把 数据 发给 熊二 - 熊二 - bus.$on('msgToXiongEr',function(msg){}) - 熊大 - bus.$emit('msgToXiongEr',20);day4
-
SPA
-
基本概念
- SPA（single page application）,单一页面应用程序， 在一个完整的应用当中，只有一个完整的页面， 其它的都是些代码片段（模板）
-
工作原理
-
①解析url，得到完整页面的地址:index.html 加载过来 ②解析url，得到路由地址：/start ③根据该路由地址 去到路由词典中 查找对应的配置：component/children ④加载对应的页面，显示在一个容器当中
-
通过Vue官方提供的插件 vueRouter来实现SPA
-
1、实现SPA的基本步骤
-
1、引入vue-router.js
-
2、指定一个盛放代码片段的容器
-
3、创建业务所需的各个组件
-
4、配置路由词典
-
方式1
- const myRoutes = [ {path:'/myLogin',component:Login}, {path:'/myRegister,component:Register}, ]
-
-
-
const myRouter = new VueRouter({ routes:myRoutes })
new Vue({ router:myRouter })
- 方式2 - new Vue(){router:new VueRouter({ routes:[ {path:'/login',component:Login} ] }) }
- 5、测试在浏览器，修改路由地址，确认能够按照 我们的配置 去加载指定的组件
- 2、实现跳转的3种方式 - ①直接修改地址栏中的路由地址 - ② js this.$router.push('/myLogin') - ③ router-link
jump
- 3、跳转如何来进行参数的传递 - 1、明确 发送方 接收方 - 2、配置接收方的路由地址 - {path:'/detail',component:MyDetail}--> {path:'/detail/:id',component:MyDetail}
- 3、在接收方 接收数据this.$route.params - 4、发送参数
- ①直接修改地址栏中的路由地址
/detail/10
- ② jsindex=20; this.router.push('/myDetail/'+this.index) - ③ router-link index=20; jump jump
- 4、路由的嵌套 - 现在有一个login（路由地址/login）、mail（路由地址/mail）,希望在mail的页面能够通过一些方式 来将收件箱或者发件箱的内容加载到mail页面中 - 步骤1：
- 需要在mail中的template中指定一个盛放组件的容器
Vue.component('mail',{ template:`
` })- 步骤2 - 给收件箱和发件箱指定对应的路由地址
- new Vue({router:new VueRouter({ routes:[ {path:'/login',component:login}, {path:'/mail',component:mail, children:[ {path:'/inbox',component:Inbox} , {path:'/outbox',component:Outbox} ] } ] })
})
- 5、知识点的扩展 - 返回this.$router.go(-1) - 异常处理 {path:'*',component:NotFound} - 别名 {path:'/list',component:MYLIST,alias:'/lists'} - 重定向 {path:'/userList',redirect:'/list'}
-
vueResource
-
this.$http.get/post
-
demo
- this.$http .get('data/test.json') .then(function (response) { console.log(response); this.myList = response.data; })
-
13_ANGULAR
day1
-
Angular的概述
-
what
- 是Google在09年就推出的js的框架，适用在PC和Mobile
-
when
- 实现SPA，用在数据操作比较频繁的场景
-
why
- ①采用了组件化的开发方式 （提高了代码的复用率 降低了测试难度 提高了开发速度）
- ②增强了代码的可读性和可维护性
- ③angular相比之前的老版本引入了很多新的特性， 比如支持typeScript，是一种强类型检查机制语言，对于面向对象开发 有更好的支持
-
how
-
方式1
- 采用官方提供的angular-cli工具， 进行基于angular项目的创建、开发、打包、部署。。。
-
方式2
- 从google所推出的基于angular的quickstart项目开始着手
-
-
-
组件的创建和使用
-
创建
-
①在src目录app目录，创建一个文件夹
-
②在该文件夹中 创建一个组件（都是**.component.ts）
-
③指定组件内容
- import {Component} from '@angular/core'
-
-
@Component({ selector:'demo01', template:'
Hello Component
' })export class Demo01Component{ }
- 使用 - 步骤1：到模块中声明 - ①在src目录的app目录 找app.module.ts - ②引入对应的组件类import Demo01Component from './demo01/demo01.component' - ③声明 @NgModule({ declarations:[AppComponent,Demo01Component] })
- 步骤2：<demo01></demo01> - 补充 - import和export是es6非常重要的概念， 是实现模块化的必不可少的两个关键词 export 是将当前的文件（类、方法、变量等）导出 （暴露自己的借口） import是将需要用到的模块 引入到当前的模块中 去使用 - es6的新特性，参考阮一峰 es6.ruanyifeng.com/#README - angular是以模块为基本单位，模块是 由各种各样的组件构成的
在使用angular进行开发时，创建的每一个组件 都得在对应的模块中去声明，才可以在该模块中 任何一个组件中去调用
day2
-
设计原则
-
YAGNI
- 不要写 不需要的代码
-
KISS
- 代码越简单越好
- 合理的注释 给变量和方法 命名遵循命名规则 让每一行代码 实现一个单一的功能
-
DRY
- Don't repeat youself
- 要善于进行代码的封装和重用
-
高内聚 低耦合
- 耦合：不同的组件或者不同的模块之间的关系 解耦：降低耦合的过程
-
ocp
-
open closed principle
-
开闭原则
- 开放：扩展 关闭：修改
-
-
最少知识法则
- 封装的功能单位要尽可能的小，只与自己相关
-
SRP
-
single responsibility principle
-
单一责任原则
- 每一个文件或者每一个方法， 就实现一个功能
-
-
-
angular常见的指令
-
循环
- *ngFor
- <any *ngFor="let tmp of list">
-
<any *ngFor="let tmp of list;let myIndex=index">
- 判断 - *ngIf - <any *ngIf="expression"></any> - 多重判断 - *ngSwitchCase - *ngSwitchDefault - demo -- hello lucy
- hello michael
- Hello
- 事件绑定 - 通过圆括号，在圆括号中指定的是触发的事件名字 - <button (click)="">clickMe</button> - 属性绑定 - 调用某些元素时，在指定属性时，如果该值是一个变量，怎么办？ - <any [attribute]=“变量”></any><a [href]="myUrl"> - ngClass
- 动态样式类的绑定 - .myBlue{color:blue }
- @Component({ selector:'demo03', template:'', styleUrls:['./test.css'] })- ngStyle - 完成动态样式的设置 - <p [ngStyle]="{color:myColor}"></p>- 双向数据绑定 - ngModel - 前提 - ngModel指令是由表单模块所提供的，在给大家的模板项目的app.module.ts所创建的模块 默认是没有依赖表单模块的
如果要使用ngModel指令，首先需要当前模块，依赖于表单模块
①找到app.module.ts文件 ②引入表单模块 import {FormsModule } from '@angular/forms' ③指定依赖于表单模块 @NgModule({ imports:[FormsModule] })
- 使用ngModel - 实现了将数据 绑定到了 视图 - <input type='text' [ngModel]="myAddr"/>{{myAddr}}
- 双向数据绑定 - <input type='text' [(ngModel)]="myMsg"/>{{myMsg}}
- 在进行双向数据绑定时，如何来监听数据的变化？ - <input type='text' [(ngModel)]="myMsg"(ngModelChange)="getMsg($event)" />
getMsg(data){ //data就是用户所输入的数据，前提在绑定事件 时，必须指定参数为$event }
- 注意事项 - *ngFor和*ngIf等结构型指令 是不能直接放在一起用通过ng-container来指定，避免出现不必要的html层级 不会影响html结构
day3
-
路由模块
-
1、路由模块的功能
- 路由模块是用来建立起SPA中 url和组件之间的映射关系， 同时支持参数传递、路由嵌套、路由守卫等功能
-
2、angular路由模块基本用法
-
①让appModule支持RouterModule
-
在app目录下，创建一个app.router.ts a-module-routing 创建一个自定义的模块， 是用来实现路由定义和配置的模块
-
到app.module.ts，指定依赖于自定义路由模块
- ①找到app.module.ts
- ②import {AppRoutingModule} from './app.router'
- ③在一个模块中如何指定依赖另一个模块呢？ @NgModule({ imports:[AppRoutingModule] })
-
-
②指定一个盛放组件的容器
-
③创建需要用到的组件
-
④配置路由词典
- 在第一步创建的自定义模块中，有一个对象数组, const routes:Routes = [ //指定了路由地址为空时，要加载的组件 {path:'',component:TestComponent}, {path:'/test',component:TestComponent}, //指定了异常的处理 {path:'**',component:NotFoundComponent}, ]
-
⑤测试
- 保证设置的路由词典已经生效
-
-
3、angular组件跳转的方式
-
①直接修改地址栏
-
②通过js
-
①import {Router} from '@angular/router'
-
②实例化 在构造函数中实例化
- constructor(private myRouter:Router){ }
-
③调用方法实现跳转
- this.myRouter.navigateByUrl('/test')
- this.myRouter.navigate(['/test']);
-
-
③通过属性 routerLink routerLink经常用在a、button上面 来实现基本的导航功能
-
④返回上一页
-
①import {Location} from '@angular/common'
-
②在构造函数中实例化该类
- constructor(private myLocation:Location){ }
-
③ 调用方法
- this.location.back()
-
-
-
4、angular组件参数传递方式
-
方式1 （需要配置接收方路由）
-
①明确发送方 和 接收方
-
②配置接收方的路由地址 {path:'/detail',component:DetailComponent} --> {path:'/detail/:id',component:DetailComponent}
-
③如何接收参数
- import {ActivatedRoute} from '@angular/router'
- constructor(private aRouter:ActivatedRoute){ }
- this.aRouter.params.subscribe(function(data){ console.log(data.id); })
-
④发送参数
- this.myRouter.navigateByUrl('/detail/10')
- <a [routerLink]="'/detail/'+myId">jump
-
-
方式2 （不需要配置接收方路由）
-
①明确发送方 和 接收方
-
②如何接收参数
- import {ActivatedRoute} from '@angular/router'
- constructor(private aRouter:ActivatedRoute){ }
- this.aRouter.params.subscribe(function(data){ console.log(data.id); })
-
③发送参数
- this.myRouter.navigate(['/detail',{id:10}])
- jump
-
-
-
5、angular路由嵌套
-
-
angular整体架构
day4
-
组件间通信
-
props down
-
在父组件中，调用子组件时，是可以通过属性去传值
-
实现的细节
-
①传值
- @Component({
selector:'parent',
template:
<son age="20"></son>})
- @Component({
selector:'parent',
template:
-
②接收值 (在son这个子组件)
-
步骤1
- import {Input} from '@angular/core'
-
步骤2
- @Input() age="";
-
步骤3
-
调用数据
- this.age
-
-
-
-
-
events up
-
实现子组件 和父组件的通信
-
实现的步骤
-
绑定
-
在父组件中定义接收参数的方法
- rcvMsg(data){ //data就是通过事件传递来的数据 }
-
<son (customEvent)="rcvMsg($event)">
-
-
触发
-
步骤1
- import {Output,EventEmitter} from '@angular/core'
-
步骤2
- @Output() customEvent = new EventEmitter()
-
步骤3
- 在需要触发事件的时候，指定：
-
-
-
-
this.customEvent.emit('要发送的数据')
- 本地变量<son #mySon>
- 类似于Vue中ref - 实现细节 - 如果子组件有一个num=10<son #mySon>,
在父组件的模板中，可以直接通过 mySon得到son组件的实例对象
{{"子组件的数据是"+mySon.num}}
在父组件的组件类中的方法中去调用怎么办？ 可以通过方法传值
{{"子组件的数据是"+mySon.num}}
得到子组件实例-
管道
-
管道就是vue中提到的过滤器， 管道其实是一个方法，有参数有返回值的方法，主要是 用来在模板中 对于表达式执行的结果中数据进行筛选、过滤、格式化等处理， 要更符合数据的规范
-
内置管道
-
date/json/uppercase/lowercase/number/currency/percent/slice
-
date实现日期的格式化
- {{myDate | date:'MM-dd'}}
-
json
- {{stu | json}}
-
uppercase/lowercase
- {{stuName | uppercase}}
-
number
- price=3.156
- 准备过滤成03.16 {{price | number:'2.2'}}
-
currency
- price = 1024;
- {{price | currency:'USD':true:'3.2'}}
-
percent
-
slice
- tips = "hello world"
- {{tips|slice:2 }}
-
-
自定义管道类
-
实现细节
-
1、创建一个类 //a-pipe
- import {Pipe,PipeTransform} from '@angular/core'
- @Pipe({ name:'myCurrency' })
- export class CurrencyPipe implements PipeTransform{ transform(value: any, ...args: any[]): any { //必须有返回值 //value管道操作符前面传来的数据
-
-
} }
- 2、在模块中声明该组件类 - import {Demo18Pipe} from '...' -
@NgModel({ delcarations : [Demo18Pipe] })
- 3、调用自定义管道 - {{price | myCurrecny}}-
服务
-
只要是对应应用中逻辑的封装
-
实现的细节
-
创建一个服务类
- //a-service
- import { Injectable } from '@angular/core';
- @Injectable()
-
-
export class MyService{ func1(){
} }
- 使用服务 - import {MyService} from './my.service.ts' - 在组件的元数据指定providers - @Component({providers:[MyService] })
- 实例化 - constructor(private myService:MyService){} - 调用 - this.myService.func1();
-
