Vue速成day01--Vue指令詳解

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ū)別

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市椰苟,隨后出現(xiàn)的幾起案子抑月,更是在濱河造成了極大的恐慌,老刑警劉巖舆蝴,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谦絮,死亡現(xiàn)場離奇詭異,居然都是意外死亡洁仗,警方通過查閱死者的電腦和手機(jī)层皱,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來京痢,“玉大人奶甘,你說我怎么就攤上這事〖酪” “怎么了臭家?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長方淤。 經(jīng)常有香客問我钉赁,道長,這世上最難降的妖魔是什么携茂? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任你踩,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘带膜。我一直安慰自己吩谦,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布膝藕。 她就那樣靜靜地躺著式廷,像睡著了一般。 火紅的嫁衣襯著肌膚如雪芭挽。 梳的紋絲不亂的頭發(fā)上滑废,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天,我揣著相機(jī)與錄音袜爪,去河邊找鬼蠕趁。 笑死,一個胖子當(dāng)著我的面吹牛辛馆,可吹牛的內(nèi)容都是我干的俺陋。 我是一名探鬼主播,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼怀各,長吁一口氣:“原來是場噩夢啊……” “哼倔韭!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起瓢对,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤寿酌,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后硕蛹,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體醇疼,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年法焰,在試婚紗的時候發(fā)現(xiàn)自己被綠了秧荆。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡埃仪,死狀恐怖乙濒,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情卵蛉,我是刑警寧澤颁股,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站傻丝,受9級特大地震影響甘有,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜葡缰,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一亏掀、第九天 我趴在偏房一處隱蔽的房頂上張望忱反。 院中可真熱鬧,春花似錦滤愕、人聲如沸温算。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽米者。三九已至韭畸,卻和暖如春宇智,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背胰丁。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工随橘, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人锦庸。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓机蔗,卻偏偏與公主長得像,于是被迫代替她去往敵國和親甘萧。 傳聞我的和親對象是個殘疾皇子萝嘁,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,884評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 轉(zhuǎn)載自:https://blog.csdn.net/Missbelover/article/details/882...
    天字一等閱讀 1,547評論 0 10
  • 一、課程介紹 https://vuejs.lipengzhou.com/ 內(nèi)容 使用 Vue.js 系列技術(shù)棧進(jìn)行...
    她說東京很熱閱讀 290評論 0 0
  • 一扬卷、對于MVVM的理解牙言? MVVM 是 Model-View-ViewModel 的縮寫。 Model代表數(shù)據(jù)模型...
    南臺觀蕓秀閱讀 890評論 0 4
  • 2019-10-22 vue文檔 一怪得、課程介紹 https://vuejs.lipengzhou.com/ 內(nèi)容 ...
    欣簡書閱讀 557評論 0 1
  • vue文檔 一咱枉、課程介紹 https://vuejs.lipengzhou.com/ 內(nèi)容 使用 Vue.js 系...
    前端陳陳陳閱讀 291評論 0 1