欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2018年08月13日 10:13:24   作者:何必再憶  
vue是一個(gè)漸進(jìn)式的框架, 是一個(gè)輕量級(jí)的框架而angular是一個(gè)mvc框架, 各有千秋,下面小編通過本文給大家介紹angular和vue還有jquery的區(qū)別,感興趣的朋友一起看看吧

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)上是比較清晰的, 就是說其代碼組織是模塊化的, angular的view可能僅僅是一個(gè)框架, , 對(duì)view的dom操作或者時(shí)間監(jiān)聽都是在directive中實(shí)現(xiàn)的, 而且一般情況下很少直接去寫dom操作代碼, 只要你監(jiān)聽model, model發(fā)生變化后view也會(huì)發(fā)生變化, 就是雙向綁定機(jī)制, angularjs適用于單頁(yè)面開發(fā)

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

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

  auguarJS并不把模板當(dāng)做String來操作。輸入angularJS的是DOM而非string。數(shù)據(jù)綁定是DOM變化,不是字符串的連接或者innerHTML變化。使用DOM作為輸入,而不是字符串,是AngularJS區(qū)別于其它的框架的最大原因。使用DOM允許你擴(kuò)展指令詞匯并且可以創(chuàng)建你自己的指令,甚至開發(fā)可重用的組件。angular占用的內(nèi)存較小, 可以兼容主流的瀏覽器, 他擁有內(nèi)置的依賴注入的子系統(tǒng), 可以幫助開發(fā)人員更容易開發(fā), 理解和測(cè)試和應(yīng)用, DI允許你請(qǐng)求你的依賴,而不是自己找尋它們。比如,我們需要一個(gè)東西,DI負(fù)責(zé)找創(chuàng)建并且提供給我們。那么AngularJS可以做到。指令可以用來創(chuàng)建自定義的標(biāo)簽。它們可以用來裝飾元素或者操作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ǔ)法來聲明式的將數(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ù)和DOM已經(jīng)綁定在一起, 驗(yàn)證是否是響應(yīng)式的, 修改控制臺(tái)里面app.msg, 你就會(huì)看到上面渲染是列子也更新了
    出來文本插值, 還可以用綁定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類似,只是會(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 類似于js的遍歷, 用法為 v-for="(item,index) in imgs" :key="index", items是數(shù)組, item為數(shù)組中的數(shù)組元素, index是索引號(hào), key是為了更高效的查找到指定元素

    v-on 用于監(jiān)聽指定元素的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中, 都是通過在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添加全局功能, 插件的范圍沒有限制

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

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

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

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

       import vueRouter from ''vue-router';  //使用webpack的單文件組件打包的方式 會(huì)調(diào)用vue.component來注冊(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); /通過全局方法Vue.use()使用插件, 會(huì)阻止注冊(cè)相同插件多次, 只會(huì)注冊(cè)一次該插件      

angular和jquery的區(qū)別

   angular中是盡量避免操作DOM, angular是基于數(shù)據(jù)驅(qū)動(dòng), 適合做數(shù)據(jù)操作比較繁瑣的項(xiàng)目,angular適用于單頁(yè)面開發(fā),是一個(gè)比較完善的mvvm框架, 包含模板和雙向數(shù)據(jù)綁定, 路由, 模塊化, 服務(wù), 過濾器, 依賴注入等所有功能,但是angular驗(yàn)證功能比較薄弱, 需要寫很多模板標(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來實(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可以有過個(gè)vue實(shí)例

總結(jié)

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

相關(guān)文章

  • AngularJS基礎(chǔ) ng-mouseleave 指令詳解

    AngularJS基礎(chǔ) ng-mouseleave 指令詳解

    本文主要介紹AngularJS ng-mouseleave 指令,這里幫大家整理了ng-mouseleave指令的詳細(xì)資料,并附有代碼示例,有需要的小伙伴可以參考下
    2016-08-08
  • AngularJS中isolate scope的用法分析

    AngularJS中isolate scope的用法分析

    這篇文章主要介紹了AngularJS中isolate scope的用法,結(jié)合實(shí)例形式分析了isolate scope的幾種具體使用方式,需要的朋友可以參考下
    2016-11-11
  • AngularJS手動(dòng)表單驗(yàn)證

    AngularJS手動(dòng)表單驗(yàn)證

    這篇文章主要介紹了AngularJS手動(dòng)表單驗(yàn)證的相關(guān)資料,AngularJS的表單驗(yàn)證大致有兩種,一種是手動(dòng)驗(yàn)證,一種是自動(dòng)驗(yàn)證,本文重點(diǎn)介紹AngularJS手動(dòng)表單驗(yàn)證,感興趣的小伙伴們可以參考一下
    2016-02-02
  • AngularJS中的Directive實(shí)現(xiàn)延遲加載

    AngularJS中的Directive實(shí)現(xiàn)延遲加載

    延遲加載通常是直到用戶交互時(shí)才加載,那么如何實(shí)現(xiàn)延時(shí)加載的呢?下面通過本文一起學(xué)習(xí)AngularJS中的Directive實(shí)現(xiàn)延遲加載,對(duì)angularjs延時(shí)加載相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
    2016-01-01
  • @angular前端項(xiàng)目代碼優(yōu)化之構(gòu)建Api Tree的方法

    @angular前端項(xiàng)目代碼優(yōu)化之構(gòu)建Api Tree的方法

    這篇文章主要介紹了@angular前端項(xiàng)目代碼優(yōu)化之構(gòu)建Api Tree的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-12-12
  • Angular通過angular-cli來搭建web前端項(xiàng)目的方法

    Angular通過angular-cli來搭建web前端項(xiàng)目的方法

    這篇文章主要介紹了Angular通過angular-cli來搭建web前端項(xiàng)目的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • AngularJs html compiler詳解及示例代碼

    AngularJs html compiler詳解及示例代碼

    本文主要介紹AngularJs html compiler的知識(shí)講解,這里整理了相關(guān)資料及相關(guān)示例代碼,有興趣的小伙伴可以參考下
    2016-09-09
  • 對(duì)angularjs框架下controller間的傳值方法詳解

    對(duì)angularjs框架下controller間的傳值方法詳解

    今天小編就為大家分享一篇對(duì)angularjs框架下controller間的傳值方法詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-10-10
  • AngularJS基礎(chǔ) ng-readonly 指令簡(jiǎn)單示例

    AngularJS基礎(chǔ) ng-readonly 指令簡(jiǎn)單示例

    本文主要介紹AngularJS ng-readonly 指令,這里對(duì)ng-readonly指令的資料做了整理,有學(xué)習(xí)AngularJS 指令的同學(xué)可以參考下
    2016-08-08
  • angularjs表格分頁(yè)功能詳解

    angularjs表格分頁(yè)功能詳解

    本文給大家分享的是個(gè)人在項(xiàng)目中使用angularjs實(shí)現(xiàn)表格分頁(yè)功能的思路和代碼,非常的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。
    2016-01-01

最新評(píng)論