001 課程簡介

Vue3 已經(jīng)發(fā)布了，還有講 Vue2 的必要嗎？

• 目前是 Vue2 到 Vue3 的過渡階段，而且 Vue2 是一個相當(dāng)經(jīng)典的版本，4 年間一共經(jīng)歷了 70 多次的版本更新，實(shí)際開發(fā)中 Vue2 依然用的很多。
• 從 Vue2 這個經(jīng)典版本入門，等熟練掌握之后，再去學(xué)習(xí) Vue3
• 有了 Vue 的基礎(chǔ)想要直接學(xué)習(xí) Vue3 ，可以直接跳到后面 Vue3 的相關(guān)內(nèi)容

課程內(nèi)容

1、vue基礎(chǔ)

2、vue-cli

• vue腳手架，專門用于工程化開發(fā)

3、vue-router

• 用于在vue當(dāng)中實(shí)現(xiàn)前端路由

4、vuex

• 當(dāng)應(yīng)用足夠復(fù)雜時，可以借助它保管數(shù)據(jù)

5、element-ui

• ui組件庫

6、vue3

002 Vue簡介

Vue是什么？

Vue 官網(wǎng)定義：Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式 JavaScript 框架

• 構(gòu)建用戶界面：將數(shù)據(jù)通過某種辦法變成用戶可以看見的界面（前端開發(fā)工程師的職責(zé)：在合適的時候發(fā)出合適的請求，最后將數(shù)據(jù)展示到合適的位置）。Vue 并不關(guān)心怎么得到數(shù)據(jù)（發(fā)送請求、模擬數(shù)據(jù)或者是死數(shù)據(jù)），Vue 只關(guān)心在得到數(shù)據(jù)之后如何將它變成界面
• 漸進(jìn)式：所謂的漸進(jìn)式是指 Vue 可以自底向上逐層應(yīng)用。如果應(yīng)用比較簡單，那么只需要一個輕量小巧的核心庫（壓縮完之后只有 100kb 左右）；如果是一個比較復(fù)雜的應(yīng)用，則可以引入各式各樣的 Vue 插件。

誰開發(fā)的？

尤雨溪（Evan You）

Vue的特點(diǎn)

1、采用組件化模式，提高代碼復(fù)用率、且讓代碼更好維護(hù)

• 在 Vue 中，一個 .vue 文件就是一個組件，它包含了 html 結(jié)構(gòu)、css 樣式以及 js 交互
• 提高代碼的復(fù)用率：只需要引入 .vue 文件，就能夠?qū)崿F(xiàn)和原先相同的功能
• 代碼更好維護(hù)：組件化的設(shè)計使得對某一組件的修改不會影響到其他組件的正常運(yùn)行（封裝）

2、聲明式編碼，讓編碼人員無需直接操作 DOM ，提高開發(fā)效率

• 命令式編碼：按照指定的步驟執(zhí)行，缺一不可
• ?

  002_尚硅谷Vue技術(shù)_Vue簡介 P2 - 07:49

  ?

3、使用虛擬 DOM +優(yōu)秀的 Diff 算法，盡量復(fù)用 DOM 節(jié)點(diǎn)

原生 JavaScript 實(shí)現(xiàn)

Vue 實(shí)現(xiàn)

• 虛擬 DOM 就是內(nèi)存中的數(shù)據(jù)
• 對于新增的數(shù)據(jù)，Vue 會將新的虛擬 DOM 和舊的虛擬 DOM 進(jìn)行比較（ Diff 算法），將相同的部分直接進(jìn)行復(fù)用

學(xué)習(xí) Vue 之前需要掌握的 JavaScript 基礎(chǔ)知識

ES6 語法規(guī)范

• 解構(gòu)賦值、模板字符串、箭頭函數(shù)

ES6 模塊化

• 默認(rèn)暴露、分別暴露、統(tǒng)一暴露、import 、export

包管理器

• npm、yarn 或者是 cnpm

原型、原型鏈（重點(diǎn)）

數(shù)組常用方法

• 過濾數(shù)組、加工數(shù)組、篩選最值

axios

promise

……

003 官網(wǎng)使用指南

Vue 團(tuán)隊為了讓 Vue 更好使用，寫了一些文檔，也維護(hù)了一些Vue周邊的網(wǎng)站，隨后將這些文檔和網(wǎng)站進(jìn)行了合理的分類，就形成了上圖（ vue2 文檔：https://v2.cn.vuejs.org/）所示的官網(wǎng)導(dǎo)航區(qū)，熟悉導(dǎo)航區(qū)有利于今后查找所需要的內(nèi)容

學(xué)習(xí)

其中教程和 API 是所有導(dǎo)航中最重要，也是在學(xué)習(xí)的過程中使用的比較多的

1、教程

Vue官方入門文檔

2、API（https://v2.cn.vuejs.org/v2/api/）

• Vue 的字典：在編寫 Vue 的時候遇到不會的方法可以在 API 中進(jìn)行查詢
• 在寫案例和做功能的過程中自然而然就記住了，而不是在學(xué)習(xí)之初從第一個開始一個個往下背）
• 教程中所有的案例和方法調(diào)用都遵循 API 中的規(guī)范

3、風(fēng)格指南

• 如何寫出更加優(yōu)雅的代碼
• 一開始可以先不用看風(fēng)格指南中的內(nèi)容，要想通讀風(fēng)格指南中的內(nèi)容，必須保證將 Vue 所有的寫法都學(xué)會

4、示例

• 官方所提供的例子

5、Cookbook

Vue 編碼技巧：

• js 的基本功
• 針對 Vue 設(shè)計的一些小技巧

6、視頻教程

• 和 Vue 官方有合作的視頻教程

生態(tài)系統(tǒng)

• 其中，幫助和信息只需要了解即可，工具和核心插件中的內(nèi)容比較重要，但是在最開始學(xué)習(xí)的時候很少接觸

1、工具

Vue CLI：

• 在最開始學(xué)習(xí)的時候需要在 html 中引入 vue.js，然后再編寫 Vue 相關(guān)的代碼
• 在實(shí)際開發(fā)的時候需要使用腳手架

2、核心插件

Vue Router

團(tuán)隊

資源列表

1、贊助商

2、合作伙伴

3、主題

Vue 官方提供的樣式和結(jié)構(gòu)

• 國內(nèi)有更加優(yōu)秀的替代方案，這個使用的不是很多

4、Awesome Vue

Vue 發(fā)展到現(xiàn)在有很強(qiáng)大的生態(tài)，這里收納了官方所整理的比較好用的第三方庫

• 有很多成型的第三方庫

5、瀏覽和 Vue 相關(guān)的包

和 Awesome Vue 差不多，只不過效果更好一點(diǎn)

005 Hello小案例

Vue 模板：

006 分析 Hello 案例

區(qū)分 js 表達(dá)式和 js 代碼：

為什么要將數(shù)據(jù)交給 Vue 實(shí)例進(jìn)行保管？

Vue 開發(fā)者工具

開發(fā)版本的 Vue.js 和生產(chǎn)版本的 Vue.min.js 在實(shí)際引入的區(qū)別是什么？

為什么使用 new 進(jìn)行 Vue 實(shí)例的調(diào)用？

007 模板語法

什么時候用插值語法，什么時候用指令語法？

如果 Vue 實(shí)例中有兩個同名的屬性會發(fā)生什么？

008 數(shù)據(jù)綁定

輸入類元素都有什么？

009 el 和 data 的兩種寫法

使用“$mount”指定容器的靈活性體現(xiàn)在哪里？

為什么叫做 mount？

對于 data 的函數(shù)式的寫法，data 屬性的值是一個函數(shù)，這個函數(shù)是誰調(diào)用的？

010 理解 MVVM 模型

MVVM 模型

011 Object.defineProperty

012 理解數(shù)據(jù)代理

數(shù)據(jù)代理的定義

數(shù)據(jù)代理圖示

030 key 作用和原理

key 的作用

遍歷列表時 key 的作用（index 作為 key）

遍歷列表時 key 的作用（id 作為 key）

041 v-html 指令

cookie 的工作原理

----to be continued----

由于筆記不能分P，不方便查閱，剩余筆記會放到 Vue 專欄中