? ?????📝個人主頁：五敷有你? ? ??
?🔥系列專欄：Vue
??穩(wěn)重求進，曬太陽

Vue概念

• 是一個用于構(gòu)建用戶界面的漸進式框架
• 優(yōu)點：大大提高開發(fā)效率
• 缺點：需要理解記憶規(guī)則

創(chuàng)建Vue實例

步驟：

1. 準(zhǔn)備容器
2. 引包
3. 創(chuàng)建Vue實例new Vue()
4. 指定配置項el data=>渲染數(shù)據(jù)

• el指定掛載點，選擇器指定控制的是哪個盒子
• data：提供數(shù)據(jù)

插值表達式

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

1. 作用：利用表達式進行插值，渲染到頁面
   1. 表達式：可以被求值的代碼，js會算出一個結(jié)果
2. 語法：{{表達式}}
3. 注意點
   1. 使用的數(shù)據(jù)必須存在
   2. 支持的式表達式而非語法
   3. 不能在標(biāo)簽屬性中使用{{}}插值

Vue的核心特征：響應(yīng)式

數(shù)據(jù)改變，視圖自動更新

訪問數(shù)據(jù)：實例.屬性名

修改數(shù)據(jù)：實例.屬性名=“值”

開發(fā)者工具：

在拓展中搜索VueDevtools下載安裝

給他權(quán)限

OK

Vue指令

Vue會根據(jù)不同的指令，針對標(biāo)簽實現(xiàn)不同的功能

指令：帶有v-前綴的特殊標(biāo)簽屬性

v-html

v-html="表達式" ->動態(tài)設(shè)置元素innerHTML

v-if(條件渲染)

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

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

原理：根據(jù)條件判斷，是否創(chuàng)建或移除元素節(jié)點

場景：不頻繁切換的場景

v-show（顯示隱藏）

作用：控制元素顯示隱藏

語法：v-show="表達式"

原理：切換display:none

場景：頻繁切換顯示隱藏場景

v-if v-else v-else-if

作用：復(fù)制v-if進行判斷渲染

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

注意：需要緊挨著v-if一起使用

v-on

1. 作用：注冊事件=添加監(jiān)聽+提供處理邏輯
2. 語法：

• v-on:事件名="內(nèi)聯(lián)語句"

 <button v-on:click="count++">+</button>//簡寫<button @click="count++">+</button>

v-on:事件名="methods中的函數(shù)名"

1. 注意：

• 內(nèi)聯(lián)語句可以直接拿data中的數(shù)據(jù)
• method中是不能直接訪問到data中的數(shù)據(jù)的，需要的是app.屬性
• 在methods中的函數(shù)，this都是指向當(dāng)前實例

1. 調(diào)用傳參
   1. 可以額外傳參

 <button @click="func(10)">+10</button> /.../methods:{func(num){app.count=app.count+num;}}

v-bind

作用：動態(tài)的設(shè)置html的標(biāo)簽屬性 ->src url title

語法：v-bind:屬性名="表達式" 簡寫：:屬性名="表達式"

<div v-else> <img v-bind:src="imageUrl[page]" /> </div>

v-for

作用：基于數(shù)據(jù)循環(huán)，多次渲染整個元素 →數(shù)組、對象、數(shù)字

語法：v-for="(item,index) in 數(shù)組" (item每一項，index下標(biāo))

<li v-for="(item,index) in list"> {{item}} </li>

v-for中的key

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

加key相當(dāng)于每一列加了名字

不加v-for的默認行為會嘗試原地修改元素（就地復(fù)用）

v-model

作用：給表單元素使用，雙向數(shù)據(jù)綁定--->可以快速獲取或設(shè)置表單元素內(nèi)容

語法：v-model="變量"

 <input type="text" name="" id="username"v-model="username"><br><input type="password" id="password" v-model="password"><br>