一、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"
}
}