今天給各位分享vue混合app開發(fā)框架的知識，其中也會(huì)對基于vue的app框架進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！

號稱目前最火的前端框架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 請求

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ù)!!

什么是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

對比其他框架-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 在大部分常見場景下都能提供近似的性能。通常 Vue 會(huì)有少量優(yōu)勢，因?yàn)?Vue 的 Virtual DOM 實(shí)現(xiàn)相對更為輕量一些。

不同之處就是：

數(shù)據(jù)綁定方面，vue實(shí)現(xiàn)了數(shù)據(jù)的雙向數(shù)據(jù)綁定，react數(shù)據(jù)流動(dòng)是單向的

virtual DOM不一樣,vue會(huì)跟蹤每一個(gè)組件的依賴關(guān)系,不需要重新渲染整個(gè)組件樹.而對于React而言,每當(dāng)應(yīng)用的狀態(tài)被改變時(shí),全部組件都會(huì)重新渲染,所以react中會(huì)需要shouldComponentUpdate這個(gè)生命周期函數(shù)方法來進(jìn)行控制

state對象在react應(yīng)用中不可變的,需要使用setState方法更新狀態(tài);在vue中,state對象不是必須的,數(shù)據(jù)由data屬性在vue對象中管理（如果要操作直接this.xxx）

組件寫法不一樣, React推薦的做法是 JSX , 也就是把HTML和CSS全都寫進(jìn)JavaScript了,即'all in js'; Vue推薦的做法是webpack+vue-loader的單文件組件格式,即html,css,js寫在同一個(gè)文件

對比其他框架-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ù)、可重用、可測試，也就是一個(gè)頁面由多個(gè)組件組合而成

vue中實(shí)現(xiàn)組件引入示例

第一步：import導(dǎo)入需要引入的組件文件；

第二步：注冊組件；

第三步：在需要引入組件的文件中加上組件標(biāo)簽（這個(gè)標(biāo)簽的標(biāo)簽名就是注冊的組件名字，多個(gè)單詞的和這里有xx-xx的形式）

需要注意的是：組件可以嵌套引入，也就是說組件可以引入其他組件

首先創(chuàng)建一個(gè)組件，用于被引入的組件，組件名字叫Hello.vue

————————————————

版權(quán)聲明：本文為CSDN博主「胡椒粉0121」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。

前端常用的框架有哪些？

前端常用框架匯總：

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等等

關(guān)于vue混合app開發(fā)框架和基于vue的app框架的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。