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

官網:

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

1. vue的核心

是乙個允許採用簡潔的模板語法來宣告式的將資料渲染進dom

先建立乙個字尾名為.html的檔案

**如下:

data: })

在瀏覽器視窗上出現的內容:　hello vue

出來文字插值, 還可以用繫結dom 元素屬性

檢視此處動態繫結提示資訊！

span>

div>

js**:

data:

})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中新增指令的方式, 將檢視元素與資料的繫結關係進行宣告

以上的html**表示該input元素與name資料進行繫結, 在js**總可以這樣進行初始化

var vm = new vue({

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驗證功能比較薄弱, 需要寫很多模板標籤, 而且n**iew只能有乙個, 不能巢狀多個檢視,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的區別

jquery 和js 還有 jq 掛事件

angular和vue的差別

vue引入JQ的方法

angular和vue還有jquery的區別

jquery 和js 還有 jq 掛事件

angular和vue的差別

vue引入JQ的方法

相關推薦