本文目錄一覽:
Vue.js入門教程(三)雙向綁定和數據渲染
既然清楚了原理,那麼,接下來進入正題——我知道了vue怎麼安裝,那麼我怎麼使用呢?
在告訴你基礎用法之前,我還是要先告訴你一個情況。
可能要令你有點失望。vue主要是側重於數據端的。他的目的就是渲染數據和在前端調整一下數據邏輯。
他不是像jquery那樣讓你用來做特技的。就算你要做特技。你也應該通過css3/canvas而不是dom。
所謂的雙向綁定,你可以理解就是把view。(你還不清楚mvc的話,請看第一章)
和model綁定到一起。說白了,就是你js中的綁定值變了。你dom中的內容就跟著一塊變了。
vue是通過解析{{文字..}}來生成內容的。後面綁定方法,輸出內容的時候都會講到。
列表輸出使用 v-for,這些v開頭加橫杠的叫做命令
這些命令是可以自定義的。但是那都屬於高級操作,我們不用它也完全足夠支撐做一個大型項目了。
其實你回發現,這裡無論是v-for或者是v-什麼其他玩意
它都深刻的遵循了es6的語法。這裡不就是一個典型的for in 循環嗎。不過我們現在都用for of了。
你記住這個用法,它就長這樣。
前後端分離開發的關鍵在於:後台只提供介面。
我們獲得的數據多數情況下,僅僅是一個json,而mvvm的關鍵就再於解析數據在前端完成了。如果你了解jsp或者php你會了解,數據的解析在mvc中,
是由後端完成的,而html只負責顯示。
所以,當你了解了數據綁定和渲染以後,你可以第一時間先把數據輸出到頁面了。
我們前端最厲害的地方不就是處理能看得見的東西嗎?
關於Vue.js 和 react.js 的異同
react.js和vue.js的異同:
vue—react.js 的相同點:
vue和react是兩個不像相同的框架,但是他們之間也是用共同特點的,所有的前端框架都有一些相同的特點,vue和react之間最關鍵的相同之處在於,它們在被設計出來時所用的思想或者說理念是一樣的,比如說都用到了component組件,props參數傳遞,組件之間的通信,state狀態管理器,lifecircle聲明周期等等,似乎現在的前端框架都已經成為了mvc或則mvvc的樣子,雖然還有一部分前端開發還是傳統模式,但是必然會被node+webpack+vue /react—之類的自動化逐漸替代…
vue—-react.js 的不同之處:
vue和react.js最大的不同之處在於它們對DOM的渲染方式不同,vue可以直接在vue文件中使用html標籤,數據綁定時類似angular,可以進行條件渲染,而react.js則採用了jsx語法,運用虛擬DOM 的概念進行DOM對頁面元素進行渲染,獲取頁面元素需要用ref來獲取,似乎更加安全。
前端vue是什麼?
Vue.js 是一個JavaScriptMVVM庫,是一套構建用戶界面的漸進式框架。它是以數據驅動和組件化的思想構建的,採用自底向上增量開發的設計。相比於Angular.js,Vue.js提供了更加簡潔、更易於理解的API,使得我們能夠快速地上手並使用Vue.js;同時比起 React + Redux 相對複雜的架構,Vue.js 更加輕量級也更加容易上手,是初創項目的首選前端框架。Vue 的核心庫只關注視圖層,它不僅易於上手,還便於與第三方庫或既有項目整合。
今天帶領大家來了解一款漸進式JavaScript框架——Vue。
近年來,前端開發領域,舊瀏覽器逐漸淘汰,移動端開發需求逐年增加,前端交互越來越多,功能越來越複雜。架構從傳統後台MVC向REST API + 前端MV* 遷移。
MV*相當於MVC即:
Model(模型)表示應用程序核心(比如資料庫記錄列表)。
View(視圖)顯示前端的學習都是需要不斷的學習,學一天停一停相當於白學,學習效果很差,如果你想有人一起學習可以來這個扣裙,首先是132 中間是667最後是127 都是零基礎的同學,大家相互鼓勵 共同努力 只是學著玩就不建議來了!!!數據(資料庫記錄)。
Controller(控制器)處理輸入(寫入資料庫記錄)。
MVP
Model(模型)表示應用程序核心(比如資料庫記錄列表)。
View(視圖)顯示數據(資料庫記錄)。
Presenter(表示器)負責邏輯處理業務。
與MVC差別在於:
1、View與Model完全隔離。
2、Presenter與View的具體實現技術無關。
3、可以進行View的模擬測試。
MVVM(Vue就是一種MVVM框架)
Model(模型)表示應用程序核心(比如資料庫記錄列表)。
View(視圖)顯示數據(資料庫記錄)。
ViewModel(觀察者)負責把Model的數據同步到View顯示出來,還負責把View的修改同步回Model。
優點:高內聚,低耦合(可重用性、可移植性)。
Vue是一款數據驅動+組件化的前端開發框架,對比於Angular和React,Vue.js更輕量,gzip後大小只有26K (Angular 56K,React 44K),同時更易上手,學習曲線平穩,吸收兩家之長,借鑒了angular的指令和react的組件化。
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/182082.html