深入淺析angular和vue還有jquery的區(qū)別

angularjs簡單介紹和特點

創(chuàng)新互聯(lián)專注于金安企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城建設(shè)。金安網(wǎng)站建設(shè)公司,為金安等地區(qū)提供建站服務(wù)。全流程專業(yè)公司，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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

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

HTML模板將會被瀏覽器解析到DOM中。DOM然后成為AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板來生成一些指導(dǎo)，即，directive（指令）。所有的指令都負(fù)責(zé)針對view來設(shè)置數(shù)據(jù)綁定。

auguarJS并不把模板當(dāng)做String來操作。輸入angularJS的是DOM而非string。數(shù)據(jù)綁定是DOM變化，不是字符串的連接或者innerHTML變化。使用DOM作為輸入，而不是字符串，是AngularJS區(qū)別于其它的框架的最大原因。使用DOM允許你擴展指令詞匯并且可以創(chuàng)建你自己的指令，甚至開發(fā)可重用的組件。angular占用的內(nèi)存較小, 可以兼容主流的瀏覽器, 他擁有內(nèi)置的依賴注入的子系統(tǒng), 可以幫助開發(fā)人員更容易開發(fā), 理解和測試和應(yīng)用, DI允許你請求你的依賴，而不是自己找尋它們。比如，我們需要一個東西，DI負(fù)責(zé)找創(chuàng)建并且提供給我們。那么AngularJS可以做到。指令可以用來創(chuàng)建自定義的標(biāo)簽。它們可以用來裝飾元素或者操作DOM屬性。

vuejs簡單介紹特點 

官網(wǎng): http://cn.vuejs.org/

  vue是一個漸進式的框架, 是一個輕量級的框架, 也不算是一個框架, 他核心只關(guān)注圖層, 是一個構(gòu)建數(shù)據(jù)驅(qū)動的web界面,易于上手, 還便于于第三方庫或與既有項目整合,也能夠為復(fù)雜的單頁應(yīng)用程序提供驅(qū)動

　1. vue的核心

是一個允許采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進dom

先創(chuàng)建一個后綴名為.html的文件 

代碼如下:

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

js里面的　

var app = new Vue({

　　　　　　　　　　　　　　　　　　el: '#app',
　　　　　　　　　　　　　　　　　　data: {
　　　　　　　　　　　　　　　　　　　　msg: 'Hello Vue!'
　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　})

在瀏覽器窗口上出現(xiàn)的內(nèi)容:　Hello Vue

數(shù)據(jù)和ＤＯＭ已經(jīng)綁定在一起, 驗證是否是響應(yīng)式的, 修改控制臺里面app.msg, 你就會看到上面渲染是列子也更新了
　　　　出來文本插值, 還可以用綁定DOM 元素屬性　　　　　　　　　　　

　<div id="app-2">
　　　　　　　　　　<span v-bind:title="message">
　　　　　　　　　　　　查看此處動態(tài)綁定提示信息！
　　　　　　　　　　</span>
　　　　　　　　</div>

js代碼: 　　　　　　

　　var app2 = new Vue({
　　　　　　　　　　　　el: '#app-2',
　　　　　　　　　　　　data: {
　　　　　　　　　　　　　　message: '頁面加載于 ' + new Date()
　　　　　　　　　　　　}
　　　　　　　　　　})

 　　2. vue指令

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

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

v-if = 布爾值  條件渲染指令, 根據(jù)其后表達式的布爾值進行判斷是否渲染該元素, 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是數(shù)組, item為數(shù)組中的數(shù)組元素, index是索引號, key是為了更高效的查找到指定元素

v-on 用于監(jiān)聽指定元素的DOM事件 v-on:click="greet"

　　3. vue的雙向數(shù)據(jù)綁定

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

vue和angular中, 都是通過在html中添加指令的方式, 將視圖元素與數(shù)據(jù)的綁定關(guān)系進行聲明　

　<from id= "app">
　　　　　　<input type="test" v-model="name">
　　　　</from> 

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

var vm = new Vue({
　　　　　　　　　　el: "#app",
　　　　　　　　　　data:{
　　　　　　　　　　　　name: "請輸入你的名字"
　　　　　　　　　　}
　　　　　　　　})

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

4. vue的插件化　

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

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

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

添加vue實例的辦法, 將他們添加到vue-prototype上實現(xiàn)

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

import vueRouter from ''vue-router';  //使用webpack的單文件組件打包的方式 會調(diào)用vue.component來注冊全局組件或者vue.components注冊局部組件如果是后者，每個單文件組件中都不需要引入 vue,
因為單文件組件經(jīng) webpack 打包后，生成的模塊只是一個組件選項對象，被其他組件或 Vue 實例注冊時使用語法糖，只需要 字面量對象的 組件選項對象就可以了。

使用插件:

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

angular和jquery的區(qū)別

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

angular和vue的差別

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

總結(jié)

以上所述是小編給大家介紹的angular和vue還有jquery的區(qū)別，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

新聞名稱：深入淺析angular和vue還有jquery的區(qū)別
本文來源：http://muchs.cn/article20/pdpico.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、網(wǎng)頁設(shè)計公司、網(wǎng)站維護、域名注冊、App設(shè)計、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)