Vue系列

一、Vue课程介绍：

1）上来先不要搞Vue，因为前端知识太多，html+css+js(ECMAScript5)+jquery+bootstrap+响应式
2）ECMAScript6的语法（目的：主要在看别人的代码，不要看不懂里面的api）
主流的浏览器有部分的es6语法不识别，
3）服务器语言nodejs express框架 包管理器 npm（要会使用npm） 一个js文件就是一个包（模块） jquery.min.js
就不用<script>了，而是用npm下载，跟pip3一样
跟Python一样 Django框架 pip3
4）Vue的基础语法
5）Vue的高级语法
6）Vue提供的脚手架的东西：vue-cli webpack（前端中的工具）
7）设计模式 如何在实现单页面应用 前端中的路由...

复习：1.js的DOM操作：
节点的操作，dom.appendChild dom.removeChild
属性的操作dom.setAttribute dom.getAttribute，
样式属性的操作dom.style.xx，
值的操作dom.value dom.innerText dom.innerHtml
2.事件 事件对象回顾起来 阻止冒泡 阻止默认事件

二、es6中的let和const声明变量
主流的浏览器有部分的es6语法不识别，通过babel将es6转换成浏览器识别的es5的语法
1.声明变量 let和const声明变量

//es5中声明变量使用的是var，带来两个问题，变量提升和作用域的问题
先看一段代码：
console.log(a);var a = 10;console.log(a);
打印结果：
undefined
10
本来打印第一句console.log(a)应该报“a未被定义”的错误，为什么没有报错呢？
因为上面的代码相当于：
var a; console.log(a); a = 10; console.log(a);
此时，var a=10 这种方式就导致了变量提升。
如果这样写：
console.log(a); { var a = 20 } console.log(a);
打印结果：
undefined
10
大括号里的a也会进行变量提升，变为全局变量
大括号的作用域就不起作用了
再看代码：
console.log(a); { var a = 20; var a = 30; } console.log(a);
打印结果：
undefined
30
如果在大括号里不小心使用了相同的变量，会进行覆盖（本来应该报错“a已被定义”）
var a=[];
for(var i=0;i<20;i++){
a[i] = function(){ console.log(i); }
}
a[5](); //打印20，因为循环完后i==20
如果把"var i=0"换成"let i=0" 打印结果a[5]()==5

所以：使用let声明变量的好处
1）属于局部作用域
2）没有覆盖现象

const声明的是常量
const pi = 3.1415926
pi = 20 //报错，常量不能被修改
{ const pi = 3.14; } console.log(pi); //报错，“pi未定义”
const声明的常量属于局部作用域

二、es6中的模板字符串
看下面的代码,es5中的字符串拼接：
let name='alex';
let age=29;
let desc = name+'今年'+age+'了，鸡汤很多';
而在es6中可以使用反引号拼接：
let name='alex';
let age=29;
let desc = `$(name)今年$(age)了，鸡汤非常多`;
使用es6的语法可以很方便的把变量拼接在标签中

三、es6的箭头函数（函数的书写）
在es5中的函数书写方式：
function add(a,b){ return a+b; }
alert(add(3,4)) //输出7
或者
var add=function add(a,b){ return a+b; };
alert(add(3,4)) //输出7
在es6中：
var add=(a,b)=>{ return a+b; };
alert(add(3,7)) //输出10
再看一段代码：
var person={
name:"alex",
age:"20",
fav:function(){
console.log("喜欢AV");
console.log(this); //this表示当前对象person
}
}
如果这样写,fav函数的定义方式使用es6的方式：
var person={
name:"alex",
age:"20",
fav:()=>{
console.log("喜欢AV");
console.log(this); //this指向发生改变，指向了定义person的父级对象window
}
}
以上两种方式书写，this指向不同。
再看一段代码：
var person={
name:"alex",
age:"20",
fav:function(content){ //content表示形参
console.log("喜欢AV");
console.log(this);
console.log(arguments[0]) //输出'哈哈哈'，arguments表示实参
}
};
person.fav('哈哈哈');
如果把上面代码改成箭头函数：
var person={
name:"alex",
age:"20",
fav:(content)=>{ //content表示形参
console.log("喜欢AV");
console.log(this);
console.log(arguments) //报错；"arguments未定义"
}
};
person.fav('哈哈哈');
总结：
function(){} 等价于 ()=>{}
箭头函数的使用带来的问题：
1）使用箭头函数，this的指向发生改变
2）使用箭头函数，arguments不能使用

四、对象的创建
es5中字面量方式创建对象
var person={
name:"alex",
age:"20",
};

es6中对象的单体模式
var person={
name:"alex",
age:"20",
fav(){ console.log(this); console.log(arguments); }
};
person.fav('哈哈哈');

"fav(){}" 等价于"function fav(){}"等价于"var fav=function(){}"
"fav(){}" 就是对象的单体模式
总结：
使用对象的单体模式，对象单体模式就是一个函数
可以解决箭头函数this的指向和arguments不能使用的问题