jquery介绍
jQuery是目前使用最广泛的javascript函数库
据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库
微软公司甚至把jQuery作为他们的官方库
jQuery的版本分为1.x系列和2.x、3.x系列
1.x系列兼容低版本的浏览器
2.x、3.x系列放弃支持低版本浏览器
目前使用最多的是1.x系列的
jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
jquery的口号和愿望 Write Less, Do More（写得少，做得多）
1、http://jquery.com/官方网站
2、https://code.jquery.com/版本下载
jquery加载
将获取元素的语句写到页面头部，会因为元素还没有加载而出错
jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快
//JS写法
window.onload = function(){
var oDiv = document.getElementById('div');
alert(oDiv.innerHTML);//这是一个div元素
}
//jQuery的完整写法
//比上面JS写法先弹出，因为window.onload是把页面元素加载、渲染完才弹出，而ready()是把所有页面的节点加载完之后就弹出了，不用等渲染了
/*$(document).ready(function(){
var $div = $('#div');
alert('jQuery:' + $div.html());//jQuery:这是一个div元素
})*/
//简写方式
$(function(){
var $div = $('#div');//CSS样式怎么写，这里就怎么写
//html()方法相当于原生JS的innerHTML
alert($div.html() + 'jQuery');
})
jquery选择器
jquery用法思想一
选择某个网页元素，然后对它进行某种操作
jquery选择器
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。
$(document) //选择整个文档对象
$('li') //选择所有的li元素
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('input[name=first]') // 选择name属性等于first的input元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
对选择集进行修饰过滤(类似CSS伪类)
$('#ul1 li:first') //选择id为ul1元素下的第一个li
$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li
$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
对选择集进行函数过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素
选择集转移
$('div').prev('p'); //选择div元素前面的第一个p元素
$('div').prevAll('p'); //选择div元素前面所有的p元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').nextAll('p'); //选择div元素后面所有的p元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素
jQuery选择集转移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择集转移</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
//prev()是同级的上一个元素，prevAll()是同级的上面所有的元素
//next()是同级的下一个元素，nextAll()是同级的下面所有的元素
//修改#div1的下一个元素的样式
$('#div1').next().css({color: 'red'});
//修改#div1的下面所有p标签设置样式
$('#div1').nextAll('p').css({color: 'red'});
//选择上一级的父元素
/*$('#span01').parent().css({
width:'100px',
height:'100px',
background:'gold'
})*/
//获取祖级用$('#span02').parent().parent()不可取，可用closest('div')获取离span02最近的div
//closest可以选择离自己最近的元素，元素可以是父级，也可以是子集
$('#span01').closest('div').css({
width:'200px',
height:'200px',
background:'pink'
})
/*
$('.list li')与$('.list').children()的区别：
原始的选择集不一样
$('.list li')不能通过end()回到父级
$('.list').children()可以通过end()回到父级
*/
$('.list').children().css({
background:'gold',
height:'30px',
marginBottom:'10px'
}).end().css({
background:'green'
})
//eq(2)是选择索引等于2的第三个li，siblings()表示除第三个之外的其它兄弟li
$('.list2 li:eq(2)').css({background:'gold'}).siblings().css({background:'green'});
//find()是选择div内的class等于link1的元素
$('#div2').find('.link1').css({color:'red'});
})
jquery样式操作
jquery用法思想二
同一个函数完成取值和赋值
操作行间样式
// 获取div的样式
$("div").css("width");
$("div").css("color");
//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。
操作样式类名
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
jquery属性操作
1、html() 取出或设置html内容
// 取出html内容
var $htm = $('#div1').html();
// 设置html内容
$('#div1').html('<span>添加文字</span>');
2、text() 取出或设置text内容
// 取出文本内容
var $htm = $('#div1').text();
// 设置文本内容
$('#div1').text('<span>添加文字</span>');
3、attr() 取出或设置某个属性的值
// 取出图片的地址
var $src = $('#img1').attr('src');
// 设置图片的地址和alt属性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });
绑定click事件
给元素绑定click事件，可以用如下方法：
$('#btn1').click(function(){
// 内部的this指的是原生对象
// 使用jquery对象用 $(this)
})
jquery特殊效果
fadeIn() 淡入
$btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});
});
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展示或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
jquery链式调用
jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：
$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素，也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素
jquery动画
通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。
$('#div1').animate({
width:300,
height:300
},1000,swing,function(){
alert('done!');
});
参数可以写成数字表达式：
$('#div1').animate({
width:'+=100',
height:300
},1000,swing,function(){
alert('done!');
});
尺寸相关、滚动事件
1、获取和设置元素的尺寸
width()、height() 获取元素width和height
innerWidth()、innerHeight() 包括padding的width和height
outerWidth()、outerHeight() 包括padding和border的width和height
outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
2、获取元素相对页面的绝对位置
offset()
3、获取可视区高度
$(window).height();
4、获取页面高度
$(document).height();
5、获取页面滚动距离
$(document).scrollTop();
$(document).scrollLeft();
6、页面滚动事件
$(window).scroll(function(){
......
})
jquery事件
事件函数列表：
blur() 元素失去焦点
focus() 元素获得焦点
change() 表单元素的值发生变化
click() 鼠标单击
dblclick() 鼠标双击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
mouseup() 松开鼠标
mousedown() 按下鼠标
mousemove() 鼠标在元素内部移动
keydown() 按下键盘
keypress() 按下键盘
keyup() 松开键盘
load() 元素加载完毕
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
select() 用户选中文本框中的内容
submit() 用户递交表单
toggle() 根据鼠标点击的次数，依次运行多个函数
unload() 用户离开页面
绑定事件的其他方式
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html());
});
});
取消绑定事件
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html());
// $(this).unbind();
$(this).unbind('mouseover');
});
});
主动触发与自定义事件
主动触发
可使用jquery对象上的trigger方法来触发对象上绑定的事件。
自定义事件
除了系统事件外，可以通过bind方法自定义事件，然后用trigger方法触发这些事件。
//给element绑定hello事件
element.bind("hello",function(){
alert("hello world!");
});
//触发hello事件
element.trigger("hello");
事件冒泡
什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件）
如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序
如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播
从里到外，直至它被处理（父级对象所有同类事件都将被激活）
或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）
事件冒泡的作用
事件冒泡允许多个操作被集中处理
(把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上)
它还可以让你在对象层的不同级别捕获事件
阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止
$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
$(document).click(function(event) {
alert('grandfather');
});
})
......
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>
阻止默认行为
阻止右键菜单
$(document).contextmenu(function(event) {
event.preventDefault();
});
合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用
// event.stopPropagation();
// event.preventDefault();
// 合并写法：
return false;
事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作
事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作
一般绑定事件的写法
$(function(){
$ali = $('#list li');
$ali.click(function(event) {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
事件委托的写法
$(function(){
$list = $('#list');
$list.delegate('li', 'click', function(event) {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
取消事件委托
// ev.delegateTarge 委托对象
$(ev.delegateTarge).undelegate();
// 上面的例子可使用 $list.undelegate();
jquery元素节点操作
创建节点
var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');
插入节点
1、append()和appendTo()：在现存元素的内部，从后面插入元素
var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>
2、prepend()和prependTo()：在现存元素的内部，从前面插入元素
3、after()和insertAfter()：在现存元素的外部，从后面插入元素
4、before()和insertBefore()：在现存元素的外部，从前面插入元素
删除节点
$('#div1').remove();
滚轮事件与函数节流
jquery.mousewheel插件使用
jquery中没有鼠标滚轮事件
原生js中的鼠标滚轮事件不兼容
可以使用jquery的滚轮事件插件jquery.mousewheel.js
函数节流
javascript中有些事件的触发频率非常高
比如onresize事件(jq中是resize)
onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件
在短事件内多处触发执行绑定的函数
可以巧妙地使用定时器来减少触发的次数，实现函数节流
整屏滚动实例
json
json是 JavaScript Object Notation 的首字母缩写
单词的意思是javascript对象表示法
这里说的json指的是类似于javascript对象的一种数据格式
目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式
javascript对象字面量：
var tom = {
name:'tom',
age:18
}
json格式的数据：
{
"name":'tom',
"age":18
}
与json对象不同的是，json数据格式的属性名称需要用双引号引起来
用单引号或者不用引号会导致读取数据错误
json的另外一个数据格式是数组
和javascript中的数组字面量相同
['tom',18,'programmer']
ajax与jsonp
ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息
ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信
ajax通信的过程不会影响后续javascript的执行，从而实现异步
同步和异步
现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事
程序中的同步和异步是把现实生活中的概念对调
也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步
局部刷新和无刷新
ajax可以实现局部刷新，也叫做无刷新
无刷新指的是整个页面不刷新，只是局部刷新
ajax可以自己发送http请求，不用通过浏览器的地址栏
所以页面整体不会刷新，ajax获取到后台数据，
更新页面显示数据的部分，就做到了页面局部刷新
同源策略
ajax请求的页面或资源只能是同一个域下面的资源
不能是其他域的资源，这是在设计ajax时基于安全的考虑
特征报错提示：
XMLHttpRequest cannot load https://www.baidu.com/. No
'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.
$.ajax使用方法
常用参数：
1、url 请求地址
2、type 请求方式，默认是'GET'，常用的还有'POST'
3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是'true'，表示异步
以前的写法：
$.ajax({
url: 'js/user.json',
type: 'GET',
dataType: 'json',
data:{'aa':1}
success:function(data){
......
},
error:function(){
alert('服务器超时，请重试！');
}
});
新的写法(推荐)：
$.ajax({
url: 'js/user.json',
type: 'GET',
dataType: 'json',
data:{'aa':1}
})
.done(function(data) {
......
})
.fail(function() {
alert('服务器超时，请重试！');
});
jsonp
ajax只能请求同一个域下的数据或资源
有时候需要跨域请求数据
就需要用到jsonp技术
jsonp可以跨域请求数据
它的原理主要是利用了script标签可以跨域链接资源的特性
jsonp的原理如下：
<script type="text/javascript">
function aa(dat){
alert(dat.name);
}
</script>
<script type="text/javascript" src="....../js/data.js"></script>
页面上定义一个函数，引用一个外部js文件，外部js文件的地址可以是不同域的地址，外部js文件的内容如下：
aa({"name":"tom","age":18});
外部js文件调用页面上定义的函数，通过参数把数据传进去
正则表达式
1、什么是正则表达式：
能让计算机读懂的字符串匹配规则
2、正则表达式的写法：
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;
3、规则中的字符
1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’
2）转义字符匹配：
\d 匹配一个数字，即0-9
\D 匹配一个非数字，即除了0-9
\w 匹配一个单词字符（字母、数字、下划线）
\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s 匹配一个空白符
\S 匹配一个非空白符
\b 匹配单词边界
\B 匹配非单词边界
. 匹配一个任意字符，除了换行符‘\n’和回车符‘\r’
\1 重复子项
4、量词：对左边的匹配字符定义个数
? 出现零次或一次（最多出现一次），或指明一个非贪婪限定符
+ 出现一次或多次（至少出现一次）
* 出现零次或多次（任意次）
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次
5、任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符
6、限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结尾
7、修饰参数：
g： global，全文搜索，默认搜索到第一个结果接停止
i： ingore case，忽略大小写，默认大小写敏感
m： multiple lines，
多行搜索
(更改^ 和$的含义，使它们分别在任意一行对待行首和行尾匹配，而不仅仅在整个字符串的开头和结尾匹配）
8、常用函数
test
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假
search
用法：字符串.search(正则) 匹配成功，返回位置，否则返回-1
match
用法： 字符串.match(正则)；匹配成功，就返回匹配成功的数组，否则就返回null
replace
用法：字符串.replace(正则，新的字符串) 匹配成功的字符去替换新的字符
正则默认规则
匹配成功就结束，不会继续匹配，区分大小写
*、+限定符都是贪婪的，因为它们会尽可能多的匹配文字，只有在它们的后面加上一个?就可以实现非贪婪或最小匹配。
例如，您可能搜索 HTML 文档，以查找括在 H1 标记内的章节标题。该文本在您的文档中如下：
<H1>Chapter 1 - 介绍正则表达式</H1>
贪婪：下面的表达式匹配从开始小于号 (<) 到关闭 H1 标记的大于号 (>) 之间的所有内容
/<.*>/
非贪婪：如果您只需要匹配开始和结束 H1 标签，下面的非贪婪表达式只匹配<H1>
/<.*?>/
如果只想匹配开始的 H1 标签，表达式则是：
/<\w+?>/
通过在 *、+ 或 ? 限定符之后放置 ?，该表达式从"贪心"表达式转换为"非贪心"表达式或者最小匹配
本地存储
本地存储分为cookie，以及新增的localStorage和sessionStorage
cookie
存储在本地，容量最大4k，在同源的http请求时携带传递
损耗带宽，可设置访问路径
只有此路径及此路径的子路径才能访问此cookie
在设置的过期时间之前有效
jquery 设置cookie
$.cookie('mycookie','123',{expires:7,path:'/'});
jquery 获取cookie
$.cookie('mycookie');
localStorage
存储在本地，容量为5M或者更大，不会在请求时候携带传递
在所有同源窗口中共享
数据一直有效，除非人为删除，可作为长期数据
//设置：
localStorage.setItem("dat", "456");
localStorage.dat = '456';
//获取：
localStorage.getItem("dat");
localStorage.dat
//删除
localStorage.removeItem("dat");
sessionStorage
存储在本地，容量为5M或者更大
不会在请求时候携带传递，在同源的当前窗口关闭前有效
localStorage 和 sessionStorage
合称为Web Storage
Web Storage支持事件通知机制
可以将数据更新的通知监听者
Web Storage的api接口使用更方便
iPhone的无痕浏览不支持Web Storage，只能用cookie
jqueryUI
jQuery UI是以 jQuery 为基础的代码库
包含底层用户交互、动画、特效和可更换主题的可视控件
我们可以直接用它来构建具有很好交互性的web应用程序
jqueryUI 网址
常用jqueryUI插件：
Draggable
1、设置数值的滑动条
2、自定义滚动条
移动端js事件
移动端的操作方式和PC端是不同的，移动端主要用手指操作
所以有特殊的touch事件，touch事件包括如下几个事件：
1、touchstart: //手指放到屏幕上时触发
2、touchmove: //手指在屏幕上滑动式触发
3、touchend: //手指离开屏幕时触发
4、touchcancel: //系统取消touch事件的时候触发，比较少用
移动端一般有三种操作，点击、滑动、拖动
这三种操作一般是组合使用上面的几个事件来完成的
所有上面的4个事件一般很少单独使用
一般是封装使用来实现这三种操作
可以使用封装成熟的js库
zeptojs
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api
如果你会用jquery，那么你也会用zepto
Zepto的一些可选功能是专门针对移动端浏览器的
它的最初目标是在移动端提供一个精简的类似jquery的js库
zepto官网：http://zeptojs.com/
zepto中文api：http://www.css88.com/doc/zeptojs_api/
zepto包含很多模块
默认下载版本包含的模块有Core, Ajax, Event, Form, IE模块
如果还需要其他的模块，可以自定义构建
zepto自定义构建地址：http://github.e-sites.nl/zeptobuilder/
touch模块封装了针对移动端常用的事件
可使用此模块进行移动端特定效果开发
这些事件有：
tap 元素tap的时候触发，此事件类似click，但是比click快
longTap 当一个元素被按住超过750ms触发
swipe, swipeLeft, swipeRight, swipeUp, swipeDown 当元素被划过时触发
(可选择给定的方向)
swiper
swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件
一般用来触屏焦点图、触屏整屏滚动等效果
swiper分为2.x版本和3.x版本，2.x版本支持低版本浏览器(IE7)
3.x放弃支持低版本浏览器，适合应用在移动端
2.x版本中文网址：http://2.swiper.com.cn/
3.x版本中文网地址：http://www.swiper.com.cn/
swiper使用方法：
<script type="text/javascript" src="js/swiper.min.js"></script>
......
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
......
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
initialSlide :1,
paginationClickable: true,
loop: true,
autoplay:3000,
autoplayDisableOnInteraction:false
});
</script>
swiper使用参数：
1、initialSlide：初始索引值，从0开始
2、direction：滑动方向 horizontal | vertical
3、speed：滑动速度，单位ms
4、autoplay：设置自动播放及播放时间
5、autoplayDisableOnInteraction：用户操作swipe后是否还自动播放，默认是true，不再自动播放
6、pagination：分页圆点
7、paginationClickable：分页圆点是否点击
8、prevButton：上一页箭头
9、nextButton：下一页箭头
10、loop：是否首尾衔接
11、onSlideChangeEnd：回调函数，滑动结束时执行
swiper制作实例：
1、swiper制作移动端焦点图实例
2、swiper制作整页滚动效果
bootstrap
简单、直观、强悍的前端开发框架，让web开发更迅速、简单
来自Twitter，是目前很受欢迎的前端框架之一
Bootrstrap是基于HTML、CSS、JavaScript的，让书写代码更容易
移动优先，响应式布局开发
bootstrap中文网址：http://www.bootcss.com/
bootstrap 容器
container-fluid 流体
container
1170
970
750
100%
bootstrap 栅格系统
bootstrap将页面横向分为12等分
按照12等分定义了适应不同宽度等分的样式类
这些样式类组成了一套响应式、移动设备优先的流式栅格系统：
1、col-lg-
2、col-md-
3、col-sm-
4、col-xs-
bootstrap响应式查询区间：
1、大于等于768
2、大于等于992
3、大于等于1200
bootstrap 表单
1、form 声明一个表单域
2、form-inline 内联表单域
3、form-horizontal 水平排列表单域
4、form-group 表单组、包括表单文字和表单控件
5、form-control 文本输入框、下拉列表控件样式
6、checkbox checkbox-inline 多选框样式
7、radio radio-inline 单选框样式
8、input-group 表单控件组
9、input-group-addon 表单控件组物件样式10、input-group-btn 表单控件组物件为按钮的样式
10、form-group-lg 大尺寸表单
11、form-group-sm 小尺寸表单
bootstrap 按钮
1、btn 声明按钮
2、btn-default 默认按钮样式
3、btn-primay
4、btn-success
5、btn-info
6、btn-warning
7、btn-danger
8、btn-link
9、btn-lg
10、btn-md
11、btn-xs
12、btn-block 宽度是父级宽100%的按钮
13、active
14、disabled
15、btn-group 定义按钮组
bootstrap 图片
img-responsive 声明响应式图片
bootstrap 隐藏类
1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg
bootstrap 字体图标
通过字体代替图标，font文件夹需要和css文件夹在同一目录
bootstrap 下拉菜单
1、dropdown-toggle
2、dropdown-menu
bootstrap 选项卡
1、nav
2、nav-tabs
3、nav-pills
4、tab-content
bootstrap 导航条
1、navbar 声明导航条
2、navbar-default 声明默认的导航条样式
3、navbar-inverse 声明反白的导航条样式
4、navbar-static-top 去掉导航条的圆角
5、navbar-fixed-top 固定到顶部的导航条
6、navbar-fixed-bottom 固定到底部的导航条
7、navbar-header 申明logo的容器
8、navbar-brand 针对logo等固定内容的样式
11、nav navbar-nav 定义导航条中的菜单
12、navbar-form 定义导航条中的表单
13、navbar-btn 定义导航条中的按钮
14、navbar-text 定义导航条中的文本
9、navbar-left 菜单靠左
10、navbar-right 菜单靠右
bootstrap 模态框
1、modal 声明一个模态框
2、modal-dialog 定义模态框尺寸
3、modal-lg 定义大尺寸模态框
4、modal-sm 定义小尺寸模态框
5、modal-header
6、modal-body
7、modal-footer
less、sass、stylus
它们是三种类似的样式动态语言，属于css预处理语言
它们有类似css的语法
为css赋予了动态语言的特性、如变量、继承、运算、函数等
这么做是为了css的编写和维护
它们使用的文件分别是：.less、.scss、*.styl
这些文件是不能再网页上直接使用的
最终要编译成css文件来使用
编译的方法有软件编译，或者用nodejs程序
less、sass编译软件：
http://koala-app.com/index-zh.html
less中文网址：http://lesscss.cn/
less语法：
1、注释
// 不会被编译的注释
/* 会被编译的注释 */
2、变量
@w:200px;
.box{
width:@w;
height:@w;
background-color:red;
}
3、混合
.border{
border:1px solid #ddd;
}
.box(@w:100px,@h:50px,@bw:1px){
width:@w;
height:@h;
border:@bw solid #ddd;
}
.box{
.border;
background-color:red;
}
4、匹配模式
.p(r){
postion:relative;
}
.p(a){
postion:absolute;
}
.p(f){
postion:fixed;
}
.box{
.p(f);
}
5、运算
@w:300px;
.box{
width:@w+20;
}
4、嵌套
.list{
li{
...
}
a{
...
&:hover{
...
}
}
span{
...
}
}
5、导入
// 导入common.less,导入a.css文件
@import "common";
@import (less) "a.css";
前端自动化
Node.js
Node.js可以理解为是一门后端脚本语言
使用了和JavaScript相同的语法
会使用JavaScript的程序员能很快上手node.js、nodjs在处理高并发方面性能卓越
目前许多公司都在使用nodejs作为后端数据服务和前端开发的中间层
node.js的中文网站：https://nodejs.org/zh-cn/
前端自动化
前端开发的流程越来越复杂，其中有代码的合并和压缩、图片的压缩
对less、sass的预处理；文件操作等
这些工作是重复乏味的，为了优化开发流程，提高工作效率，前端自动化工具就出现了
自动化工具可以通过配置，自动完成这些工作
grunt、gulp
grunt和gulp是使用node.js编写的
前端首选的自动化工具
gulp在书写配置上比grunt更简洁
运行的性能更高，gulp逐渐成为主流
gulp的使用
gulp使用步骤：
安装nodejs ->全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务gulp网站：
常用gulp插件：
压缩js代码（gulp-uglify）
less的编译（gulp-less）
css的压缩 （gulp-minify-css）
自动添加css3前缀（gulp-autoprefixer）
文件改名字 (gulp-rename)
前端性能优化
从用户访问资源到资源完整的展现在用户面前的过程中
通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度
网站的性能直接会影响到用户的数量，所有前端性能优化很重要
前端性能优化分为如下几个方面：
一、代码部署：
1、代码的压缩与合并
2、图片、js、css等静态资源使用和主站不同域名地址存储
从而使得在传输资源时不会带上不必要的cookie信息
3、使用内容分发网络 CDN
4、为文件设置Last-Modified、Expires和Etag
5、使用GZIP压缩传送
6、权衡DNS查找次数(使用不同域名会增加DNS查找)
7、避免不必要的重定向(加"/")
二、编码
html：
1、使用结构清晰，简单，语义化标签
2、避免空的src和href
3、不要在HTML中缩放图片
css：
1、精简css选择器2、把CSS放到顶部
3、避免@import方式引入样式
4、css中使用base64图片数据取代图片文件，减少请求数
在线转base64网站：http://tool.css-js.com/base64.html
5、使用css动画来取代javascript动画
6、使用字体图标,图标库网站：http://fontawesome.io/icons/，在线制作网站：www.iconfont.cn
7、使用css sprite
8、使用svg图形
9、避免使用CSS表达式
a {star : expression(onfocus=this.blur)}
10、避免使用滤镜
javascript：
1、减少引用库的个数
2、使用requirejs或seajs异步加载js
3、JS放到页面底部引入
4、避免全局查找
5、减少属性查找
6、使用原生方法
7、用switch语句代替复杂的if else语句
8、减少语句数，比如说多个变量声明可以写成一句
9、使用字面量表达式来初始化数组或者对象
10、使用DocumentFragments或innerHTML取代复杂的元素注入
11、使用事件代理(事件委托)
12、避免多次访问dom选择集
13、高频触发事件设置使用函数节流，如：onmousemove、onmouseover
14、使用Web Storage缓存数据
15、使用Array的join方法来代替字符串的“+”连接(先将要连接的字符串放进数组)
课程介绍
ECMAScript理解
1. 它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范
2. 而我们学的 JavaScript 是ECMA的实现,但术语ECMAScript和JavaScript平时表达同一个意思
3. JS包含三个部分：
1). ECMAScript（核心）
2). 扩展==>浏览器端
* BOM（浏览器对象模型）
* DOM（文档对象模型）
3). 扩展==>服务器端
* Node
4. ES的几个重要版本
* ES5 : 09年发布
* ES6(ES2015) : 15年发布, 也称为ECMA2015
* ES7(ES2016) : 16年发布, 也称为ECMA2016 (变化不大)
ES5
严格模式
1. 理解:
* 除了正常运行模式(混杂模式)，ES5添加了第二种运行模式："严格模式"（strict mode）
* 顾名思义，这种模式使得Javascript在更严格的语法条件下运行
2. 目的/作用
* 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
* 消除代码运行的一些不安全之处，为代码的安全运行保驾护航
* 为未来新版本的Javascript做好铺垫
3. 使用
* 在全局或函数的第一条语句定义为: 'use strict';
* 如果浏览器不支持, 只解析为一条简单的语句, 没有任何副作用
4. 语法和行为改变
* 必须用var声明变量
* 禁止自定义的函数中的this指向window
* 创建eval作用域
* 对象不能有重名的属性
JSON对象
1. JSON.stringify(obj/arr)
* js对象(数组)转换为json对象(数组)
2. JSON.parse(json)
* json对象(数组)转换为js对象(数组)
Object扩展
ES5给Object扩展了一些静态方法, 常用的2个:
1. Object.create(prototype, [descriptors])
* 作用: 以指定对象为原型创建新的对象
* 为新的对象指定新的属性, 并对属性进行描述
- value : 指定值
- writable : 标识当前属性值是否是可修改的, 默认为false
- configurable: 标识当前属性是否可以被删除 默认为false
- enumerable： 标识当前属性是否能用for in 枚举 默认为false
2. Object.defineProperties(object, descriptors)
* 作用: 为指定对象定义扩展多个属性
- get ：用来获取当前属性值得回调函数
- set ：修改当前属性值得触发的回调函数，并且实参即为修改后的值
* 存取器属性：setter,getter一个用来存值，一个用来取值
Array扩展
1. Array.prototype.indexOf(value) : 得到值在数组中的第一个下标
2. Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标
3. Array.prototype.forEach(function(item, index){}) : 遍历数组
4. Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组，返回加工之后的值
5. Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组， 返回条件为true的值
Function扩展
1. Function.prototype.bind(obj) :
* 作用: 将函数内的this绑定为obj, 并将函数返回
2. 面试题: 区别bind()与call()和apply()?
* 都能指定函数中的this
* call()/apply()是立即调用函数
* bind()是将函数返回
ES6
let关键字
1. 作用:
* 与var类似, 用于声明一个变量
2. 特点
* 在块作用域内有效
* 不能重复声明
* 不会预处理, 不存在变量提升
3. 应用
* 循环遍历加监听
* 使用let取代var是趋势
const关键字
1. 作用:
* 定义一个常量
2. 特点:
* 不能修改
* 其它特点同let
3. 应用
* 保存不用改变的数据
变量的解构赋值
1. 理解:
* 从对象或数组中提取数据, 并赋值给变量(多个)
2. 对象的解构赋值
let {n, a} = {n:'tom', a:12}
3. 数组的解构赋值
let [a,b] = [1, 'hello'];
4. 用途
* 给多个形参赋值
模板字符串
1. 模板字符串 : 简化字符串的拼接
* 模板字符串必须用 `` 包含
* 变化的部分使用${xxx}定义
简化的对象写法
1. 省略同名的属性值
2. 省略方法的function
3. 例如:
let x = 1;
let y = 2;
let point = {
x,
y,
setX (x) {this.x = x}
};
箭头函数
1. 作用: 定义匿名函数
2. 基本语法:
* 没有参数: () => console.log('xxxx')
* 一个参数: i => i+2
* 大于一个参数: (i,j) => i+j
* 函数体不用大括号: 默认返回结果
* 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回
3. 使用场景: 多用来定义回调函数
4. 箭头函数的特点：
1、简洁
2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候所处的对象就是它的this
3、扩展理解： 箭头函数的this看外层的是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window。
扩展运算符
1. rest(可变)参数
* 用来取代arguments 但比 arguments 灵活,只能是最后部分形参参数
function fun(...values) {
console.log(arguments);
arguments.forEach(function (item, index) {
console.log(item, index);
});
console.log(values);
values.forEach(function (item, index) {
console.log(item, index);
})
}
fun(1,2,3);
2. 扩展运算符
let arr1 = [1,3,5];
let arr2 = [2,...arr1,6];
arr2.push(...arr1);
形参默认值
当不传入参数的时候默认使用形参里的默认值
function Point(x = 1,y = 2) {
this.x = x;
this.y = y;
}
Promise对象
1. 理解:
* Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
* 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
* ES6的Promise是一个构造函数, 用来生成promise对象的实例
2. 使用promise基本步骤(2步):
* 创建promise对象
let promise = new Promise((resolve, reject) => {
//初始化promise状态为 pending
//执行异步操作
if(异步操作成功) {
resolve(value);//修改promise的状态为fullfilled
} else {
reject(errMsg);//修改promise的状态为rejected
}
})
* 调用promise的then()
promise.then(function(
result => console.log(result),
errorMsg => alert(errorMsg)
))
3. promise对象的3个状态
* pending: 初始化状态
* fullfilled: 成功状态
* rejected: 失败状态
4. 应用:
* 使用promise实现超时处理
* 使用promise封装处理ajax请求
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
}
request.responseType = 'json';
request.open("GET", url);
request.send();
5. promise过程分析:
Symbol
1. 前言：ES5中对象的属性名都是字符串，容易造成重名，污染环境
2. 概念：ES6中的添加了一种原始数据类型symbol(已有的原始数据类型：String, Number, boolean, null, undefined, 对象)
3. 特点：
1、Symbol属性对应的值是唯一的，解决命名冲突问题
2、Symbol值不能与其他数据进行计算，包括同字符串拼串
3、for in, for of遍历时不会遍历symbol属性
4. 使用：
1、调用Symbol函数得到symbol值
let symbol = Symbol();
let obj = {};
obj[symbol] = 'hello';
2、传参标识
let symbol = Symbol('one');
let symbol2 = Symbol('two');
console.log(symbol);// Symbol('one')
console.log(symbol2);// Symbol('two')
3、内置Symbol值
* 除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法
- Symbol.iterator
* 对象的Symbol.iterator属性，指向该对象的默认遍历器方法
Iterator遍历器
概念： iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制
作用：
1、为各种数据结构，提供一个统一的、简便的访问接口；
2、使得数据结构的成员能够按某种次序排列
3、ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费
工作原理：
- 创建一个指针对象(遍历器对象)，指向数据结构的起始位置
- 第一次调用next方法，指针自动指向数据结构的第一个成员
- 接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员
- 每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值}
* value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束
* 当遍历结束的时候返回的value值是undefined，done值为false
原生具备iterator接口的数据(可用for of遍历)
1、Array
2、arguments
3、set容器
4、map容器
5、String
……
Generator函数
概念：
1、ES6提供的解决异步编程的方案之一
2、Generator函数是一个状态机，内部封装了不同状态的数据
3、用来生成遍历器对象
4、可暂停函数(惰性求值), yield可暂停，next方法可启动。每次返回的是yield后的表达式结果
特点：
1、function 与函数名之间有一个星号
2、内部用yield表达式来定义不同的状态
例如：
function* generatorExample(){
let result = yield 'hello'; // 状态值为hello
yield 'generator'; // 状态值为generator
}
3、generator函数返回的是指针对象(即iterator)，而不会执行函数内部逻辑
4、调用next方法函数内部逻辑开始执行，遇到yield表达式停止，返回{value: yield后的表达式结果/undefined, done: false/true}
5、再次调用next方法会从上一次停止时的yield处开始，直到最后
6、yield语句返回结果通常为undefined，当调用next方法时传参内容会作为启动时yield语句的返回值
async函数
async函数(源自ES2017)
概念： 真正意义上去解决异步回调的问题，同步流程表达异步操作
本质： Generator的语法糖
语法：
async function foo(){
await 异步操作;
await 异步操作；
}
特点：
1、不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行
2、返回的总是Promise对象，可以用then方法进行下一步操作
3、async取代Generator函数的星号*，await取代Generator的yield
4、语意上更为明确，使用简单，经临床验证，暂时没有任何副作用
class
1. 通过class定义类/实现类的继承
2. 在类中通过constructor定义构造方法
3. 通过new来创建类的实例
4. 通过extends来实现类的继承
5. 通过super调用父类的构造方法
6. 重写从父类中继承的一般方法
字符串扩展
1. includes(str) : 判断是否包含指定的字符串
2. startsWith(str) : 判断是否以指定字符串开头
3. endsWith(str) : 判断是否以指定字符串结尾
4. repeat(count) : 重复指定次数
数值扩展
1. 二进制与八进制数值表示法: 二进制用0b, 八进制用0o
2. Number.isFinite(i) : 判断是否是有限大的数
3. Number.isNaN(i) : 判断是否是NaN
4. Number.isInteger(i) : 判断是否是整数
5. Number.parseInt(str) : 将字符串转换为对应的数值
6. Math.trunc(i) : 直接去除小数部分
数组扩展
1. Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
2. Array.of(v1, v2, v3) : 将一系列值转换成数组
3. find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
4. findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
对象扩展
1. Object.is(v1, v2)
* 判断2个数据是否完全相等
2. Object.assign(target, source1, source2..)
* 将源对象的属性复制到目标对象上
3. 直接操作 __proto__ 属性
let obj2 = {};
obj2.__proto__ = obj1;
深度克隆
1、数据类型：
* 数据分为基本的数据类型(String, Number, boolean, Null, Undefined)和对象数据类型
- 基本数据类型特点： 存储的是该对象的实际数据
- 对象数据类型特点： 存储的是该对象在栈中引用，真实的数据存放在堆内存里
2、复制数据
- 基本数据类型存放的就是实际的数据，可直接复制
let number2 = 2;
let number1 = number2;
- 克隆数据：对象/数组
1、区别： 浅拷贝/深度拷贝
判断： 拷贝是否产生了新的数据还是拷贝的是数据的引用
知识点：对象数据存放的是对象在栈内存的引用，直接复制的是对象的引用
let obj = {username: 'kobe'}
let obj1 = obj; // obj1 复制了obj在栈内存的引用
2、常用的拷贝技术
1). arr.concat(): 数组浅拷贝
2). arr.slice(): 数组浅拷贝
3). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据
4). 浅拷贝包含函数数据的对象/数组
5). 深拷贝包含函数数据的对象/数组
Set和Map数据结构
1. Set容器 : 无序不可重复的多个value的集合体
* Set()
* Set(array)
* add(value)
* delete(value)
* has(value)
* clear()
* size
2. Map容器 : 无序的 key不重复的多个key-value的集合体
* Map()
* Map(array)
* set(key, value)//添加
* get(key)
* delete(key)
* has(key)
* clear()
* size
for_of循环
for(let value of target){}循环遍历
1. 遍历数组
2. 遍历Set
3. 遍历Map
4. 遍历字符串
5. 遍历伪数组
ES7
1. 指数运算符(幂): **
2. Array.prototype.includes(value) : 判断数组中是否包含指定value
Vue 的基本认识
官网
1）英文官网:https://vuejs.org/
2）中文官网:https://cn.vuejs.org/
介绍描述
1）渐进式 JavaScript 框架
2）作者: 尤雨溪(一位华裔前 Google 工程师)
3）作用: 动态构建用户界面
Vue 的特点
1）遵循 MVVM 模式
2）编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
3）它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目
与其它前端 JS 框架的关联
1）借鉴 angular 的模板和数据绑定技术
2）借鉴 react 的组件化和虚拟 DOM 技术
Vue 扩展插件
1）vue-cli: vue 脚手架
2）vue-resource(axios): ajax 请求
3）vue-router: 路由
4）vuex: 状态管理
5）vue-lazyload: 图片懒加载
6）vue-scroller: 页面滑动相关
7）mint-ui: 基于 vue 的 UI 组件库(移动端)
8）element-ui: 基于 vue 的 UI 组件库(PC 端)
9）它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目
Vue 的基本使用
编码
<div id="app">
<input type="text" v-model="username">
<p>Hello, {{username}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
username: 'vue'
}
})
</script>
模板语法
模板的理解
1）动态的 html 页面
2）包含了一些 JS 语法代码
a.双大括号表达式
b.指令(以 v-开头的自定义标签属性)
文本
<span>Message:{{msg}}</span>
原始HTML
<p>Using mustaches:{{rawHtml}}<p>
<p>Using v-html directive:<span v-html="rawHtml"></span></p>
双大括号表达式
1）语法: {{exp}}
2）功能: 向页面输出数据
3）可以调用对象的方法
表达式
{{number + 1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}
指令一: 强制数据绑定
1）功能: 指定变化的属性值
2）完整写法:
v-bind:xxx='yyy' //yyy 会作为表达式解析执行
3）简洁写法:
:xxx='yyy'
指令二: 绑定事件监听
1）功能: 绑定指定事件名的回调函数
2）完整写法:
v-on:keyup='xxx'
v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'
3）简洁写法:
@keyup='xxx' @keyup.enter='xxx'
计算属性和监视
计算属性
1）在 computed 属性对象中定义计算属性的方法
2）在页面中使用{{方法名}}来显示计算的结果
监视属性
1）通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
2）当属性变化时, 回调函数自动调用, 在函数内部进行计算
计算属性高级
1）通过 getter/setter 实现对属性数据的显示和监视
2）计算属性存在缓存, 多次读取只执行一次 getter 计算
1.5. class 与 style 绑定
理解
1）在应用界面中, 某个(些)元素的样式是变化的
2）class/style 绑定就是专门用来实现动态样式效果的技术
class 绑定
1）:class='xxx'
2）表达式是字符串: 'classA'
3）表达式是对象: {classA:isA, classB: isB}
4）表达式是数组: ['classA', 'classB']
style 绑定
1）:style="{ color: activeColor, fontSize: fontSize + 'px' }"
2）其中 activeColor/fontSize 是 data 属性
条件渲染
条件渲染指令
1）v-if 与 v-else
2）v-show
比较 v-if 与 v-show
3）如果需要频繁切换 v-show 较好
4）当条件不成立时, v-if 的所有子节点不会解析
列表渲染
列表显示指令
数组: v-for / index
对象: v-for / key
列表的更新显示
删除 item
替换 item
列表的高级处理
列表过滤
列表排序
事件处理
绑定监听:
1）v-on:xxx="fun"
2）@xxx="fun"
3）@xxx="fun(参数)"
4）默认事件形参: event
5）隐含属性对象: $event
事件修饰符
1）.prevent : 阻止事件的默认行为 event.preventDefault()
2）.stop : 停止事件冒泡 event.stopPropagation()
按键修饰符
1）.keycode : 操作的是某个 keycode 值的键
2）.keyName : 操作的某个按键名的键(少部分)
表单输入绑定
使用 v-model 对表单数据自动收集
1）text/textarea
2）checkbox
3）radio
4）select
vue 生命周期分析
1）初始化显示
*beforeCreate()
*created()
*beforeMount()
*mounted()
2）更新状态: this.xxx = value
*beforeUpdate()
*updated()
3）销毁 vue 实例: vm.$destory()
*beforeDestory()
*destoryed()
常用的生命周期方法
1）created()/mounted(): 发送 ajax 请求, 启动定时器等异步任务
2）beforeDestory(): 做收尾工作, 如: 清除定时器
过渡&动画
vue 动画的理解
1）操作 css 的 trasition 或 animation
2）vue 会给目标元素添加/移除特定的 class
3）过渡的相关类名
xxx-enter-active: 指定显示的 transition
xxx-leave-active: 指定隐藏的 transition
xxx-enter/xxx-leave-to: 指定隐藏时的样式
基本过渡动画的编码
1）在目标元素外包裹
2）定义 class 样式
指定过渡样式: transition
指定隐藏时的样式: opacity/其它
过滤器
理解过滤器
1）功能: 对要显示的数据进行特定格式化后再显示
2）注意: 并没有改变原本的数据, 可是产生新的对应的数据
定义和使用过滤器
1）定义过滤器
Vue.filter(filterName, function(value[,arg1,arg2,...]){
// 进行一定的数据处理
return newValue
})
2）使用过滤器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
内置指令与自定义指令
常用内置指令
1）v-text : 更新元素的 textContent
2）v-html : 更新元素的 innerHTML
3）v-if : 如果为 true, 当前标签才会输出到页面
4）v-else: 如果为 false, 当前标签才会输出到页面
5）v-show : 通过控制 display 样式来控制显示/隐藏
6）v-for : 遍历数组/对象
7）v-on : 绑定事件监听, 一般简写为@
8）v-bind : 强制绑定解析表达式, 可以省略 v-bind 简写为:
9）v-model : 双向数据绑定
10）ref : 指定唯一标识, vue 对象通过$refs 属性访问这个元素对象
11）v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
1.13.2. 自定义指令
1）注册全局指令
Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()
})
或
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
2）注册局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
3）使用指令
v-my-directive='xxx'
自定义插件
说明
1）Vue 插件是一个包含 install 方法的对象
2）通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等
