深入淺析angular和vue還有jquery的區別

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簡單介紹特點 

　　官網: http://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實例

總結

以上所述是小編給大家介紹的angular和vue還有jquery的區別，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！