vue混合app開發(fā)框架(前端用Vue框架開發(fā)APP好用嗎)
本篇文章給大家談?wù)剉ue混合app開發(fā)框架,以及前端用Vue框架開發(fā)APP好用嗎對(duì)應(yīng)的知識(shí)點(diǎn),希望對(duì)各位有所幫助,不要忘了收藏本站喔。
什么是vue框架?
什么是vue
是一套構(gòu)建用戶界面的漸進(jìn)式(用到哪一塊就用哪一塊,不需要全部用上)前端框架,Vue 的核心庫只關(guān)注視圖層
vue的兼容性
Vue.js 不支持 IE8 及其以下版本,因?yàn)?Vue.js 使用了 IE8 不能模擬的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的瀏覽器。
vue學(xué)習(xí)資源
vue.js中文官網(wǎng):
vue.js源碼:
vue.js官方工具:
vue.js官方論壇:forum.vuejs.org
對(duì)比其他框架-React
React 和 Vue 有許多相似之處,它們都有使用 Virtual DOM;提供了響應(yīng)式(Reactive)和組件化(Composable)的視圖組件。將注意力集中保持在核心庫,而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫。React 比 Vue 有更豐富的生態(tài)系統(tǒng)
都有支持native的方案,React的RN,vue的Wee下
都支持SSR服務(wù)端渲染
都支持props進(jìn)行父子組件間的通信
性能方面:React 和 Vue 在大部分常見場(chǎng)景下都能提供近似的性能。通常 Vue 會(huì)有少量優(yōu)勢(shì),因?yàn)?Vue 的 Virtual DOM 實(shí)現(xiàn)相對(duì)更為輕量一些。
不同之處就是:
數(shù)據(jù)綁定方面,vue實(shí)現(xiàn)了數(shù)據(jù)的雙向數(shù)據(jù)綁定,react數(shù)據(jù)流動(dòng)是單向的
virtual DOM不一樣,vue會(huì)跟蹤每一個(gè)組件的依賴關(guān)系,不需要重新渲染整個(gè)組件樹.而對(duì)于React而言,每當(dāng)應(yīng)用的狀態(tài)被改變時(shí),全部組件都會(huì)重新渲染,所以react中會(huì)需要shouldComponentUpdate這個(gè)生命周期函數(shù)方法來進(jìn)行控制
state對(duì)象在react應(yīng)用中不可變的,需要使用setState方法更新狀態(tài);在vue中,state對(duì)象不是必須的,數(shù)據(jù)由data屬性在vue對(duì)象中管理(如果要操作直接this.xxx)
組件寫法不一樣, React推薦的做法是 JSX , 也就是把HTML和CSS全都寫進(jìn)JavaScript了,即'all in js'; Vue推薦的做法是webpack+vue-loader的單文件組件格式,即html,css,js寫在同一個(gè)文件
對(duì)比其他框架-angular
在性能方面,這兩個(gè)框架都非常的快,我們也沒有足夠的實(shí)際應(yīng)用數(shù)據(jù)來下一個(gè)結(jié)論。如果你一定想看些數(shù)據(jù)的話,你可以參考這個(gè)第三方跑分。單就這個(gè)跑分來看,Vue 似乎比 Angular 要更快一些。
在大小方面,最近的 Angular 版本中在使用了 AOT 和 tree-shaking 技術(shù)后使得最終的代碼體積減小了許多。但即使如此,一個(gè)包含了 vuex + vue-router 的 Vue 項(xiàng)目 (30kb gzipped) 相比使用了這些優(yōu)化的 Angular CLI 生成的默認(rèn)項(xiàng)目尺寸 (~130kb) 還是要小的多。
靈活性:Vue 相比于 Angular 更加靈活,Vue 官方提供了構(gòu)建工具來協(xié)助你構(gòu)建項(xiàng)目,但它并不限制你去如何組織你的應(yīng)用代碼。有人可能喜歡有嚴(yán)格的代碼組織規(guī)范,但也有開發(fā)者喜歡更靈活自由的方式。
vue.js的核心特點(diǎn)—響應(yīng)的數(shù)據(jù)綁定
傳統(tǒng)的js操作頁面:在以前使用js操作頁面的時(shí)候是這樣的,需要操作某個(gè)html元素的數(shù)據(jù),就的使用js代碼獲取元素然后在處理業(yè)務(wù)邏輯
響應(yīng)式數(shù)據(jù)綁定的方式操作頁面,可以直接使用像下面代碼那樣的寫法就可以將數(shù)據(jù)填充到頁面中
template
div id="app"
{{ message }}
/div
/template
script
export default {
name: 'app',
data () {
return {
message: 'Welcome to Your Vue.js App'
}
}
}
/script
style
/style
vue.js的核心特點(diǎn)—可組合的視圖組件
一個(gè)頁面映射為組件樹。劃分組件可維護(hù)、可重用、可測(cè)試,也就是一個(gè)頁面由多個(gè)組件組合而成
vue中實(shí)現(xiàn)組件引入示例
第一步:import導(dǎo)入需要引入的組件文件;
第二步:注冊(cè)組件;
第三步:在需要引入組件的文件中加上組件標(biāo)簽(這個(gè)標(biāo)簽的標(biāo)簽名就是注冊(cè)的組件名字,多個(gè)單詞的和這里有xx-xx的形式)
需要注意的是:組件可以嵌套引入,也就是說組件可以引入其他組件
首先創(chuàng)建一個(gè)組件,用于被引入的組件,組件名字叫Hello.vue
————————————————
版權(quán)聲明:本文為CSDN博主「胡椒粉0121」的原創(chuàng)文章,遵循CC 4.0 BY-SA版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
號(hào)稱目前最火的前端框架Vue,它有什么顯著特點(diǎn)呢?
1、Vue是什么
Vue.js 是目前最火的一個(gè)前端框架,除了可以開發(fā)網(wǎng)站,還可以開發(fā)手機(jī)App。
Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成為前端三大主流框架。
Vue.js 是一套構(gòu)建用戶界面的框架,只關(guān)注視圖層,它不僅易于上手,還便于與第三方庫或既有項(xiàng)目整合。
Vue.js 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。
2、Vue的特點(diǎn)
遵循 MVVM 模式
編碼簡潔,體積小,運(yùn)行效率高,適合移動(dòng)/PC 端開發(fā)
它本身只關(guān)注 UI, 可以輕松引入 vue 插件或其它第三庫開發(fā)項(xiàng)目
3、Vue與其他前端框架的關(guān)系
借鑒 angular 的模板和數(shù)據(jù)綁定技術(shù)
借鑒 react 的組件化和虛擬 DOM 技術(shù)
4、Vue的現(xiàn)有插件
vue-cli: vue 腳手架,用于搭建項(xiàng)目的骨架
vue-resource(axios): ajax 請(qǐng)求
vue-router: 路由
vuex: 狀態(tài)管理
vue-lazyload: 圖片懶加載
vue-scroller: 頁面滑動(dòng)相關(guān)
mint-ui: 基于 vue 的 UI 組件庫(移動(dòng)端)
element-ui: 基于 vue 的 UI 組件庫(PC 端)
5、學(xué)習(xí)Vue的思想改變
Vue的中心思想是數(shù)據(jù)驅(qū)動(dòng),像遠(yuǎn)古時(shí)代的老前輩jQuery是結(jié)構(gòu)驅(qū)動(dòng)。
大家回憶下以前我們使用jQuery寫代碼的時(shí)候,經(jīng)常是這樣寫的:
$("#myDiv").html("HelloWorld");
這些寫法首先要獲取Dom節(jié)點(diǎn),也就是Dom結(jié)構(gòu),然后再修改數(shù)據(jù)更新結(jié)構(gòu)的內(nèi)容,使用jQuery的一個(gè)很大的目的就是為了去簡化Dom的操作,而使用Vue就大不一樣了,Vue的做法就是直接this.msg=HelloWorld,然后msg就會(huì)自動(dòng)的同步到結(jié)構(gòu)上,我們所要關(guān)心的是數(shù)據(jù)內(nèi)容的改變,而不再去關(guān)心如何操作Dom結(jié)構(gòu)了。
總結(jié)一句話:不要在想著怎么操作DOM,而是想著如何操作數(shù)據(jù)!!
前端常用的框架有哪些?
前端常用框架匯總:
react框架:
create-react-app+antd(antd PC,移動(dòng)端都有)
umi+dva+antd ant design pro(管理系統(tǒng))
ReactNative(app混合開發(fā))
2.vue框架:
vue-cli+element-ui或iview(PC,移動(dòng)端,小程序都有)
vue-element-admin(管理系統(tǒng))
vue-cli3+cordova或者weex(app混合開發(fā))
3.Flutter(app混合開發(fā))
4.es6,webpack,gulp,node,包管理工具,esLint,echart,css預(yù)處理器,i18n等等
vue混合app開發(fā)框架的介紹就聊到這里吧,感謝你花時(shí)間閱讀本站內(nèi)容,更多關(guān)于前端用Vue框架開發(fā)APP好用嗎、vue混合app開發(fā)框架的信息別忘了在本站進(jìn)行查找喔。