? ? ? ? ? Vue框架是三大框架比較流行的框架之一连躏，相比angular框架是比較簡單的更舞，因為，我們知道angular框架是通過mvc架構(gòu)來進行的拙吉，也就是說潮孽，我們通過c層來控制modle與v層的交互，這是mvcvm來進行的筷黔，這個是通過模塊化的來管理的往史，也就是說，每個v層對應(yīng)著c層必逆，也就是說怠堪，對應(yīng)著一個控制器來進行數(shù)據(jù)的處理和邏輯的交互。angular框架就是這樣的設(shè)計思路名眉。所需要的功能和方法粟矿，我們都可以通過依賴注入來進行數(shù)據(jù)之間的傳值。在factory 工廠方法里面损拢，我們可以封裝一些方法陌粹，來進行注入到app下的所需要的數(shù)據(jù)接口。也可以通過server服務(wù)來進行數(shù)據(jù)的傳值福压。angular框架的設(shè)計思路都是以數(shù)據(jù)為中心掏秩。都是通過數(shù)據(jù)之間的交互來進行控制頁面的數(shù)據(jù)。對應(yīng)的控制器荆姆，引入不同的模塊蒙幻，來進行不同的服務(wù)之間的調(diào)用。在Vue中胆筒，是以組件開發(fā)為設(shè)計思路的邮破，一個頁面都是用小的組件來進行拼接的，從小到大的拼接模式來進行頁面的架構(gòu)的仆救。每個組件都可以對應(yīng)著一個有Vue構(gòu)造函數(shù)下的實例抒和。在構(gòu)造函數(shù)的實例中，我們可以通過數(shù)據(jù)的綁定處理彤蔽，通過實例下的不同屬性來進行設(shè)置不同的方法和數(shù)據(jù)的設(shè)置的摧莽。也就是說，Vue框架也就是以數(shù)據(jù)為中心的顿痪，所以镊辕，我們的頁面數(shù)據(jù)都是以監(jiān)聽數(shù)據(jù)為基礎(chǔ)的油够，實例的創(chuàng)建和消失都是有生命周期的，在每個生命周期中丑蛤，都會執(zhí)行不同函數(shù)來進行邏輯的數(shù)據(jù)的處理和交互叠聋，來滿足我們的項目的需求的撕阎。
? Vue實例的周期：如圖受裹；
? ? ? ? 這個是Vue下的實例生命周期。我們可以通過在不同的生命周期中虏束，可以處理不同的數(shù)據(jù)類型棉饶。比如在created函數(shù)中， 我們可以發(fā)起網(wǎng)絡(luò)請求镇匀。因為這樣照藻，我們的數(shù)據(jù)變量data已經(jīng)處理過了，因而汗侵，請求下來的數(shù)據(jù)就可以渲染到頁面中了幸缕。這就是充分利用生命周期的不同的階段來進行不同的數(shù)據(jù)請求了。我們請求下來的數(shù)據(jù)晰韵，我們可以在自定義組件里進行渲染发乔，通過傳值的方式。通過props['']方式來進行傳值雪猪。代碼如下：
? ? ? ?這是自定義組件所在的實例向自定義組件傳值栏尚。這是通過大實例來進行傳值，就是以數(shù)據(jù)為中心的只恨。自定義組件就是通過prope[''],來進行傳值译仗。
自定義的組件： 因為在自定義組件開發(fā)中，我們Vue框架中官觅，其設(shè)計思想就是以組件化開發(fā)纵菌。組件開發(fā)就是以大的組件（一個組件也可以是個頁面），也可以是個元素休涤，也就是說吞杭，頁面每個元素都可以的看做是個組件的。我們在開發(fā)項目中蹬癌，我們用的是Vue-cli腳手架來進行安裝骚勘。然后，架構(gòu)項目疑故。首先杠览，我們可以通過命令來進行安裝我們需要的項目，安裝如下：
這樣纵势，我們可以初始化我們需要的文件夾和項目架構(gòu)踱阿。因為管钳，我們利用vue框架來做單頁面應(yīng)用的，所以软舌，我們要在項目架構(gòu)中才漆，架設(shè)路由，引入模塊的操作等等佛点。
在項目中醇滥，我們的項目文件夾中，我們需要了解我們的文件夾的用途鸳玩，其中不跟，我們開發(fā)項目中窝革，經(jīng)常用的是吕座，src index.html app.vue component等等米诉。
我們可以通過思維導圖來進行看看我們的重要的文件夾的作用史侣；
這是蚪腐，我們需要的項目文件信息回季。其中正林，項目是入口是main.js文件觅廓。我們的主頁就是我們的項目展示數(shù)據(jù)的頁面，是index.html文件杈绸，在主頁里面，我們不需要做任何的改動塑娇，其內(nèi)容如下：
其中埋酬，只有一個id值為app的div奇瘦，這個盒子就是我們的項目的主vue實例耳标，也是生命周期比較長的實例次坡，項目中所有的實例都會在這個實例管理之下的砸琅。<!------ built files will be auto injected ---> 這是我們的所有的文件都是在這里插入進行的轴踱。為什么能插入這里呢诱篷？因為在這main.js中悯辙，我們可以看到其關(guān)聯(lián)一起躲撰，代碼如圖 ：?
? ? ? ? ? 通過實例中的掛載瓤狐，可以在main實例中操作荧缘，也和index.html聯(lián)系在一起了。利用template屬性來把<App></App> 引導到index.html文件里面绸罗。這樣，我們將來的項目的都會在index.html 中插入育灸。引入我們的相關(guān)的模塊的昵宇，首先是引入是 Vue 框架瓦哎，通過import (模塊的保存變量) from (模塊的名稱) 蒋譬，等等羡铲，我們引進相關(guān)的模塊，引入我們的項目的一級組件扑媚，二級組件雷恃，架設(shè)的路由條目和制定的路由規(guī)則旬痹。我們可以通過抽出去放在router文件中index.js,因為永毅，main.js中所主要的是引進的模塊和引進的項目組件，架設(shè)的路由條目健芭，和制定的路由規(guī)則若贮。這樣，就可以把相關(guān)的邏輯路由相關(guān)的代碼就可以放到一個文夾里統(tǒng)一管理熊锭，在main.js中比較好管理雪侥。放到index.js中，我們要先導出來速缨，以便在main.js中導入锌妻。這樣旬牲，我們才能用到路由的架設(shè)。
我們在main.js中原茅，我們可以引進相關(guān)的模塊來進行操作吭历，有的模塊需要全局安裝擂橘。在其他的組件都可以調(diào)用晌区。
-------------------------------------------------------------------------------------->
Vue響應(yīng)式原理：也就是數(shù)據(jù)更新的原理。相比較的是angular框架，通過臟查詢的機制來保持數(shù)據(jù)的一致性恼五。這樣哭懈，要重新查詢整個DOM,運行起來，性能比Vue就比較重你虹。而Vue是通過響應(yīng)式追蹤數(shù)據(jù)的變化的，通過把數(shù)據(jù)傳給Vue實例下的data屬性琉预，而data屬性下圆米，有setter/getter，會進行依賴追蹤娄帖，每個Vue實例都會有watch屬性也祠，每當數(shù)據(jù)變化是，就會通知watch,重新計算數(shù)據(jù)近速，而一致性關(guān)聯(lián)的組件得以更新诈嘿。這個就是Vue框架的響應(yīng)式原理。
