Vue
1、作者:尤雨溪
2痊项、官網(wǎng):https://cn.vuejs.org
3、漸進(jìn)式JavaScript 框架
漸進(jìn)式:主張最少 jquery:主要用來處理動畫 bootstrap:ui框架(響應(yīng)式、組件) 數(shù)據(jù)請求:ajax做裙、axios
4、優(yōu)點(diǎn):
易用肃晚、靈活锚贱、搞笑、模塊化友好关串、SPA(單頁面應(yīng)用) 多頁面應(yīng)用:一個url-->1個HTML拧廊,多個url-->多個HTML,有利于SEO優(yōu)化悍缠,出現(xiàn)白屏 單頁面應(yīng)用:多個url-->1個HTML卦绣,不利于SEO優(yōu)化、首屏加載慢飞蚓,不會出現(xiàn)白屏
5滤港、缺點(diǎn):
不利于SEO優(yōu)化 首屏加載慢 不支持IE 6 7 8
6、核心:
數(shù)據(jù)驅(qū)動 組件系統(tǒng)
7趴拧、引入方式:
1溅漾、cdn:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2、npm(推薦):npm i vue –save
3著榴、腳手架
使用
1添履、el掛載點(diǎn)
new Vue({
// 掛載點(diǎn)會根據(jù)css選擇器來選擇對應(yīng)的掛載位置
// 如果匹配到多個掛載點(diǎn),只有第一個生效脑又,后面的不生效
// 不要將vue掛載到html或者body上
// 我們推薦使用id暮胧,直接掛載到這個id上,因?yàn)閕d具備唯一性
el: "#app"
})
2问麸、data往衷、methods
new Vue({
el:'#app',
// data用來存放數(shù)據(jù)、變量
data:{
name:'孫尚香'
},
// methods用來存放函數(shù)
methods: {
// fn:function(){
// console.log(111);
// }
fn(){
console.log(111);
}
}
})
3严卖、數(shù)據(jù)綁定
{{}} 優(yōu)點(diǎn):方便 缺點(diǎn):不能識別標(biāo)簽席舍,首屏?xí)霈F(xiàn){{}}
v-html 優(yōu)點(diǎn):可以識別標(biāo)簽,首屏不會出現(xiàn){{}} 缺點(diǎn):寫法麻煩
v-text 優(yōu)點(diǎn):首屏不會出現(xiàn){{}} 缺點(diǎn):不能識別標(biāo)簽并且寫法麻煩
4哮笆、v-bind:
動態(tài)數(shù)據(jù)綁定
<img v-bind:src="imgSrc" v-bind:imgTitle="title"> //正常寫法
<img :src="imgSrc1"> //簡寫
注意:1来颤、v-bind: 不僅可以綁定已經(jīng)存在的屬性,還可以綁定自定義屬性
2稠肘、v-bind: 可以簡寫成:
5福铅、v-model
雙向數(shù)據(jù)綁定
//視圖部分
{{name}}
<input type="text" v-model="name">
//模型部分
new Vue({
el:'#app',
data:{
name:'妲己'
}
})
6、v-if和v-show
//顯示與隱藏
<p v-if="true">{{name}}</p>
<p v-show="true">{{name}}</p>
區(qū)別:v-if采用的是惰性加載(根本就不加載這個DOM節(jié)點(diǎn))启具。而v-show是添加了display這個樣式本讥。
使用場景:如果頻繁切換的話建議使用v-show
7、v-else
v-else一定要緊挨著v-if
8鲁冯、v-for
<p v-for="(item,index) in arr" :haha="item.title">
{{item}}---{{index}}
</p>
指令
v-html
v-text
v-bind:
v-model
v-if
v-show
v-else
v-for
面試題
1拷沸、vue與其它框架對比的優(yōu)勢和劣勢?
答:優(yōu)勢:擅長處理數(shù)據(jù)的增刪改差薯演。劣勢:不利于SEO優(yōu)化撞芍、不支持IE6 7 8、首屏加載慢
2跨扮、mvvm框架是什么序无?它和其它框架(jquery)的區(qū)別是什么?哪些場景適合衡创?
答:M-model模型 V-view視圖 VM-view model視圖模型帝嗡,通過view model來改變,它是模型和視圖的中間橋梁璃氢。mvvm擅長處理數(shù)據(jù)的增刪改查哟玷,而jquery擅長處理動畫
3、vue等單頁面應(yīng)用及其優(yōu)缺點(diǎn)
4一也、說出至少4種vue當(dāng)中的指令和它的用法
5巢寡、v-if 和 v-show 區(qū)別