1.MVVM概念
2.Vue基本結(jié)構(gòu)代碼和MVVM的對(duì)應(yīng)關(guān)系
<script src="./lib/vue-2.5.16.js"></script>
<!-- 這里創(chuàng)建了一個(gè)容器,將來(lái)Vue就會(huì)控制整個(gè)容器中的所有代碼 -->
<!-- 這個(gè)被vm控制的區(qū)域,就是MVVM中的View層 -->
<div id="app">
<p>{{msg}}</p>
</div>
<script>
// new出來(lái)一個(gè)實(shí)例,這個(gè)實(shí)例就是MVVM中的VM層
const vm=new Vue({
el:"#app",//通過(guò)el屬性,指定vm調(diào)度者控制頁(yè)面上的哪個(gè)區(qū)域
data:{ //這個(gè)data對(duì)象就是MVVM中的Model層
msg:"甄嬛"
}
})
</script>
3.插值表達(dá)式
? 插值表達(dá)式的用法:表達(dá)式/三元表達(dá)式,只能用在元素的內(nèi)容區(qū)域
<div id="app">
<!-- 插值表達(dá)式的用法 : 表達(dá)式/三元表達(dá)式 -->
<p>{{msg}}</p>
<!-- 插值表達(dá)式中使用 + 拼接字符串 -->
<p>{{name+"18歲"}}</p>
<!-- 插值表達(dá)式中使用 數(shù)字運(yùn)算符 -->
<p>{{2*3}}</p>
<!-- 插值表達(dá)式中使用 三元運(yùn)算符 -->
<p>{{8%2 === 0 ? "偶數(shù)":"奇數(shù)"}}</p>
<!-- 三元表達(dá)式 從data中取值 -->
<p>{{age > 18? "已成年":"未成年"}}</p>
</div>
<script>
const vm=new Vue({
el:"#app",
data:{
msg:"華妃",
name:"jack",
age:20
}
})
</script>
4.指令v-text
? v-text是用來(lái)渲染文本的,用法: v-text="屬性名"
?注意:只能被使用在標(biāo)簽的屬性上,會(huì)把元素內(nèi)部的內(nèi)容全部替換掉,
-
v-text 會(huì)把元素內(nèi)部的內(nèi)容都替換掉
<div id="app"> <p v-text="msg">123</p> </div> const vm=new Vue({ el:"#app", data:{ msg:"這是一首簡(jiǎn)單的小情歌" } }) 結(jié)果是:這是一首簡(jiǎn)單的小情歌,,會(huì)把123替換掉
5.指令v-html
? v-html是用來(lái)渲染帶標(biāo)簽的文本,用法: v-html="屬性名"
6.插值表達(dá)式,v-text和v-html的區(qū)別
?1.插值表達(dá)式
??1.插值表達(dá)式可以渲染普通的文本,使用在標(biāo)簽的內(nèi)容innerHtml區(qū)域, 用法: {{}}
??注意:插值表達(dá)式不會(huì)清空元素中其它的內(nèi)容, 插值表達(dá)式,只是一個(gè)占位符,不會(huì)清空元素的內(nèi)容,但是在網(wǎng)速慢的情況下,會(huì)出現(xiàn)閃爍的問(wèn)題,v-text沒(méi)有閃爍問(wèn)題,使用v-cloak指令,解決插值表達(dá)式閃爍問(wèn)題
<p v-cloak>123{{msg}}456</p>
結(jié)果是: 123這是一首簡(jiǎn)單的小情歌456
? 2.v-text指令
?? v-text指令也可以用來(lái)渲染普通文本,用法:v-text="屬性名"
?? 注意:只能被使用在標(biāo)簽的屬性上,會(huì)把元素內(nèi)部的內(nèi)容全部替換掉,
<div id="app">
<p v-text="msg">123</p>
</div>
const vm=new Vue({
el:"#app",
data:{
msg:"這是一首簡(jiǎn)單的小情歌"
}
})
結(jié)果是:這是一首簡(jiǎn)單的小情歌,,會(huì)把123替換掉
? 3.v-html指令
? 1. v-html是用來(lái)渲染帶標(biāo)簽的文本,用法: v-html="屬性名"
7.v-bind指令
? ? 可以用來(lái)動(dòng)態(tài)的綁定屬性,用法: v-bind:屬性名="data中的屬性名",簡(jiǎn)寫(xiě)形式 :屬性名="data中的屬性名",可以用來(lái)綁定class樣式,用法 :class="{'類(lèi)名':布爾值}" 布爾值為true則樣式顯示,為false則樣式不顯示
8.v-for指令
?v-for能夠根據(jù)data中數(shù)據(jù)的變化自動(dòng)刷新視圖,
?注意1: v-for必須結(jié)合key屬性來(lái)使用假勿，它會(huì)唯一標(biāo)識(shí)數(shù)組中的每一項(xiàng)，未來(lái)當(dāng)數(shù)組中的那一項(xiàng)改變的時(shí)候,它會(huì)只更新那一項(xiàng)，好處就是提升性能裹唆。注意key的值唯一，不能重復(fù)
?注意2: 以下兩種情況不會(huì)觸發(fā)視圖更新
?? 1.使用數(shù)組的length屬性取改變數(shù)組的時(shí)候,不會(huì)觸發(fā)視圖更新(model層數(shù)據(jù)變化了,視圖層沒(méi)有刷新)
?? 2.使用數(shù)組下標(biāo)的方式去改變數(shù)組的時(shí)候,也不會(huì)觸發(fā)視圖更新
?? 解決方法:
?? 1.使用Vue.set(arr,index,newVal) arr是需要改變的數(shù)組,index是數(shù)組里面的項(xiàng),newVal是改變后的值,Vue.set(vm.arr3,0,{name:"小明",age:2222})
?? 2.Array.prototype.splice(),vm.arr1.splice(0,1)刪除arr1數(shù)組中的第一項(xiàng)
1.渲染數(shù)組
? 1. 數(shù)組arr1 ,item是數(shù)組中的每一項(xiàng),arr1是要循環(huán)的數(shù)組
arr1:["甄嬛","年石蘭","安陵容"],
<ul>
<li v-for="item in arr1" :key="item">{{item}}</li>
</ul>
? 2.數(shù)組arr2
arr2:[
{"name":"貂蟬",age:20},
{"name":"昭君",age:18},
],
? ? 渲染方式有兩種:
? ? ? 2.1方法1,item是數(shù)組中的每一項(xiàng),arr2是要循環(huán)的數(shù)組
<ul>
<li v-for="item in arr2" :key="item.name">{{item.name}}-----{{item.age}}</li>
</ul>
? ? ? 2.2方法2,item是數(shù)組中的每一項(xiàng),index是數(shù)組項(xiàng)的索引值,arr2是要循環(huán)的數(shù)組
<ul>
<li v-for="(item,index) in arr2" :key="index">{{item.name}}--{{item.age}}-{{index}}</li>
</ul>
? ###2.渲染對(duì)象
val,key,index分別代表值,鍵,每項(xiàng)的索引
obj:{
"郵箱":"247171",
"電話(huà)":"284561596321",
"愛(ài)好":"吃飯,睡覺(jué)"
}
<ul>
<li v-for="(val,key,index) in obj" :key="index">{{key}}:{{val}}:{{index}}</li>
</ul>
9.v-model指令
v-model指令用來(lái)雙向數(shù)據(jù)綁定：就是model和view中的值進(jìn)行同步變化 ,用法:v-model="屬性名"
10.v-on 指令
? v-on用來(lái)監(jiān)聽(tīng)事件dom事件
?用法:
? ?1.v-on:事件類(lèi)型="執(zhí)行的函數(shù)"
? ?2.簡(jiǎn)寫(xiě)@:事件類(lèi)型="執(zhí)行的函數(shù)"
? ?3.參數(shù) @:事件類(lèi)型="執(zhí)行的函數(shù)(實(shí)參)"
? ?4.通過(guò)執(zhí)行函數(shù)中添加event參數(shù)傳遞事件,注意只能是event,并且沒(méi)有雙引號(hào)
? ?5.事件修飾符可以給事件添加特殊功能, .stop阻止單擊事件繼續(xù)傳播 .prevent阻止頁(yè)面跳轉(zhuǎn)
11. v-if和v-show指令
?v-if和v-show用來(lái) 控制元素的顯示和隱藏 v-if="布爾值" v-show="布爾值" ,布爾值為true的時(shí)候顯示,為false的時(shí)候不顯示
? 兩者的區(qū)別:
?? v-if通過(guò)控制dom來(lái)控制元素的顯示和隱藏
??v-show通過(guò)控制樣式display:none來(lái)控制元素的顯示和隱藏
? 使用場(chǎng)景區(qū)別
?? 1.設(shè)計(jì)到大量dom操作的時(shí)候,我們需要使用v-show
??2.設(shè)計(jì)到異步數(shù)據(jù)渲染的時(shí)候就使用v-if
