一、Vue课程介绍
二、es6中的let和const声明变量
三、es6中的模板字符串
四、es6的箭头函数（函数的书写）
五、对象的单体模式
六、es6中的class的使用
七、前端三大框架比较
八、前端框架与库的区别
九、nodejs中npm的使用
一、Vue课程介绍
1）上来先不要搞Vue，因为前端知识太多，html+css+js(ECMAScript5)+jquery+bootstrap+响应式
2）ECMAScript6的语法（目的：主要在看别人的代码，不要看不懂里面的api）主流的浏览器有部分的es6语法不识别，
3）服务器语言nodejs express框架 包管理器 npm（要会使用npm） 一个js文件就是一个包（模块） jquery.min.js
就不用<script>了，而是用npm下载，跟Python的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，带来两个问题，变量提升和作用域的问题
先看一段代码：
<script>
console.log(a);
var a = 10;
console.log(a);
/*
* 打印结果：
* undefined
* 10
* */
</script>
本来打印第一句console.log(a)应该报“a未被定义”的错误，为什么没有报错呢？
因为上面的代码相当于：
<script>
var a;
console.log(a);
a = 10;
console.log(a);
</script>
此时，var a=10 这种书写方式就导致了变量提升。
如果这样写：
<script>
console.log(a);
{ var a = 20 }
console.log(a);
/*
* 打印结果：
* undefined
* 20
* */
</script>
大括号里的a也会进行变量提升，变为全局变量，大括号的作用域就不起作用了。
再看代码：
<script>
console.log(a);
{
var a = 20;
var a = 30;
}
console.log(a);
/*
* 打印结果：
* undefined
* 30
* */
</script>
如果在大括号里不小心使用了相同的变量，会进行覆盖（本来应该报错“a已被定义”）
再看下面代码：
<script>
var a=[];
for(var i=0;i<20;i++){
a[i] = function(){
console.log(i);
}
}
a[5]();
/*
* 打印结果：20
* 因为循环完后i==20
* */
</script>
如果把 "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中的字符串拼接：
<script>
let name='alex';
let age=29;
let desc = name+'今年'+age+'了，鸡汤很多';
console.log(desc);
/*
* 打印结果：
* alex今年29了，鸡汤很多
* */
</script>
而在es6中可以使用反引号 ${变量} 进行拼接：
<script>
let name='alex';
let age=29;
let desc = `${name}今年${age}了，鸡汤非常多`;
console.log(desc);
/*
* 打印结果：
* alex今年29了，鸡汤非常多
* */
</script>
四、es6的箭头函数（函数的书写）
在es5中的函数书写方式：
<script>
function add(a, b) {
return a+b;
}
alert(add(3,4));
/*
* 输出：7
* */
</script>
或者
<script>
var add = function (a,b){
return a+b;
};
alert(add(3,4));
/*
* 输出：7
* */
</script>
在es6中：
<script>
var add = (a, b) => {
return a + b;
};
alert(add(3, 7));
/*
* 输出：10
* */
</script>
再看一段代码：
<script>
var person = {
name: "alex",
age: "20",
fav: function () {
console.log("喜欢AV");
console.log(this); //this表示当前对象person
}
};
person.fav();
/*
* 输出：
* 喜欢AV
* {name: "alex", age: "20", fav: ƒ}
* */
</script>
如果fav函数的定义方式使用es6的方式：
<script>
var person = {
name: "alex",
age: "20",
fav: () => {
console.log("喜欢AV");
console.log(this); //this指向发生改变，指向了定义person的父级对象window
}
};
person.fav();
/*
* 输出：
* 喜欢AV
* Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
* */
</script>
以上两种方式书写，this指向不同。
再看一段代码：
<script>
var person = {
name: "alex",
age: "20",
fav: function (content) { //content表示形参
console.log("喜欢AV");
console.log(this);
console.log(arguments[0]) //arguments表示实参
}
};
person.fav('哈哈哈', '呵呵呵');
/*
* 输出：
* 喜欢AV
* {name: "alex", age: "20", fav: ƒ}
* 哈哈哈
* */
</script>
如果把上面代码改成箭头函数：
<script>
var person = {
name: "alex",
age: "20",
fav: (content) => {
console.log("喜欢AV");
console.log(this);
console.log(arguments) //报错；"arguments未定义"
}
};
person.fav('哈哈哈', '呵呵呵');
/*
* 输出：
* 喜欢AV
* Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
* Uncaught ReferenceError: arguments is not defined
* */
</script>
总结：
function(){} 等价于 ()=>{}
箭头函数的使用带来的问题：
1）使用箭头函数，this的指向发生改变
2）使用箭头函数，arguments不能使用
五、对象的单体模式
es5中字面量方式创建对象
<script>
var person = {
name: "alex",
age: "20",
fav: function () {
console.log(this);
console.log(arguments[0])
}
};
person.fav('哈哈哈');
/*
* 输出：
* {name: "alex", age: "20", fav: ƒ}
* 哈哈哈
* */
</script>
es6中对象的单体模式
<script>
var person = {
name: "alex",
age: "20",
fav() {
console.log(this);
console.log(arguments[0]);
}
};
person.fav('哈哈哈');
/*
* 输出：
* {name: "alex", age: "20", fav: ƒ}
* 哈哈哈
* */
</script>
"fav(){}" 等价于"fav: function(){}"等价于"var fav=function(){}"
"fav(){}" 就是定义一个名为fav的函数
总结：
使用对象的单体模式，对象单体模式就是一个函数
可以解决箭头函数this的指向和arguments不能使用的问题
六、es6中的class的使用
讲对象的单体模式就是为了创建这个类
<script>
// es5中：
// 构造函数模式创建对象,使用new关键字创建对象
// 构造函数与普通函数的区别是首字母大写
// (希望创建的对象通过instanceof方法得到的是具体的对象而不是抽象类Object)
function Person(name, age) {
this.name = name;
this.age = age;
this.alertName = function () {
alert(this.name);
}
}
var person1 = new Person('alex', 20);
person1.alertName();
/*
* 输出：alex
* */
</script>
----
<script>
//es6中创建对象的方式 使用class
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
showName() {
alert(this.name)
}
}
var p2 = new Person('张三', 20);
p2.showName();
/*
* 输出：张三
* */
</script>
补充：global对象
ES5的顶层对象，本身也是一个问题。因为它在各种实现里面是不统一的。
--浏览器里面，顶层对象是window，但Node和Web Worker没有window
--浏览器和Web Worker里面，self也指向顶层对象，但是Node没有self
--Node里面，顶层对象是global，但其他环境都不支持
七、前端三大框架比较
Vue Angular React
Vue官方文档：https://cn.vuejs.org/
八、前端框架与库的区别
功能上的不同：
jQuery库：包含DOM（操作DOM）+请求，就是一块功能。
art-template库：模板引擎渲染，高性能的渲染DOM
框架：大而全的概念，简易的DOM体验+请求处理+模板引擎
在KFC的世界里，库就是一个小套餐，框架就是全家桶
代码上的不同：
一般使用库的代码，是调用某个函数或者直接使用抛出来的对象，我们自己处理库中的代码。
一般使用框架，其框架本身提供的好的成套的工具帮我们运行我们编写好的代码。
框架的使用：
1.初始化自身的一些行为
2.执行你所编写的代码
3.释放一些资源
九、nodejs中npm的使用
1.到官网https://nodejs.org/en/下载安装nodejs（傻瓜式安装）
2.命令行输入：node -v 和 npm -v 查看版本 nodejs的作用是创造JavaScript代码的运行环境，让JavaScript跟Python一样成为服务器语言
3.初始化，先进入项目的目录，
执行`npm init` 或 `npm init --yes`
执行`npm install vue --save` //下载Vue到当前目录 // 或指定版本`npm install vue@1.0.1 --save`
{
"name": "vue_lesson", # 项目的目录
"version": "1.0.0", # 项目的版本号
"description": "", # 项目的描述
"main": "index.js", # 项目的入口文件
"scripts": { # 项目的脚本
"test": "echo "Error: no test specified" && exit 1"
},
"author": "", # 作者
"license": "ISC", # 认证证书
"dependencies": { # 当前项目的依赖
"vue": "^2.6.10"
}
}