ESMAScript（ES6語法簡單補(bǔ)充）

1、let和const

var聲明的變量會(huì)暴露在全局作用域中扣草，可以不斷重新賦值

var a = [];
for (var i=0; i<10; i++){
    console.log(i);
};
a[6]();    // 結(jié)果為10

var聲明的變量谎僻，存在變量提升問題

console.log(a);    // undefined
var a = 12;
// ====等同于====
var a;
console.log(a);
a = 12;

let聲明的變量是塊級作用域，不能重復(fù)聲明（只聲明一次）

var a = [];
for (let i=0; i<10; i++){
    console.log(i);
};
a[6]();    // 結(jié)果為6

let聲明的變量争拐，不存在變量提升

console.log(a);    // 報(bào)錯(cuò)ReferenceError
let a = 12;

const聲明一個(gè)只讀的變量(即: 常量)，一旦聲明立即初始化(不能留到以后賦值)晦雨。常量的值不能改變

const PI = 3.1415;
PI    // 3.1415
PI = 3;    // TypeError: Assignment to constant variable
const a;    // SyntaxError: Missing initializer in const declaration

2架曹、模板字符串（標(biāo)志：“ ` ` ”）

// 字符串拼接，``內(nèi)進(jìn)行拼接
$('#str').append(`
    <div>
        <p>${p.content}</p>
        <a>${a.context}</a>
    </div>
`);

3闹瞧、箭頭函數(shù)

var f = () => 5;
// ====無形參時(shí)绑雄，等同于====
var f = function(){
    return 5;
}
// -----------------------
var f = a => a;
// ====一個(gè)形參時(shí)，等同于====
var f = function(a){
    return a;
}
// -----------------------
var sum = (a, b) => a + b;
// ====多個(gè)形參時(shí)奥邮，等同于====
var sum = function(a, b){
    return a + b;
}

使用箭頭函數(shù)存在兩個(gè)問題：
1万牺、函數(shù)內(nèi)部調(diào)用this時(shí)，指向了瀏覽器掛載的windows對象洽腺；
2脚粟、對函數(shù)傳參時(shí)，arguments對象不能使用

// 字面量方式創(chuàng)建對象
var person = {
    name: 'aa',
    foo:function(){
        console.log(this)    // this指使用時(shí)定義的person對象
        console.log('this is a test');
    }
}
person.foo();

// 箭頭函數(shù)創(chuàng)建對象
var person = {
    name: 'aa',
    foo:() => {
        console.log(this)    // 使用箭頭函數(shù)蘸朋，this指定義時(shí)使用的windows對象
        console.log('this is a test');
    }
}
person.foo();

4核无、對象的單體模式（標(biāo)志：foo(){}）

// 自變量方式創(chuàng)建對象
var person = {
    name = 'aa',
    fav(){
        console.log(this);
    },    // 等價(jià)于 ===》 fav: function(){ console.log(this); },
}
person.fav();

5、ES6的面向?qū)ο?/h6>

// ES5使用構(gòu)造函數(shù)方式創(chuàng)建對象（即面向?qū)ο笈号鳎P(guān)鍵字必須大寫）
function Animal(name, age){
    this.name = name;
    this.age = age;
}
Animal.prototype.showName = function(){    // 添加方法
    console.log(this.name);
}
var cat = new Animal('肥嘟嘟', 2);    // 實(shí)例化對象必須用new

// ES6以class定義對象（每個(gè)方法結(jié)尾都不能加逗號）
class Animal{
    constructor(name, age){    // 構(gòu)造器函數(shù)
        this.name = name;
        this.age = age
    }    // 不能加逗號
    showName(){
        console.log(this.name)
    }
}
var d = new Animal('肥嘟嘟', 2);
d.showName();

6团南、模塊化

ES6的模塊化的基本規(guī)則或特點(diǎn)：
1、每一個(gè)模塊內(nèi)聲明的變量都是局部變量炼彪， 不會(huì)污染全局作用域吐根；
2、模塊內(nèi)部的變量或者函數(shù)可以通過export導(dǎo)出霹购；
3佑惠、一個(gè)模塊可以導(dǎo)入別的模塊
4朋腋、每一個(gè)模塊只加載一次齐疙， 每一個(gè)JS只執(zhí)行一次， 如果下次再去加載同目錄下同文件旭咽，直接從內(nèi)存中讀日攴堋（類似Python包加載模式）。 一個(gè)模塊就是一個(gè)單例穷绵，或者說就是一個(gè)對象轿塔。

Vue-cli腳手架使用（2.x和3.x）

1. vue-cli 2.x

1.1 配置node.js環(huán)境，cmd命令行中輸入node --version測試是否安裝成功
npm是Node.js提供的包管理工具，因?yàn)閚pm安裝插件是從國外服務(wù)器下載勾缭，受網(wǎng)絡(luò)影響大揍障，可能出現(xiàn)異常，我們可以用淘寶npm鏡像cnpm代替默認(rèn)的 npm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
1.2 安裝vue-cli：cnpm install vue-cli -g
1.3 生成項(xiàng)目

$ vue init webpack '項(xiàng)目名'   # 項(xiàng)目名會(huì)在當(dāng)前目錄下生成
$ cd '項(xiàng)目名'
$ cnpm install          # 安裝依賴 node_modules
$ npm run dev           # 啟動(dòng)項(xiàng)目俩由，默認(rèn)為localhost:8080端口
$ npm run build         # 把項(xiàng)目打包毒嫡，放到服務(wù)器使用

2. vue-cli 3.x

2.1 配置node.js環(huán)境，vue-cli 3.x 要求node的版本需要8.9甚至更高版本
2.2 安裝vue-cli：

# 全局安裝vue-cli
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

2.3 創(chuàng)建一個(gè)基于webpack模板的新項(xiàng)目

$ vue init webpack monitor
# OR
$ vue create monitor
# OR
$ vue ui
# 安裝依賴
$ cd monitor
$ npm run dev
# 打包部署
$ npm run build

“Vue是面向數(shù)據(jù)編程幻梯，不是面向dom編程”

1. Vue的基本了解

• 創(chuàng)建Vue對象后要指名掛載點(diǎn)：el: "#app"
• 插值表達(dá)式：{{msg}}
• 數(shù)據(jù)占位符：{{data}}兜畸，對應(yīng)data屬性的key；
• 數(shù)據(jù)模板（指令）：v-text和v-html碘梢，對應(yīng)data屬性的key咬摇，使用方法同數(shù)據(jù)占位符，其中：v-text會(huì)對html語句進(jìn)行轉(zhuǎn)義直接輸出煞躬，v-html則是將html語句內(nèi)容輸出肛鹏；
• dom模板：template屬性能輸出dom模板；
• 綁定事件：v-on:click="方法名"恩沛，簡寫為@click龄坪。事件對應(yīng)methods屬性中的 方法名： fun

2. Vue中的屬性綁定(v-bind)和雙向數(shù)據(jù)綁定(v-model)

<div id="app">
    <div v-bind:title="title">user</div>    // v-bind:value == :value
    <input v-model="content"/>
    <div></div>
</div>

new Vue({
    le: "#app",
    data: {
        title: "this is Test",
        content: "content!!!"
    }
})

3. Vue中的計(jì)算屬性(computed)和偵聽器(watch)

• v-if和v-show：這兩個(gè)屬性用來控制dom顯示/隱藏，當(dāng)值為true則顯示复唤，為false則隱藏健田。
• v-if和v-show的區(qū)別：在于v-if是通過直接銷毀dom的方式實(shí)現(xiàn)隱藏，而v-show是false時(shí)通過在標(biāo)簽內(nèi)佛纫，加入一個(gè)display=none來隱藏dom實(shí)現(xiàn)的妓局。所以v-show比v-if的性能更高，適用于對DOM高頻率的操作
• v-for：主要用于遍歷數(shù)組數(shù)據(jù)呈宇，并自動(dòng)生成dom列表好爬。如v-for='(item, index) of list' 。加一個(gè)key屬性可以加快渲染速度甥啄，但key的值必須唯一（如Python字典）

todolist demo

1存炮、項(xiàng)目目錄：

注意：啟動(dòng)本地沒有的項(xiàng)目前，需要先執(zhí)行npm install蜈漓，把項(xiàng)目相關(guān)的依賴包下載完穆桂，再npm run dev啟動(dòng)項(xiàng)目，避免項(xiàng)目缺少依賴而啟動(dòng)失敗融虽。

Project Tree

build—項(xiàng)目的webpack配置文件
config—項(xiàng)目線上環(huán)境和開發(fā)環(huán)境的配置文件
node_modules—項(xiàng)目的依賴模塊
src—源代碼放置目錄 src中的main.js文件是整個(gè)項(xiàng)目的入口文件
static—靜態(tài)的資源文件

2享完、vue-cli相關(guān)

.vue文件的組成：

• <template></template>模板
  template模板里面只能有一個(gè)包裹元素，最外部用一個(gè)<div>包裹
• <script></script>邏輯
• <style></style>樣式

使用

vue-cli組件

• 在vue-cli中data現(xiàn)在是函數(shù)有额，并且需要return返回具體數(shù)據(jù)般又”吮粒可以通過更改入口文件的引用實(shí)例來改變加載頁面

組件引用

• 組件引用：用import導(dǎo)入組件，再用components對局部組件進(jìn)行一個(gè)聲明茴迁。

  
  
  子組件

• 父組件向子組件傳值：在子組件標(biāo)簽中綁定添加:屬性名=值寄悯；子組件則用props: ['屬性名']進(jìn)行聲明，然后直接使用

• 子組件 this.$emit('事件名',參數(shù)值)向父組件請求某事件執(zhí)行堕义，父組件通過@事件名=函數(shù)名热某，來進(jìn)行事件監(jiān)聽觸發(fā)調(diào)用事件函數(shù)。

子組件定義樣式

• scoped修飾符的使用：組件樣式作用域胳螟，通過在style上添加scoped標(biāo)簽將作用域限制到本組件中昔馋。如果不添加該標(biāo)簽，則將變?yōu)槿謽邮?/li>