1渊跋、Vue.js起步

1.Vue.js是什么

Vue (讀音 /vju?/腊嗡,類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是拾酝,Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用燕少。Vue 的核心庫只關(guān)注視圖層,不僅易于上手蒿囤,還便于與第三方庫或既有項(xiàng)目整合客们。另一方面,當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)材诽,Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動底挫。
Vue.js入門教程

Vue.js.png

Vue.js的特性:

  • 1.輕量級的框架

  • 2.雙向數(shù)據(jù)綁定

  • 3.指令

  • 4.插件化
    前端三大馬車:
    1.Vue 2. Angular 3. React

2.MVX框架模式

MVX框架模式:MVC+MVP+MVVM

1.MVC:Model(模型)+View(視圖)+controller(控制器),主要是基于分層的目的岳守,讓彼此的職責(zé)分開凄敢。
View通過Controller來和Model聯(lián)系碌冶,Controller是View和Model的協(xié)調(diào)者湿痢,View和Model不直接聯(lián)系,基本聯(lián)系都是單向的扑庞。
用戶User通過控制器Controller來操作模板Model從而達(dá)到視圖View的變化譬重。

2.MVP:是從MVC模式演變而來的,都是通過Controller/Presenter負(fù)責(zé)邏輯的處理+Model提供數(shù)據(jù)+View負(fù)責(zé)顯示罐氨。
在MVP中臀规,Presenter完全把View和Model進(jìn)行了分離,主要的程序邏輯在Presenter里實(shí)現(xiàn)栅隐。
并且塔嬉,Presenter和View是沒有直接關(guān)聯(lián)的,是通過定義好的接口進(jìn)行交互租悄,從而使得在變更View的時(shí)候可以保持Presenter不變谨究。
MVP模式的框架:Riot,js。

3.MVVM:MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel泣棋。Model+View+ViewModel胶哲。
View的變化會自動更新到ViewModel,ViewModel的變化也會自動同步到View上顯示。
這種自動同步是因?yàn)閂iewModel中的屬性實(shí)現(xiàn)了Observer潭辈,當(dāng)屬性變更時(shí)都能觸發(fā)對應(yīng)的操作鸯屿。
MVVM模式的框架有:AngularJS+Vue.js和Knockout+Ember.js后兩種知名度較低以及是早起的框架模式澈吨。

3.現(xiàn)代的前端開發(fā)模式

前端開發(fā)絕不僅僅寫HTML和CSS
新的概念:ES6、Node.js寄摆、npm谅辣、前端工程化、SPA婶恼、組件化開發(fā)等屈藐,新的東西在不斷優(yōu)化我們的開發(fā)模式,改變我們的編程思想熙尉。

4.Vue.js起步練習(xí)

使用Vue.js的兩種方式:

  • 通過引入CDN后直接使用或者下載后使用(較為簡單)
  • 使用命令行工具CLI搭建腳手架去編寫對應(yīng)的內(nèi)容
    頁面起步步驟:
    1.引入圖中的script代碼联逻,將Vue.js引入到我們的項(xiàng)目中并可以使用
    Script代碼.png

    2.起步頁面:
    起步頁面.png

    注意點(diǎn):
  • data用于數(shù)據(jù)的存儲,可以設(shè)置對應(yīng)的數(shù)據(jù)检痰,data的值也是一個對象包归,類型可以是字符串、number铅歼、對象公壤、數(shù)組。
  • el代表element椎椰,指需要獲取的元素厦幅,一定是html中的根容器元素
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市慨飘,隨后出現(xiàn)的幾起案子确憨,更是在濱河造成了極大的恐慌怀泊,老刑警劉巖壁涎,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異银受,居然都是意外死亡圈膏,警方通過查閱死者的電腦和手機(jī)塔猾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來稽坤,“玉大人丈甸,你說我怎么就攤上這事∧蛲剩” “怎么了睦擂?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長茫多。 經(jīng)常有香客問我祈匙,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任夺欲,我火速辦了婚禮跪帝,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘些阅。我一直安慰自己伞剑,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布市埋。 她就那樣靜靜地躺著黎泣,像睡著了一般。 火紅的嫁衣襯著肌膚如雪缤谎。 梳的紋絲不亂的頭發(fā)上抒倚,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天,我揣著相機(jī)與錄音坷澡,去河邊找鬼托呕。 笑死,一個胖子當(dāng)著我的面吹牛频敛,可吹牛的內(nèi)容都是我干的项郊。 我是一名探鬼主播,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼斟赚,長吁一口氣:“原來是場噩夢啊……” “哼着降!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起拗军,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤任洞,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后食绿,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體侈咕,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年器紧,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片楼眷。...
    茶點(diǎn)故事閱讀 38,814評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡铲汪,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出罐柳,到底是詐尸還是另有隱情掌腰,我是刑警寧澤,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布张吉,位于F島的核電站齿梁,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜勺择,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一创南、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧省核,春花似錦稿辙、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至旧噪,卻和暖如春吨娜,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背淘钟。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工萌壳, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人日月。 一個月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓袱瓮,卻偏偏與公主長得像,于是被迫代替她去往敵國和親爱咬。 傳聞我的和親對象是個殘疾皇子尺借,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,728評論 2 351

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