一、前端開發

前端工程師“Front-End-Developer”源自於美國。大約從2005年開始正式的前端工程師角色被行業所認可，到了2010年，互聯網開始全面進入移動時代，前端開發的工作越來越重要。

最初所有的開發工作都是由後端工程師完成的，隨着業務越來越繁雜，工作量變大，於是我們將項目中的可視化部分和一部分交互功能的開發工作剝離出來，形成了前端開發。

由於互聯網行業的急速發展，導致了在不同的國家，有着截然不同的分工體制。

在日本和一些人口比較稀疏的國家，例如加拿大、澳洲等，流行“Full-Stack Engineer”，也就是我們通常所說的全棧工程師。通俗點說就是一個人除了完成前端開發和後端開發工作以外，有的公司從產品設計到項目開發再到後期運維可能都是同一個人，甚至可能還要負責UI、配動畫，也可以是掃地、擦窗、寫文檔、維修桌椅等等。

而在美國等互聯網環境比較發達的國家項目開發的分工協作更爲明確，整個項目開發分爲前端、中間層和後端三個開發階段，這三個階段分別由三個或者更多的人來協同完成。

國內的大部分互聯網公司只有前端工程師和後端工程師，中間層的工作有的由前端來完成，有的由後端來完成。

PRD（產品原型-產品經理） - PSD（視覺設計-UI工程師） - HTML/CSS/JavaScript（PC/移動端網頁，實現網頁端的視覺展示和交互-前端工程師）

二、下載和安裝VS Code

1、下載地址

https://code.visualstudio.com/

2、安裝

三、初始設置

1、中文界面配置

首先安裝中文插件：Chinese (Simplified) Language Pack for Visual Studio Code
右下角彈出是否重啓vs，點擊“yes”
有些機器重啓後如果界面沒有變化，則點擊左邊欄Manage -> Command Paletet…【Ctrl+Shift+p】
在搜索框中輸入“configure display language”，回車
打開locale.json文件，修改文件下的屬性 “locale”:“zh-cn”

{
    // 定義 VS Code 的顯示語言。
    // 請參閱 https://go.microsoft.com/fwlink/?LinkId=761051，瞭解支持的語言列表。
    
    "locale":"zh-cn" // 更改將在重新啓動 VS Code 之後生效。
}

重啓vs

2、插件安裝

爲方便後續開發，建議安裝如下插件（紅色矩形框標記的插件）

3、創建項目

vscode本身沒有新建項目的選項，所以要先創建一個空的文件夾，如project_xxxx。

然後打開vscode，再在vscode裏面選擇 File -> Open Folder 打開文件夾，這樣纔可以創建項目。

4、保存工作區

打開文件夾後，選擇“文件 -> 將工作區另存爲…”，爲工作區文件起一個名字，存儲在剛纔的文件夾下即可

5、新建文件夾和網頁

6、預覽網頁

以文件路徑方式打開網頁預覽

需要安裝“open in browser”插件：

文件右鍵 -> Open In Default Browser

以服務器方式打開網頁預覽

需要安裝“Live Server”插件：

文件右鍵 -> Open with Live Server

7、設置字體大小

左邊欄Manage -> settings -> 搜索 “font” -> Font size

8、開啓完整的Emmet語法支持

設置中搜索 Emmet：啓用如下選項，必要時重啓vs

自學參考：http://es6.ruanyifeng.com/

一、ECMAScript 6 簡介

ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在 2015 年 6 月正式發佈了。它的目標，是使得 JavaScript 語言可以用來編寫複雜的大型應用程序，成爲企業級開發語言。

1、ECMAScript 和 JavaScript 的關係

一個常見的問題是，ECMAScript 和 JavaScript 到底是什麼關係？

要講清楚這個問題，需要回顧歷史。1996 年 11 月，JavaScript 的創造者 Netscape 公司，決定將 JavaScript 提交給標準化組織 ECMA，希望這種語言能夠成爲國際標準。次年，ECMA 發佈 262 號標準文件（ECMA-262）的第一版，規定了瀏覽器腳本語言的標準，並將這種語言稱爲 ECMAScript，這個版本就是 1.0 版。

因此，ECMAScript 和 JavaScript 的關係是，前者是後者的規格，後者是前者的一種實現（另外的 ECMAScript 方言還有 Jscript 和 ActionScript）

2、ES6 與 ECMAScript 2015 的關係

ECMAScript 2015（簡稱 ES2015）這個詞，也是經常可以看到的。它與 ES6 是什麼關係呢？

2011 年，ECMAScript 5.1 版發佈後，就開始制定 6.0 版了。因此，ES6 這個詞的原意，就是指 JavaScript 語言的下一個版本。

ES6 的第一個版本，在 2015 年 6 月發佈，正式名稱是《ECMAScript 2015 標準》（簡稱 ES2015）。

2016 年 6 月，小幅修訂的《ECMAScript 2016 標準》（簡稱 ES2016）如期發佈，這個版本可以看作是 ES6.1 版，因爲兩者的差異非常小，基本上是同一個標準。根據計劃，2017 年 6 月發佈 ES2017 標準。

因此，ES6 既是一個歷史名詞，也是一個泛指，含義是 5.1 版以後的 JavaScript 的下一代標準，涵蓋了 ES2015、ES2016、ES2017 等等，而 ES2015 則是正式名稱，特指該年發佈的正式版本的語言標準。本書中提到 ES6 的地方，一般是指 ES2015 標準，但有時也是泛指“下一代 JavaScript 語言”。

二、基本語法

ES標準中不包含 DOM 和 BOM的定義，只涵蓋基本數據類型、關鍵字、語句、運算符、內建對象、內建函數等通用語法。

本部分只學習前端開發中ES6的最少必要知識，方便後面項目開發中對代碼的理解。

1、let聲明變量

創建 let.html

// var 聲明的變量沒有局部作用域
// let 聲明的變量  有局部作用域
{
var a = 0
let b = 1
}
console.log(a)  // 0
console.log(b)  // ReferenceError: b is not defined

// var 可以聲明多次
// let 只能聲明一次
var m = 1
var m = 2
let n = 3
let n = 4
console.log(m)  // 2
console.log(n)  // Identifier 'n' has already been declared

2、const聲明常量（只讀變量）

創建 const.html

// 1、聲明之後不允許改變    
const PI = "3.1415926"
PI = 3  // TypeError: Assignment to constant variable.

// 2、一但聲明必須初始化，否則會報錯
const MY_AGE  // SyntaxError: Missing initializer in const declaration

3、解構賦值

創建解構賦值.html

解構賦值是對賦值運算符的擴展。

他是一種針對數組或者對象進行模式匹配，然後對其中的變量進行賦值。

在代碼書寫上簡潔且易讀，語義更加清晰明瞭；也方便了複雜對象中數據字段獲取。

//1、數組解構
// 傳統
let a = 1, b = 2, c = 3
console.log(a, b, c)
// ES6
let [x, y, z] = [1, 2, 3]
console.log(x, y, z)

//2、對象解構
let user = {name: 'Helen', age: 18}
// 傳統
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// ES6
let { name, age } =  user//注意：結構的變量必須是user中的屬性
console.log(name, age)

4、模板字符串

創建模板字符串.html

模板字符串相當於加強版的字符串，用反引號 `,除了作爲普通字符串，還可以用來定義多行字符串，還可以在字符串中加入變量和表達式。

// 1、多行字符串
let string1 =  `Hey,
can you stop angry now?`
console.log(string1)
// Hey,
// can you stop angry now?

// 2、字符串插入變量和表達式。變量名寫在 ${} 中，${} 中可以放入 JavaScript 表達式。
let name = "Mike"
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)
// My Name is Mike,I am 28 years old next year.

// 3、字符串中調用函數
function f(){
    return "have fun!"
}
let string2 = `Game start,${f()}`
console.log(string2);  // Game start,have fun!

5、聲明對象簡寫

創建聲明對象簡寫.html

const age = 12
const name = "Amy"

// 傳統
const person1 = {age: age, name: name}
console.log(person1)

// ES6
const person2 = {age, name}
console.log(person2) //{age: 12, name: "Amy"}

6、定義方法簡寫

創建定義方法簡寫.html

// 傳統
const person1 = {
    sayHi:function(){
        console.log("Hi")
    }
}
person1.sayHi();//"Hi"


// ES6
const person2 = {
    sayHi(){
        console.log("Hi")
    }
}
person2.sayHi()  //"Hi"

7、對象拓展運算符

創建對象拓展運算符.html

拓展運算符（…）用於取出參數對象所有可遍歷屬性然後拷貝到當前對象。

// 1、拷貝對象
let person1 = {name: "Amy", age: 15}
let someone = { ...person1 }
console.log(someone)  //{name: "Amy", age: 15}

// 2、合併對象
let age = {age: 15}
let name = {name: "Amy"}
let person2 = {...age, ...name}
console.log(person2)  //{age: 15, name: "Amy"}

8、箭頭函數

創建箭頭函數.html

箭頭函數提供了一種更加簡潔的函數書寫方式。基本語法是：參數 => 函數體

// 傳統
var f1 = function(a){
    return a
}
console.log(f1(1))


// ES6
var f2 = a => a
console.log(f2(1))

// 當箭頭函數沒有參數或者有多個參數，要用 () 括起來。
// 當箭頭函數函數體有多行語句，用 {} 包裹起來，表示代碼塊，
// 當只有一行語句，並且需要返回結果時，可以省略 {} , 結果會自動返回。
var f3 = (a,b) => {
    let result = a+b
    return result
}
console.log(f3(6,2))  // 8

// 前面代碼相當於：
var f4 = (a,b) => a+b

箭頭函數多用於匿名函數的定義

一、介紹

1、Vue.js 是什麼

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。

Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠爲複雜的單頁應用提供驅動。

官方網站：https://cn.vuejs.org

2、初始Vue.js

創建 demo.html

<!-- id標識vue作用的範圍 -->
<div id="app">
    <!-- {{}} 插值表達式，綁定vue中的data數據 -->
    {{ message }}
</div>
<script src="vue.min.js"></script>
<script>

    // 創建一個vue對象
    new Vue({
        el: '#app',//綁定vue作用的範圍
        data: {//定義頁面中顯示的模型數據
            message: 'Hello Vue!'
        }
    })

</script>

這就是聲明式渲染：Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統

這裏的核心思想就是沒有繁瑣的DOM操作，例如jQuery中，我們需要先找到div節點，獲取到DOM對象，然後進行一系列的節點操作

在vs code中創建代碼片段：

文件 => 首選項 => 用戶代碼片段 => 新建全局代碼片段/或文件夾代碼片段：vue-html.code-snippets

注意：製作代碼片段的時候，字符串中如果包含文件中複製過來的“Tab”鍵的空格，要換成“空格鍵”的空格

{
    "vue htm": {
        "scope": "html",
        "prefix": "vuehtml",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "    <meta charset=\"UTF-8\">",
            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "    <title>Document</title>",
            "</head>",
            "",
            "<body>",
            "    <div id=\"app\">",
            "",
            "    </div>",
            "    <script src=\"vue.min.js\"></script>",
            "    <script>",
            "        new Vue({",
            "            el: '#app',",
            "            data: {",
            "                $1",
            "            }",
            "        })",
            "    </script>",
            "</body>",
            "",
            "</html>",
        ],
        "description": "my vue template in html"
    }
}

二、基本語法

1、基本數據渲染和指令

創建 01-基本數據渲染和指令.html

你看到的 v-bind 特性被稱爲指令。指令帶有前綴 v-

除了使用插值表達式{{}}進行數據渲染，也可以使用 v-bind指令，它的簡寫的形式就是一個冒號（:）

data: {
    content: '我是標題',
    message: '頁面加載於 ' + new Date().toLocaleString()
}

<!-- 如果要將模型數據綁定在html屬性中，則使用 v-bind 指令
     此時title中顯示的是模型數據
-->
<h1 v-bind:title="message">
    {{content}}
</h1>

<!-- v-bind 指令的簡寫形式： 冒號（:） -->
<h1 :title="message">
    {{content}}
</h1>

2、雙向數據綁定

創建 02-雙向數據綁定.html

雙向數據綁定和單向數據綁定：使用 v-model 進行雙向數據綁定

data: {
    searchMap:{
        keyWord: '尚硅谷'
    }
}

<!-- v-bind:value只能進行單向的數據渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以進行雙向的數據綁定  -->
<input type="text" v-model="searchMap.keyWord">

<p>您要查詢的是：{{searchMap.keyWord}}</p>

3、事件

創建 03-事件.html

**需求：**點擊查詢按鈕，按照輸入框中輸入的內容查找公司相關信息

在前面的例子基礎上，data節點中增加 result，增加 methods節點並定義 search方法

data: {
     searchMap:{
         keyWord: '尚硅谷'
     },
     //查詢結果
     result: {}
},
methods:{
    search(){
        console.log('search')
        //TODO
    }
}

html中增加 button 和 p

使用 v-on 進行數件處理，v-on:click 表示處理鼠標點擊事件，事件調用的方法定義在 vue 對象聲明的 methods 節點中

<!-- v-on 指令綁定事件，click指定綁定的事件類型，事件發生時調用vue中methods節點中定義的方法 -->
<button v-on:click="search()">查詢</button>

<p>您要查詢的是：{{searchMap.keyWord}}</p>
<p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>

完善search方法

search(){
    console.log('search');
    this.result = {
        "title":"尚硅谷",
        "site":"http://www.atguigu.com"
    }
}

簡寫

<!-- v-on 指令的簡寫形式 @ -->
<button @click="search()">查詢</button>

4、修飾符

創建 04-修飾符.html

修飾符 (Modifiers) 是以半角句號（.）指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。

例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：

即阻止事件原本的默認行爲

data: {
    user: {}
}

<!-- 修飾符用於指出一個指令應該以特殊方式綁定。
     這裏的 .prevent 修飾符告訴 v-on 指令對於觸發的事件調用js的 event.preventDefault()：
     即阻止表單提交的默認行爲 -->
<form action="save" v-on:submit.prevent="onSubmit">
    <label for="username">
        <input type="text" id="username" v-model="user.username">
        <button type="submit">保存</button>
    </label>
</form>

methods: {
    onSubmit() {
        if (this.user.username) {
            console.log('提交表單')
        } else {
            alert('請輸入用戶名')
        }
    }
}

5、條件渲染

創建 05-條件渲染.html

v-if：條件指令

data: {
    ok: false
}

注意：單個複選框綁定到布爾值

<input type="checkbox" v-model="ok">同意許可協議
<!-- v:if條件指令：還有v-else、v-else-if 切換開銷大 -->
<h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1>
<h1 v-else>no</h1>

v-show：條件指令

使用v-show完成和上面相同的功能

<!-- v:show 條件指令 初始渲染開銷大 -->
<h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1>
<h1 v-show="!ok">no</h1>

v-if 是“真正”的條件渲染，因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。
v-if 也是惰性的：如果在初始渲染時條件爲假，則什麼也不做——直到條件第一次變爲真時，纔會開始渲染條件塊。
相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

6、列表渲染

創建 06-列表渲染.html

v-for：列表循環指令

例1：簡單的列表渲染

<!-- 1、簡單的列表渲染 -->
<ul>
    <li v-for="n in 10">{{ n }} </li>
</ul>
<ul>
    <!-- 如果想獲取索引，則使用index關鍵字，注意，圓括號中的index必須放在後面 -->
    <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
</ul>

例2：遍歷數據列表

data: {
    userList: [
        { id: 1, username: 'helen', age: 18 },
        { id: 2, username: 'peter', age: 28 },
        { id: 3, username: 'andy', age: 38 }
    ]
}

<!-- 2、遍歷數據列表 -->
<table border="1">
    <!-- <tr v-for="item in userList"></tr> -->
    <tr v-for="(item, index) in userList">
        <td>{{index}}</td>
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
        <td>{{item.age}}</td>
    </tr>
</table>

一、組件（重點）

組件（Component）是 Vue.js 最強大的功能之一。

組件可以擴展 HTML 元素，封裝可重用的代碼。

組件系統讓我們可以用獨立可複用的小組件來構建大型應用，幾乎任意類型的應用的界面都可以抽象爲一個組件樹：

1、局部組件

創建 01-1-局部組件.html

定義組件

var app = new Vue({
    el: '#app',
    // 定義局部組件，這裏可以定義多個局部組件
    components: {
        //組件的名字
        'Navbar': {
            //組件的內容
            template: '<ul><li>首頁</li><li>學員管理</li></ul>'
        }
    }
})

使用組件

<div id="app">
    <Navbar></Navbar>
</div>

2、全局組件

創建 01-2-全局組件.html

定義全局組件：components/Navbar.js

// 定義全局組件
Vue.component('Navbar', {
    template: '<ul><li>首頁</li><li>學員管理</li><li>講師管理</li></ul>'
})

<div id="app">
    <Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script src="components/Navbar.js"></script>
<script>
    var app = new Vue({
        el: '#app'
    })
</script>

二、實例生命週期

創建 03-vue實例的生命週期.html

data: {
    message: '牀前明月光'
},
methods: {
    show() {
        console.log('執行show方法')
    },
    update() {
        this.message = '玻璃好上霜'
    }
},

<button @click="update">update</button>
<h3 id="h3">{{ message }}</h3>

分析生命週期相關方法的執行時機

//===創建時的四個事件
beforeCreate() { // 第一個被執行的鉤子方法：實例被創建出來之前執行
    console.log(this.message) //undefined
    this.show() //TypeError: this.show is not a function
    // beforeCreate執行時，data 和 methods 中的 數據都還沒有沒初始化
},
created() { // 第二個被執行的鉤子方法
    console.log(this.message) //牀前明月光
    this.show() //執行show方法
    // created執行時，data 和 methods 都已經被初始化好了！
    // 如果要調用 methods 中的方法，或者操作 data 中的數據，最早，只能在 created 中操作
},
beforeMount() { // 第三個被執行的鉤子方法
    console.log(document.getElementById('h3').innerText) //{{ message }}
    // beforeMount執行時，模板已經在內存中編輯完成了，尚未被渲染到頁面中
},
mounted() { // 第四個被執行的鉤子方法
    console.log(document.getElementById('h3').innerText) //牀前明月光
    // 內存中的模板已經渲染到頁面，用戶已經可以看見內容
},


//===運行中的兩個事件
beforeUpdate() { // 數據更新的前一刻
    console.log('界面顯示的內容：' + document.getElementById('h3').innerText)
    console.log('data 中的 message 數據是：' + this.message)
    // beforeUpdate執行時，內存中的數據已更新，但是頁面尚未被渲染
},
updated() {
    console.log('界面顯示的內容：' + document.getElementById('h3').innerText)
    console.log('data 中的 message 數據是：' + this.message)
    // updated執行時，內存中的數據已更新，並且頁面已經被渲染
}

四、路由

Vue.js 路由允許我們通過不同的 URL 訪問不同的內容。

通過 Vue.js 可以實現多視圖的單頁Web應用（single page web application，SPA）。

Vue.js 路由需要載入 vue-router 庫

創建 04-路由.html

1、引入js

<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>

2、編寫html

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 組件來導航. -->
        <!-- 通過傳入 `to` 屬性指定鏈接. -->
        <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
        <router-link to="/">首頁</router-link>
        <router-link to="/student">會員管理</router-link>
        <router-link to="/teacher">講師管理</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的組件將渲染在這裏 -->
    <router-view></router-view>
</div>

3、編寫js

<script>
    // 1. 定義（路由）組件。
    // 可以從其他文件 import 進來
    const Welcome = { template: '<div>歡迎</div>' }
    const Student = { template: '<div>student list</div>' }
    const Teacher = { template: '<div>teacher list</div>' }

    // 2. 定義路由
    // 每個路由應該映射一個組件。
    const routes = [
        { path: '/', redirect: '/welcome' }, //設置默認指向的路徑
        { path: '/welcome', component: Welcome },
        { path: '/student', component: Student },
        { path: '/teacher', component: Teacher }
    ]

    // 3. 創建 router 實例，然後傳 `routes` 配置
    const router = new VueRouter({
        routes // （縮寫）相當於 routes: routes
    })

    // 4. 創建和掛載根實例。
    // 從而讓整個應用都有路由功能
    const app = new Vue({
        el: '#app',
        router
    })

    // 現在，應用已經啓動了！
</script>

五、axios

axios是獨立於vue的一個項目，基於promise用於瀏覽器和node.js的http客戶端

在瀏覽器中可以幫助我們完成 ajax請求的發送
在node.js中可以向遠程接口發送請求

獲取數據

<script src="vue.min.js"></script>
<script src="axios.min.js"></script>

注意：測試時需要開啓後端服務器，並且後端開啓跨域訪問權限

var app = new Vue({
    el: '#app',
    data: {
        memberList: []//數組
    },
    created() {
        this.getList()
    },

    methods: {

        getList(id) {
            //vm = this
            axios.get('http://localhost:8081/admin/ucenter/member')
            .then(response => {
                console.log(response)
                this.memberList = response.data.data.items
            })
            .catch(error => {
                console.log(error)
            })
        }
    }
})

控制檯查看輸出

2、顯示數據

<div id="app">
    <table border="1">
        <tr>
            <td>id</td>
            <td>姓名</td>
        </tr>
        <tr v-for="item in memberList">
            <td>{{item.memberId}}</td>
            <td>{{item.nickname}}</td>
        </td>
    </tr>
</table>
</div>

六、element-ui：

element-ui 是餓了麼前端出品的基於 Vue.js的後臺組件庫，方便程序員進行頁面快速佈局和構建

官網： http://element-cn.eleme.io/#/zh-CN

創建 06-element-ui.html

將element-ui引入到項目

1、引入css

<!-- import CSS -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

2、引入js

<!-- import Vue before Element -->
<script src="vue.min.js"></script>
<!-- import JavaScript -->
<script src="element-ui/lib/index.js"></script>

3、編寫html

<div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
        <p>Try Element</p>
    </el-dialog>
</div>

關於.sync的擴展閱讀

https://www.jianshu.com/p/d42c508ea9de

4、編寫js

<script>
    new Vue({
      el: '#app',
      data: function () {//定義Vue中data的另一種方式
        return { visible: false }
      }
    })
</script>

測試

一、簡介

1、什麼是Node.js

簡單的說 Node.js 就是運行在服務端的 JavaScript。

Node.js是一個事件驅動I/O服務端JavaScript環境，基於Google的V8引擎，V8引擎執行Javascript的速度非常快，性能非常好。

2、Node.js有什麼用

如果你是一個前端程序員，你不懂得像PHP、Python或Ruby等動態編程語言，然後你想創建自己的服務，那麼Node.js是一個非常好的選擇。

Node.js 是運行在服務端的 JavaScript，如果你熟悉Javascript，那麼你將會很容易的學會Node.js。

當然，如果你是後端程序員，想部署一些高性能的服務，那麼學習Node.js也是一個非常好的選擇。

二、安裝

1、下載

官網：https://nodejs.org/en/

中文網：http://nodejs.cn/

LTS：長期支持版本

Current：最新版

2、安裝

3、查看版本

node -v

三、快速入門

1、創建文件夾nodejs

2、控制檯程序

創建 01-控制檯程序.js

console.log('Hello Node.js')

打開命令行終端：Ctrl + Shift + y

進入到程序所在的目錄，輸入

node 01-控制檯程序.js

瀏覽器的內核包括兩部分核心：

DOM渲染引擎；
js解析器（js引擎）
js運行在瀏覽器中的內核中的js引擎內部

Node.js是脫離瀏覽器環境運行的JavaScript程序，基於V8 引擎（Chrome 的 JavaScript的引擎）

3、服務器端應用開發（瞭解）

創建 02-server-app.js

const http = require('http');
http.createServer(function (request, response) {
    // 發送 HTTP 頭部 
    // HTTP 狀態值: 200 : OK
    // 內容類型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 發送響應數據 "Hello World"
    response.end('Hello Server');
}).listen(8888);
// 終端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

運行服務器程序

node 02-server-app.js

服務器啓動成功後，在瀏覽器中輸入：http://localhost:8888/ 查看webserver成功運行，並輸出html頁面

停止服務：ctrl + c

項目前端相關基礎知識一

一、前端開發

二、下載和安裝VS Code

1、下載地址

2、安裝

三、初始設置

1、中文界面配置

2、插件安裝

4、保存工作區

5、新建文件夾和網頁

6、預覽網頁

7、設置字體大小

8、開啓完整的Emmet語法支持

一、ECMAScript 6 簡介

1、ECMAScript 和 JavaScript 的關係

2、ES6 與 ECMAScript 2015 的關係

二、基本語法

1、let聲明變量

3、解構賦值

4、模板字符串

5、聲明對象簡寫

6、定義方法簡寫

7、對象拓展運算符

一、介紹

1、Vue.js 是什麼

2、初始Vue.js

二、基本語法

1、基本數據渲染和指令

2、雙向數據綁定

3、事件

4、修飾符

5、條件渲染

6、列表渲染

一、組件（重點）

1、局部組件

2、全局組件

二、實例生命週期

四、路由

1、引入js

2、編寫html

3、編寫js

五、axios

獲取數據

2、顯示數據

六、element-ui：

1、引入css

2、引入js

3、編寫html

4、編寫js

一、簡介

1、什麼是Node.js

2、Node.js有什麼用

二、安裝

1、下載

2、安裝

3、查看版本

三、快速入門

1、創建文件夾nodejs

3、服務器端應用開發（瞭解）