轉自：cnblogs.com/longsf/p/66

angularjs簡單介紹和特點

首先angular是一個mvc框架, 使用mvc解耦, 採用model, controller以及view的方式去組織代碼, 會將一個html頁面分成若干個模塊, 每個模塊都有自己的scope, service, directive, 各個模塊之間也可以進行通信, 但是整體結構上是比較清晰的, 就是說其代碼組織是模塊化的, angular的view可能僅僅是一個框架, , 對view的dom操作或者時間監聽都是在directive中實現的, 而且一般情況下很少直接去寫dom操作代碼, 只要你監聽model, model發生變化後view也會發生變化, 就是雙向綁定機制, angularjs適用於單頁面開發

　　在angularJS中，一個模板就是一個HTML文件。但是HTML的內容擴展了，包含了很多幫助你映射model到view的內容。

　　HTML模板將會被瀏覽器解析到DOM中。DOM然後成為AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板來生成一些指導，即，directive（指令）。所有的指令都負責針對view來設置數據綁定。

　　auguarJS並不把模板當做String來操作。輸入angularJS的是DOM而非string。數據綁定是DOM變化，不是字元串的連接或者innerHTML變化。使用DOM作為輸入，而不是字元串，是AngularJS區別於其它的框架的最大原因。使用DOM允許你擴展指令辭彙並且可以創建你自己的指令，甚至開發可重用的組件。angular佔用的內存較小, 可以兼容主流的瀏覽器, 他擁有內置的依賴注入的子系統, 可以幫助開發人員更容易開發, 理解和測試和應用, DI允許你請求你的依賴，而不是自己找尋它們。比如，我們需要一個東西，DI負責找創建並且提供給我們。那麼AngularJS可以做到。指令可以用來創建自定義的標籤。它們可以用來裝飾元素或者操作DOM屬性。

vuejs簡單介紹特點

官網: cn.vuejs.org/

　　 vue是一個漸進式的框架, 是一個輕量級的框架, 也不算是一個框架, 他核心只關注圖層, 是一個構建數據驅動的web界面,易於上手, 還便於於第三方庫或與既有項目整合,也能夠為複雜的單頁應用程序提供驅動

　　1. vue的核心

　　　　是一個允許採用簡潔的模板語法來聲明式的將數據渲染進dom

　　　　先創建一個後綴名為.html的文件

　　　　代碼如下:

　　　　　　html: <div id="app"></div>

　　 js裡面的　var app = new Vue({

　　　　　　　　　　　　　　　　　　el: #app,

　　　　　　　　　　　　　　　　　　data: {

　　　　　　　　　　　　　　　　　　　　msg: Hello Vue!

　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　　　})

　　　　　　在瀏覽器窗口上出現的內容:　Hello Vue

　　　　數據和ＤＯＭ已經綁定在一起, 驗證是否是響應式的, 修改控制檯裡面app.msg, 你就會看到上面渲染是列子也更新了

　　　　出來文本插值, 還可以用綁定DOM 元素屬性

　　　　　　　　<div id="app-2">

　　　　　　　　　　<span v-bind:title="message">

　　　　　　　　　　　　查看此處動態綁定提示信息！

　　　　　　　　　　</span>

　　　　　　　　</div>

　　　　　　　　js代碼:

　　　　　　　　　　var app2 = new Vue({

　　　　　　　　　　　　el: #app-2,

　　　　　　　　　　　　data: {

　　　　　　　　　　　　　　message: 頁面載入於 + new Date()

　　　　　　　　　　　　}

　　　　　　　　　　})

2. vue指令

指令帶有前綴v-, 以表示他們是Vue提供的特殊屬性, 他們會在渲染的DOM上應用特殊的響應式行為

　　　　v-bind: v-bind : str = "msg" 將這個元素的節點的str屬性和vue實例對象的msg屬性保持一致

　　　　v-if = 布爾值 條件渲染指令, 根據其後表達式的布爾值進行判斷是否渲染該元素, v-if只會渲染他身後表達式為true的元素

　　　　v-show = 布爾值 和v-if類似,只是會渲染他身後表達式為false的元素, 而且會給這樣的元素添加css的代碼, style = "display:none"

　　　　v-else 必須v-if/v-show指令後, 不然就不會起作用, 如果v-if/v-show的指令表達式為true, 則else就不顯示, 如果v-if/v-show指令的表達式為false, 則else元素會顯示在頁面上

　　　　v-for 類似於js的遍歷, 用法為 v-for="(item,index) in imgs" :key="index", items是數組, item為數組中的數組元素, index是索引號, key是為了更高效的查找到指定元素

　　　　v-on 用於監聽指定元素的DOM事件 v-on:click="greet"

3. vue的雙向數據綁定

vueJS是使用ES5提供的Object.defineProperty()方法, 監控對數據的操作, 從而可以自動觸發數據, 並且, 由於是在不同的數據上觸發同步, 可以精確的將變更發送給綁定的視圖, 而不是對所有的數據都執行一次檢測

　　　　vue和angular中, 都是通過在html中添加指令的方式, 將視圖元素與數據的綁定關係進行聲明

　　　　<from id= "app">

　　　　　　<input type="test" v-model="name">

　　　　</from>

　　　　以上的html代碼表示該input元素與name數據進行綁定, 在js代碼總可以這樣進行初始化

　　　　　　var vm = new Vue({

　　　　　　　　　　el: "#app",

　　　　　　　　　　data:{

　　　　　　　　　　　　name: "請輸入你的名字"

　　　　　　　　　　}

　　　　　　　　})

　　　　　　代碼執行正確後, 頁面上input元素對應的位置會顯示上面的代碼給出的初始值 "請輸入你的名字", 由於雙向綁定數據已經建立, 因此, 在vm.name="小米", 則input也會更新為小明, 在頁面input上輸入小明, 則vm.name獲取的值為小明

　　4. vue的插件化

　　　　插件通常會為vue添加全局功能, 插件的範圍沒有限制

　　　　添加全局的方法或者屬性 vue-element 這個我並不是很懂

　　　　添加全局資源 指令/過濾器/ 過渡

　　　　添加vue實例的辦法, 將他們添加到vue-prototype上實現

　　　　引入一個庫, 來提供自己的api, 同時提供上面的一個或者多個功能, 如 vue-router

　　　　　　　import vueRouter from vue-router; //使用webpack的單文件組件打包的方式 會調用vue.component來註冊全局組件或者vue.components註冊局部組件如果是後者，每個單文件組件中都不需要引入 vue,

因為單文件組件經 webpack 打包後，生成的模塊只是一個組件選項對象，被其他組件或 Vue 實例註冊時使用語法糖，只需要 字面量對象的 組件選項對象就可以了。

　　　　使用插件:

　　　　　　　vue.use(vueRouter); /通過全局方法Vue.use()使用插件, 會阻止註冊相同插件多次, 只會註冊一次該插件

angular和jquery的區別

　　 angular中是盡量避免操作DOM, angular是基於數據驅動, 適合做數據操作比較繁瑣的項目,angular適用於單頁面開發,是一個比較完善的mvvm框架, 包含模板和雙向數據綁定, 路由, 模塊化, 服務, 過濾器, 依賴注入等所有功能,但是angular驗證功能比較薄弱, 需要寫很多模板標籤, 而且ngview只能有一個, 不能嵌套多個視圖,angular的兼容性比較好, jquery是基於操作DOM, 適用於操作DOM比較多的項目, jquery是一個庫, 比較大,兼容大部分瀏覽器, 有豐富的插件, 可拓展性強, jquery不能向後兼容, 使用插件時,可能會有衝突,

angular和vue的差別

　　一angular是mvvm框架, 而vue是一個漸進式的框架, 相當於view層, 都有雙向數據綁定, 但是angular中的雙向數據綁定是基於臟檢查機制, vue的雙向數據綁定是基於ES5的getter和setter來實現, 而angular是有自己實現一套模板編譯規則,vue比angular更輕量, 性能上更高效, 比angular更容易上手, 學習成本低, vue需要一個el對象進行實例化, 而angular是整個html頁面下的,單頁面應用, 而vue可以有過個vue實例

我從事行業工作8年了，工作之餘蒐集了一些視頻資料

有JAVA高級架構師、系統高級架構師、大數據、機器（深度）學習/數據挖掘/數據分析/演算法/計算機視覺、Android、IOS、Web前端、JavaScript、WebApp（React Native）、微信小程序開發、C、C++、Python開發運維、Linux運維架構內核、PHP、.Net、資料庫、UID、遊戲開發、軟體測試、網路編程、FFmpeg開發、計算機軟考等教程

我把資料都掛在了店裡，也算是物盡其用，希望能幫到需要的人，不用費時在找資料；

資料也在不斷更新中，不論是新手，還是老手，都能找到你需要的資料；

推薦閱讀：

相關文章