1、vue的概念

Vue是一個用于構建用戶界面的漸進式 框架

（1）構建用戶界面：基于數據動態渲染頁面

（2）漸進式：循序漸進的學習

（3）框架：一條完整的項目解決方案，提升開發效率

2、創建Vue實例，初始化渲染

（1）大致步驟

1）準備容器（Vue所管理的范圍）

2）引包（開發版本的包/生產版本包）

3）創建實例

4）添加配置項=>完成渲染

（2）詳細步驟

1）準備容器

2）如何引包

①找官網（v2.cn.vuejs.org）

②點“起步”，跳轉到以下頁面

③點“安裝”，找到“直接用<script>引入”，下載“開發版本”，或者直接引入開發版本的在線包

（開發版本會有更多提示）

④引入

3）創建實例

4）添加配置項

5）渲染

利用插值表達式

結果：

3、插值表達式

插值表達式是一種Vue模版語法

（1）表達式

是可以被求值的代碼，JS引擎會將其計算出一個結果

（2）作用

利用表達式進行插值，渲染到頁面中

（3）語法{{表達式}}

（4）注意點

1）使用數據必須存在（data已經提供）

2）支持表達式，而非語句，比如：if，for

3）不能在標簽屬性中使用{{}}插值

4、響應式

（1）響應式概念

數據改變，視圖更新

（使用Vue開發->專注于業務核心邏輯即可）

（2）如何訪問或修改數據

data中的數據最終會被添加到實例上（可以理解為data中提供的數據會被添加到el選擇的選擇器上）

• 訪問數據：“實例.屬性名”
• 修改數據：“實例.屬性名=值”

（3）示例：

在原先代碼data里提供一個count數據，值為100，在容器里渲染

在控制臺訪問

執行加一操作后（加一操作如果是app.count++,在控制臺顯示加加之前的值，在頁面顯示加后的結果）

5、安裝Vue開發者工具

（1）安裝方式

1）通過谷歌應用商店安裝（國外網站）

2）極簡插件：下載->開發者模式->拖拽安裝->插件詳情允許訪問文件

（2）安裝詳細步驟（極簡插件方式）

1）通過（https://chrome.zzzmh.cn/index）訪問，有可能會出現訪問失敗的情況，通過瀏覽器搜索即可

2）通過搜索找到Vue Devtools，點擊推薦下載

3）下載完成后，打開當前文件，進行解壓

（crx后綴的文件是要安裝的文件）

4）解壓后找到瀏覽器的擴展部分，一部分是點擊“.…”，點擊“更多工具”或者點擊“三”，直接點擊擴展程序，將剛剛解壓的文件拖拽，加入到“擴展程序”即可

5）讓插件允許訪問文件地址，在“插件詳情”中將“允許訪問文件網址”打開即可

6）重啟瀏覽器，右鍵，點擊“檢查”，找到工具