angularjs簡(jiǎn)單介紹和特點(diǎn)

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

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

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

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

vuejs簡(jiǎn)單介紹特點(diǎn) 

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

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

　　1. vue的核心

　　　　是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式的將數(shù)據(jù)渲染進(jìn)dom

　　　　先創(chuàng)建一個(gè)后綴名為.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àn)證是否是響應(yīng)式的, 修改控制臺(tái)里面app.msg, 你就會(huì)看到上面渲染是列子也更新了
　　　　出來(lái)文本插值, 還可以用綁定DOM 元素屬性　　　　　　　　　　　　　

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

　　　　　　　　js代碼: 　　　　　　　　

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

 　　2. vue指令

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

　　　　v-bind:  v-bind : str = "msg" 將這個(gè)元素的節(jié)點(diǎn)的str屬性和vue實(shí)例對(duì)象的msg屬性保持一致

　　　　v-if = 布爾值  條件渲染指令, 根據(jù)其后表達(dá)式的布爾值進(jìn)行判斷是否渲染該元素, v-if只會(huì)渲染他身后表達(dá)式為true的元素

　　　　v-show = 布爾值 和v-if類(lèi)似,只是會(huì)渲染他身后表達(dá)式為false的元素, 而且會(huì)給這樣的元素添加css的代碼, style = "display:none"

　　　　v-else 必須v-if/v-show指令后, 不然就不會(huì)起作用, 如果v-if/v-show的指令表達(dá)式為true, 則else就不顯示, 如果v-if/v-show指令的表達(dá)式為false, 則else元素會(huì)顯示在頁(yè)面上      

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

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

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

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

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

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

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

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

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

　　4. vue的插件化　

　　　　插件通常會(huì)為vue添加全局功能, 插件的范圍沒(méi)有限制

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

　　　　添加全局資源 指令/過(guò)濾器/ 過(guò)渡

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

　　　　引入一個(gè)庫(kù), 來(lái)提供自己的api, 同時(shí)提供上面的一個(gè)或者多個(gè)功能, 如 vue-router

　　　　　　　import vueRouter from ''vue-router';  //使用webpack的單文件組件打包的方式 會(huì)調(diào)用vue.component來(lái)注冊(cè)全局組件或者vue.components注冊(cè)局部組件如果是后者，每個(gè)單文件組件中都不需要引入 vue,
因?yàn)閱挝募M件經(jīng) webpack 打包后，生成的模塊只是一個(gè)組件選項(xiàng)對(duì)象，被其他組件或 Vue 實(shí)例注冊(cè)時(shí)使用語(yǔ)法糖，只需要 字面量對(duì)象的 組件選項(xiàng)對(duì)象就可以了。

　　　　使用插件:

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

angular和jquery的區(qū)別

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

angular和vue的差別

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

總結(jié)

以上所述是小編給大家介紹的angular和vue還有jquery的區(qū)別，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論