一、為什么要學習Vue

1.前端必備技能

2.崗位多，絕大互聯網公司都在使用Vue

3.提高開發(fā)效率

4.高薪必備技能（Vue2+Vue3）

二、什么是Vue

概念：Vue (讀音 /vju?/，類似于 view) 是一套 構建用戶界面 的 漸進式 框架

Vue2官網：Vue.js

1.什么是構建用戶界面

基于數據渲染出用戶可以看到的界面

2.什么是漸進式

?所謂漸進式就是循序漸進，不一定非得把Vue中的所有API都學完才能開發(fā)Vue，可以學一點開發(fā)一點

Vue的兩種開發(fā)方式：

1. Vue核心包開發(fā)

   場景：局部模塊改造

2. Vue核心包&Vue插件&工程化

   場景：整站開發(fā)

3.什么是框架

所謂框架：就是一套完整的解決方案

舉個例子：

如果把一個完整的項目比喻為一個裝修好的房子，那么框架就是一個毛坯房。

我們只需要在“毛坯房”的基礎上，增加功能代碼即可。

提到框架，不得不提一下庫。

• 庫，類似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等

• 框架，是一套完整的解決方案，實現了大部分功能，我們只需要按照一定的規(guī)則去編碼即可。

框架的特點：有一套必須讓開發(fā)者遵守的規(guī)則或者約束 ?

三、創(chuàng)建Vue實例

核心步驟（4步）：

1. 準備容器

2. 引包（官網） — 開發(fā)版本/生產版本

3. 創(chuàng)建Vue實例 new Vue()

4. 指定配置項，渲染數據

   • el:指定掛載點
   • data提供數據

<div id="app">{{ mgs }}
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app =new Vue({el : '#app',data: {msg: 'Hello'}})
</script>

總結：創(chuàng)建Vue實例需要執(zhí)行哪4步

四、插值表達式 {{}}

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

我們可以用插值表達式渲染出Vue提供的數據

、

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

表達式：是可以被求值的代碼，JS引擎會講其計算出一個結果

以下的情況都是表達式：

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真貴':'還行'
obj.name
arr[0]
fn()
obj.fn()

2.語法

插值表達式語法：{{ 表達式 }}

<h3>{{title}}<h3><p>{{nickName.toUpperCase()}}</p><p>{{age >= 18 ? '成年':'未成年'}}</p><p>{{obj.name}}</p><p>{{fn()}}</p>

3.錯誤用法

1.在插值表達式中使用的數據 必須在data中進行了提供
<p>{{hobby}}</p>  //如果在data中不存在 則會報錯2.支持的是表達式，而非語句，比如：if   for ...
<p>{{if}}</p>3.不能在標簽屬性中使用 {{  }} 插值 (插值表達式只能標簽中間使用)
<p title="{{username}}">我是P標簽</p>

4.總結

1.插值表達式的作用是什么

2.語法是什么

3.插值表達式的注意事項

五、響應式特性

1.什么是響應式？

簡單理解就是數據變，視圖對應變。

2.如何訪問 和 修改 data中的數據（響應式演示）

data中的數據, 最終會被添加到實例上

① 訪問數據： "實例.屬性名"

② 修改數據： "實例.屬性名"= "值"

3.總結

1. 什么是響應式

2. 如何訪問和修改data中的數據呢

六、Vue開發(fā)者工具安裝

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

2. 極簡插件下載（推薦） 極簡插件官網_Chrome插件下載_Chrome瀏覽器應用商店

安裝步驟：

安裝之后可以F12后看到多一個Vue的調試面板

七、Vue中的常用指令

概念：指令（Directives）是 Vue 提供的帶有 v- 前綴 的 特殊 標簽屬性。

為啥要學：提高程序員操作 DOM 的效率。

vue 中的指令按照不同的用途可以分為如下 6 大類：

• 內容渲染指令（v-html、v-text）

• 條件渲染指令（v-show、v-if、v-else、v-else-if）

• 事件綁定指令（v-on）

• 屬性綁定指令 （v-bind）

• 雙向綁定指令（v-model）

• 列表渲染指令（v-for）

指令是 vue 開發(fā)中最基礎、最常用、最簡單的知識點。

八、內容渲染指令

內容渲染指令用來輔助開發(fā)者渲染 DOM 元素的文本內容。常用的內容渲染指令有如下2 個：

• v-text（類似innerText）

• 使用語法：<p v-text="uname">hello</p>，意思是將 uame 值渲染到 p 標簽中
• 類似 innerText，使用該語法，會覆蓋 p 標簽原有內容

• v-html（類似 innerHTML）

• 使用語法：<p v-html="intro">hello</p>，意思是將 intro 值渲染到 p 標簽中
• 類似 innerHTML，使用該語法，會覆蓋 p 標簽原有內容
• 類似 innerHTML，使用該語法，能夠將HTML標簽的樣式呈現出來。

代碼演示：

 <div id="app"><h2>個人信息</h2>// 既然指令是vue提供的特殊的html屬性，所以咱們寫的時候就當成屬性來用即可<p v-text="uname">姓名：</p> <p v-html="intro">簡介：</p></div> <script>const app = new Vue({el:'#app',data:{uname:'張三',intro:'<h2>這是一個<strong>非常優(yōu)秀</strong>的boy<h2>'}})
</script>

九、條件渲染指令

條件判斷指令，用來輔助開發(fā)者按需控制 DOM 的顯示與隱藏。條件渲染指令有如下兩個，分別是：

1. v-show

   1. 作用： 控制元素顯示隱藏

   2. 語法： v-show = "表達式" 表達式值為 true 顯示， false 隱藏

   3. 原理： 切換 display:none 控制顯示隱藏

   4. 場景：頻繁切換顯示隱藏的場景

2. v-if

   1. 作用： 控制元素顯示隱藏（條件渲染）

   2. 語法： v-if= "表達式" 表達式值 true顯示， false 隱藏

   3. 原理： 基于條件判斷，是否創(chuàng)建 或 移除元素節(jié)點

   4. 場景： 要么顯示，要么隱藏，不頻繁切換的場景示例代碼：

       <div id="app"><div class="box">我是v-show控制的盒子</div><div class="box">我是v-if控制的盒子</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {flag: false}})</script>

3. v-else 和 v-else-if

   1. 作用：輔助v-if進行判斷渲染

   2. 語法：v-else v-else-if="表達式"

   3. 需要緊接著v-if使用

示例代碼：

 <div id="app"><p>性別：♂ 男</p><p>性別：♀ 女</p><hr><p>成績評定A：獎勵電腦一臺</p><p>成績評定B：獎勵周末郊游</p><p>成績評定C：獎勵零食禮包</p><p>成績評定D：懲罰一周不能玩手機</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {gender: 2,score: 95}})</script>

十、事件綁定指令

使用Vue時，如需為DOM注冊事件，及其的簡單，語法如下：

• <button v-on:事件名="內聯語句">按鈕</button>

• <button v-on:事件名="處理函數">按鈕</button>

• <button v-on:事件名="處理函數(實參)">按鈕</button>

• v-on: 簡寫為 @

1. 內聯語句

   <div id="app"><button @click="count--">-</button><span>{{ count }}</span><button v-on:click="count++">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 10}})</script>

2. 事件處理函數

   注意：

   • 事件處理函數應該寫到一個跟data同級的配置項（methods）中

   • methods中的函數內部的this都指向Vue實例

     <div id="app"><button>切換顯示隱藏</button><h1 v-show="isShow">小白程序員</h1></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {isShow: true}})</script>

3. 給事件處理函數傳參

   • 如果不傳遞任何參數，則方法無需加小括號；methods方法中可以直接使用 e 當做事件對象

   • 如果傳遞了參數，則實參 $event 表示事件對象，固定用法。

     <style>.box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 200px;}h3 {margin: 10px 0 20px 0;}p {margin: 20px;}</style><div id="app"><div class="box"><h3>小黑自動售貨機</h3><button>可樂5元</button><button>咖啡10元</button><button>牛奶8元</button></div><p>銀行卡余額：{{ money }}元</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {money: 100}})</script>

?

十一、屬性綁定指令

1. 作用：動態(tài)設置html的標簽屬性 比如：src、url、title

2. 語法：v-bind:屬性名=“表達式”

3. v-bind:可以簡寫成 => :

比如，有一個圖片，它的 src 屬性值，是一個圖片地址。這個地址在數據 data 中存儲。

則可以這樣設置屬性值：

• <img v-bind:src="url" />

• <img :src="url" /> （v-bind可以省略）

   <div id="app"><img v-bind:src="imgUrl" v-bind:title="msg" alt=""><img :src="imgUrl" :title="msg" alt=""></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {imgUrl: './imgs/10-02.png',msg: 'hello 波仔'}})</script>

十二、列表渲染指令

Vue 提供了 v-for 列表渲染指令，用來輔助開發(fā)者基于一個數組來循環(huán)渲染一個列表結構。

v-for 指令需要使用 (item, index) in arr 形式的特殊語法，其中：

• item 是數組中的每一項

• index 是每一項的索引，不需要可以省略

• arr 是被遍歷的數組

此語法也可以遍歷對象和數字

//遍歷對象
<div v-for="(value, key, index) in object">{{value}}</div>
value:對象中的值
key:對象中的鍵
index:遍歷索引從0開始//遍歷數字
<p v-for="item in 10">{{item}}</p>
item從1 開始

十三、v-for中的key

語法： key="唯一值"

作用：給列表項添加的唯一標識。便于Vue進行列表項的正確排序復用。

為什么加key：Vue 的默認行為會嘗試原地修改元素（就地復用）

實例代碼：

<ul><li v-for="(item, index) in booksList" :key="item.id"><span>{{ item.name }}</span><span>{{ item.author }}</span><button @click="del(item.id)">刪除</button></li>
</ul>

注意：

1. key 的值只能是字符串 或 數字類型

2. key 的值必須具有唯一性

3. 推薦使用 id 作為 key（唯一），不推薦使用 index 作為 key（會變化，不對應）

十四、雙向綁定指令

所謂雙向綁定就是：

1. 數據改變后，呈現的頁面結果會更新

2. 頁面結果更新后，數據也會隨之而變

作用： 給表單元素（input、radio、select）使用，雙向綁定數據，可以快速 獲取 或 設置 表單元素內容

語法：v-model="變量"

需求：使用雙向綁定實現以下需求

1. 點擊登錄按鈕獲取表單中的內容

2. 點擊重置按鈕清空表單中的內容

<div id="app">賬戶：<input type="text"> <br><br>密碼：<input type="password"> <br><br><button>登錄</button><button>重置</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',password: ''},})</script>