vue基礎(chǔ)
1.vm是什么?
一個同步View和Model的對象
2.插值表達式是用來做什么?
插值表達式就是用來渲染data數(shù)據(jù)
3.指令是什么?
以v-開頭的就是指令
4.插值表達式和v-text的區(qū)別?
插值表達式寫在標(biāo)簽的innnerHTML位置,而v-text是寫在標(biāo)簽的屬性位置
舉例:<div v-text = number></div>
5..插值表達式,v-text,v-html應(yīng)用場景?
1.v-html不會對標(biāo)簽進行解析
2.v-text會對標(biāo)簽進行解析
6.v-bind它是綁定給誰的?
屬性
7.v-for是用來做什么的?
用來渲染數(shù)組和對象
1.渲染數(shù)組
1>.在標(biāo)簽的屬性位置上寫上v-for = 'item in arr',
item 表示數(shù)組中的每一項
2>.在標(biāo)簽的屬性位置上寫上v-for = '(item,index) in arr',
item 表示數(shù)組中的每一項,index代表索引
2.渲染對象
1>.在標(biāo)簽的屬性位置上寫上v-for = 'value in obj',
value 表示對象中的每一項
2>.在標(biāo)簽的屬性位置上寫上v-for = '(value,,key,index) in obj',
value 表示對象中的每一項的值,index代表索引,key表示鍵
8.視圖更新何時不再進行?解決辦法?
- 當(dāng)使用數(shù)組中的length屬性去改變屬性時
- 使用書序下標(biāo)的時候怒會觸發(fā)
解決辦法:
1.使用Vue.set(arr,index,newVal),arr是數(shù)組,
index是里面的項,newVal改變后的值.
2.Array.prototype.splice()
9.key的作用和使用方式?
1.作用:
key的作用主要是為了高效的更新虛擬DOM
2.使用方式:
在 v-for='':key='唯一的id'
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue學(xué)習(xí)</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<ul id="app1">
<li v-for="(item,key) in items" :key="item.id">{{key}}--{{item.name}}--{{item.age}}</li>
</ul>
<script>
var foo = new Vue({
el:'#app1',
data:{
items:[ //數(shù)組
{name:'sunling',age:34},
{name:'tian',age:45}
]
}
});
</script>
</body>
</html>
10.v-model的使用場景及作用?
使用場景:
input/textarea/selet
作用:
在表單控件或者組件上創(chuàng)建雙向綁定
11.v-on的使用方法?
1.在標(biāo)簽的屬性位置上寫上 v-on:事件類型="事件函數(shù)"(@事件類型="事件函數(shù)")
2.通過執(zhí)行函數(shù)添加參數(shù)
3.通過在執(zhí)行函數(shù)小紅添加&event傳遞事件對象,并且不能加引號
4.事件修飾符可以給事件添加特殊功能,stop(阻止冒泡)/prevent(阻止默認(rèn)行為)
- 觸發(fā)像keydown這樣的按鍵事件時处窥，可以使用按鍵修飾符指定按下特殊的鍵后才觸發(fā)事件
12.v-if與v-show的區(qū)別?
簡單來說聋呢，v-if 的初始化較快，但切換代價高颠猴；v-show 初始化慢娜饵，但切換成本低
1.共同點
都是動態(tài)顯示DOM元素
2.區(qū)別
（1）手段：
v-if是動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素坡贺；
v-show是通過設(shè)置DOM元素的display樣式屬性控制顯隱；
（2）編譯過程：
v-if切換有一個局部編譯/卸載的過程箱舞，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件遍坟；
v-show只是簡單的基于css切換；
（3）編譯條件：
v-if是惰性的晴股，如果初始條件為假愿伴，則什么也不做；只有在條件第一次變?yōu)檎鏁r才開始局部編譯（編譯被緩存电湘？編譯被緩存后隔节，然后再切換的時候進行局部卸載);
v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存寂呛，而且DOM元素保留怎诫；
（4）性能消耗：
v-if有更高的切換消耗；
v-show有更高的初始渲染消耗昧谊；
（5）使用場景：
v-if適合運營條件不大可能改變刽虹；
v-show適合頻繁切換。
13.我們使用vue與jQuery控制我們的dom有什么不一樣?
vue:
1.操作的是dom的元素對象,也就是說數(shù)據(jù)
2.雙向綁定,簡化dom操作,傾向數(shù)據(jù)讀寫,便于后期維護
3.比較適合后臺操作
jQuery:
1.適合操作前臺用戶交互頁面
2.代碼語義化,容易理解,代碼少
3.直接操作的是dom元素
