1. 前端框架的作用
作用
解決了原始html，css，js的UI與數據狀態之間同步的難題，避免了大量的操作DOM代碼。
使用了React，Angular和Vue，我們只需要定義一次 UI 界面，不再需要為每個操作編寫特定的 UI 代碼，同時，每個相同的狀態均有相同的輸出：當狀態改變後，框架自動更新（對應的）視圖。
簡單來說，前端框架就是已經搭建好了的web前端基本架構並且封裝了一些功能比如html文檔操作，漂亮的各種控制項等，一般用於簡化網頁設計。當我們選擇好某個前端框架進行項目開發時，只要添加自己需要的東西，就可以快速高效的完成網頁的設計
優點：更輕量，單頁面，簡單易學
缺點：不支持IE8
優點：模塊化功能強大、自定義directive非常靈活、雙向數據綁定，依賴注入
缺點：比較笨重，學習成本高，不兼容IE6/7
優點：速度快、跨瀏覽器兼容、單向數據流、兼容性好
缺點：並不是一個完整的框架，需要加上ReactRouter和Flux才能完成。
分類
vue.js
Angular
react
2. AngularJS的數據雙向綁定是怎麼實現的
Angular js (Angular.JS) 是一組用來開發Web頁面的框架、模板以及數據綁定和豐富UI組件。它支持整個開發進程，提供web應用的架構，無需進行手工DOM操作。 AngularJS很小，只有60K，兼容主流瀏覽器，與 jQuery 配合良好。雙向數據綁定可能是angularjs最酷最實用的特性,將MVC的原理展現地淋漓盡致.
AngularJS的工作原理是:HTML模板將會被瀏覽器解析到DOM中, DOM結構成為AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板, 來生成相應的NG指令,所有的指令都負責針對view(即HTML中的ng-model)來設置數據綁定。因此, NG框架是在DOM載入完成之後, 才開始起作用的.
在html中:
<body ng-app="ngApp">
<div ng-controller="ngCtl">
<label ng-model="myLabel"></label>
<input type="text" ng-model="myInput" />
<button ng-model="myButton" ng-click="btnClicked"></button>
</div>
</body>
在js中:
// angular app
var app = angular.mole("ngApp", [], function(){
console.log("ng-app : ngApp");
});
// angular controller
app.controller("ngCtl", [ '$scope', function($scope){
console.log("ng-controller : ngCtl");
$scope.myLabel = "text for label";
$scope.myInput = "text for input";
$scope.btnClicked = function() {
console.log("Label is " + $scope.myLabel);
}
}]);
如上,我們在html中先定義一個angular的app,指定一個angular的controller,則該controller會對應於一個作用域(可以用$scope前綴來指定作用域中的屬性和方法等). 則在該ngCtl的作用域內的HTML標簽, 其值或者操作都可以通過$scope的方式跟js中的屬性和方法進行綁定.
這樣, 就實現了NG的雙向數據綁定: 即HTML中呈現的view與AngularJS中的數據是一致的. 修改其一, 則對應的另一端也會相應地發生變化.
這樣的方式,使用起來真的非常方便. 我們僅關心HTML標簽的樣式, 及其對應在js中angular controller作用域下綁定的屬性和方法. 僅此而已, 將眾多復雜的DOM操作全都省略掉了.
這樣的思想,其實跟jquery的DOM查詢和操作是完全不一樣的, 因此也有很多人建議用AngularJS的時候,不要混合使用jQuery. 當然, 二者各有優劣, 使用哪個就要看自己的選擇了.
NG中的app相當於一個模塊mole, 在每個app中可以定義多個controller, 每個controller都會有各自的作用域空間,不會相互干擾.
看下邊這段html:
<div ng-app="dataApp">
單價： <input type="number" min=0 ng-model="price" ng-init="price = 299"><br>
數量： <input type="number" min=0 ng-model="quantity" ng-init="quantity = 1"><br>
總價： {{ quantity * price }}
</div>
你會驚喜地發現, 甚至不用寫一行的JS代碼, 即可完成計算並在界面展示結果.
即: 在前端html中使用{{ }}括起來的變數, 是跟AngularJS中對應的controller作用域內的屬性綁定在一起的. 實際上,{{}}等同於ng-bind指令, 即ng-bind="myData"就能將NG中的myData數據跟前端對應元素綁定在一起.這樣的話, 可以非常方便地做到從NG中獲取任意數據並實時展示在頁面上了.
另外, $scope對象還提供了一個$apply方法, 用於進行html頁面上的更新, 使用方式為:
$scope.$apply(function(){
$scope.myValue = "NewValue";
});
$scope對象, 我們可以理解為NG框架中的一個作用域對象, 在該作用域內可以做到數據和視圖的相互綁定, 同時又能與其他$scope對象的作用域隔離開來.
當然, $scope也可以實現繼承, 這部分內容在以後接觸NG框架中其他對象的時候再分別做記錄
3. 前端開發框架是什麼
常見的web前端開發框架如下：
1、Bootstrap：
主流框架之一，Bootstrap 是基於 HTML、CSS、JavaScript的，它簡潔靈活，使得 Web 開發更加快捷。
2、html5-boilerplate：
該框架可以快速構建健壯，且適應力強的web app或網站。
3、Meteor：
Meteor是新一代的開發即時web應用的開源框架，它能在較短時間內完成開發。
4、Materialize：
基於材料設計的現代化響應式前端框架。可提供默認的樣式，自定義組件。此外，Materialize還改進動畫和過渡，為開發人員提供流暢的體驗。
5、Amaze UI：
首個開源HTML5跨屏前端框架產品系列，中文排版前端的學習都是需要不斷的學習，學一天停一停相當於白學，學習效果很差，如果你想有人一起學習可以來這個扣裙，首先是132 中間是667最後是127 都是零基礎的同學，大家相互鼓勵 共同努力 只是學著玩就不建議來了!!!支持更優、本土化組件豐富。該產品系列中有專門針對移動端的HTML5混合應用開發框架Amaze UI Touch以及針對跨屏HTML5網頁開發的Amaze UI Web。
(3)前端框架的雙向綁定原理是什麼擴展閱讀：
web框架程序的作用：
Web框架使得在進行Web應用開發的時候，減少了工作量。Web框架主要用於動態網路開發，動態網路主要是指現在的主要的頁面，可以實現數據的交互和業務功能的完善。
使用Web框架進行Web開發的時候，在進行數據緩存、資料庫訪問、數據安全校驗等方面，不需要自己再重新實現，而是將業務邏輯相關的代碼寫入框架就可以。也就是說，通過對Web框架進行主觀上的「縫縫補補」，就可以實現自己進行Web開發的需求了。
以PHP為例，PHP可以在apache伺服器上進行Web開發，而不必使用框架。使用PHP進行開的時候，在不適用框架的情況下，資料庫連接就需要自己來實現，頁面的生成和顯示也是一樣。比如框架的話可以完成避免sql注入的工作，而使用PHP在不用框架的情況下，這部分要自己做。
4. 前端框架是幹啥的
近十年以來，IT行業發展火熱，衍生了很多新職業，例如UI設計師、開發工程師、軟體測試工程師等等，在眾多備受矚目的新生職業中，Web前端工程師是其中的一員。
一、Web前端三大主流框架是什麼
React：
1.聲明式設計：React採用聲明範式，可以輕松描述應用。
2.高效：React通過對DOM的模擬，最大限度地減少與DOM的交互。
3.靈活：React可以與已知的庫或框架很好地配合。
優點：
1.速度快：在UI渲染過程中，React通過在虛擬DOM中的微操作來實現對實際DOM的局部更新。
2.跨瀏覽器兼容：虛擬DOM幫助我們解決了跨瀏覽器問題，它為我們提供了標准化的API，甚至在IE8中都是沒問題的。
3.模塊化：為你程序編寫獨立的模塊化UI組件，這樣當某個或某些組件出現問題是，可以方便地進行隔離。
4.單向數據流：Flux是一個用於在JavaScript應用中創建單向數據層的架構5.同構、純粹的javascript：因為搜索引擎的爬蟲程序依賴的是服務端響應而不是JavaScript的執行，預渲染你的應用有助於搜索引擎優化。6.兼容性好：比如使用RequireJS來載入和打包，而Browserify和Webpack適用於構建大型應用。它們使得那些艱難的任務不再讓人望而生畏。缺點：React本身只是一個V而已，並不是一個完整的框架，所以如果是大型項目想要一套完整的框架的話，基本都需要加上ReactRouter和Flux才能寫大型應用。
Vue：
Vue是尤雨溪編寫的一個構建數據驅動的Web界面的庫，准確來說不是一個框架，它聚焦在V（view）視圖層。
它有以下的特性：
1.輕量級的框架
2.雙向數據綁定
3.指令
4.插件化
優點：
1.簡單：官方文檔很清晰，比Angular簡單易學。
2.快速：非同步批處理方式更新DOM。
3.組合：用解耦的、可復用的組件組合你的應用程序。
4.緊湊：~18kbmin+gzip，且無依賴。
5.強大：表達式無需聲明依賴的可推導屬性(computedproperties)。
6.對模塊友好：可以通過NPM、Bower或Duo安裝，不強迫你所有的代碼都遵循Angular的各種規定，使用場景更加靈活。
缺點：
1.新生兒：Vue.js是一個新的項目，沒有angular那麼成熟。
2.影響度不是很大：google了一下，有關於Vue.js多樣性或者說豐富性少於其他一些有名的庫。
3.不支持IE8。
Angular：
Angular是一款優秀的前端JS框架，已經被用於Google的多款產品當中。
它有以下的特性：
1.良好的應用程序結構
2.雙向數據綁定
3.指令
4.HTML模板
5.可嵌入、注入和測試
優點：
1.模板功能強大豐富，自帶了極其豐富的angular指令。
2.是一個比較完善的前端框架，包含服務，模板，數據雙向綁定，模塊化，路由，過濾器，依賴注入等所有功能；3.自定義指令，自定義指令後可以在項目中多次使用。
4.ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可復用的代碼，對於敏捷開發的團隊來說非常有幫助。
5.angularjs是互聯網巨人谷歌開發，這也意味著他有一個堅實的基礎和社區支持。
缺點：
1.angular入門很容易但深入後概念很多,學習中較難理解。
2.文檔例子非常少,官方的文檔基本只寫了api,一個例子都沒有,很多時候具體怎麼用都是google來的,或直接問misko,angular的作者。
3.對IE6/7兼容不算特別好,就是可以用jQuery自己手寫代碼解決一些。
4.指令的應用的最佳實踐教程少,angular其實很靈活,如果不看一些作者的使用原則,很容易寫出四不像的代碼,例如js中還是像jQuery的思想有很多dom操作。
5.DI依賴注入如果代碼壓縮需要顯示聲明。
5. 前端面試被問到，vue實現數據雙向綁定，原理是啥
其原理大致是這樣：
在數據渲染時使用prop渲染數據
將prop綁定到子組件自身的數據上，修改數據時修改自身數據來替代prop
watch子組件自身數據的改變，觸發事件通知父組件更改綁定到prop的數據
這樣做的好處是：父組件數據改變時，不會修改存儲prop的子組件數據，只是以子組件數據為媒介，完成對prop的雙向修改。
6. v-model的原理是什麼呢
v-model的原理簡單描述
v-model主要提供了兩個功能，view層輸入值影響data的屬性值，data屬性值發生改變會更新view層的數值變化。
其核心就是，一方面modal層通過defineProperty來劫持每個屬性，一旦監聽到變化通過相關的頁面元素更新。另一方面通過編譯模板文件，為控制項的v-model綁定input事件，從而頁面輸入能實時更新相關data屬性值。
v-model是什麼
v-model就是vue的雙向綁定的指令，能將頁面上控制項輸入的值同步更新到相關綁定的data屬性，也會在更新data綁定屬性時候，更新頁面上輸入控制項的值。
為什麼使用v-model
v-model作為雙向綁定指令也是vue兩大核心功能之一，使用非常方便，提高前端開發效率。在view層，model層相互需要數據交互，即可使用v-model。
7. 為什麼其他的前端框架不識閑雙向數據綁定
一般的都只能是單項的數據或者事件綁定的，你可以使用angularjs它是可以實現雙向的數據綁定的
8. vue中數據雙向綁定的原理是什麼
vue數據雙向綁定是通過數據劫持結合發布者-訂閱者模式的方式來實現的，其中比較關鍵的是數據劫持，下面咱們看一個例子。
varobj={}Object.defineProperty(obj,'name',{get:function(){console.log("獲取了");},set:function(){console.log('修改了');}})obj.name='fei';obj.name
Object.defineProperty( )是用來做什麼的？它可以來控制一個對象屬性的一些特有操作，比如讀寫權、是否可以枚舉。
思路分析
實現mvvm主要包含兩個方面，數據變化更新視圖，視圖變化更新數據：
三人行慕課
functionobjServer(obj){letkeys=Object.keys(obj);keys.forEach((item)=>{definedActive(obj,item,obj[item])})returnobj;}functiondefinedActive(obj,item,val){Object.defineProperty(obj,item,{get(){console.log(`${item}獲取了`)},set(newVlaue){val=newVlaue;console.log(`${item}修改了`)}})}letobj=objServer({a:1,b:2})obj.aobj.bobj.a=2;obj.b=3;
9. Angularjs 中數據雙向綁定是怎麼實現的原理是什麼
之前用artTemplate的時候，直接替換整個html會閃一下，所以自己搞了個數據綁定
主要思路我覺得就是在dom的屬性上綁一些model的欄位，如果model有變化，就去改變相應的model（整個很好做），然後更新dom。。
比如說
<div>{{person.name}}</div>
會被渲染成
<div data-binding="person.name">{{person.name}}</div>
那麼如果person.name變化了，自然能夠通過data-binding整個屬性去改變div的值
反向的話，如果model更新，我覺得應該是事件觸發的，比如說自帶就有change，blur這些
我覺得關鍵是需要non-logic的模板引擎，否則在模板里加了邏輯。。整個就跪了，因為另一個邏輯分支的內容不會被渲染到dom裡面，從而你如果model更新換了邏輯分支的話那就沒辦法了
{{if a}}
<div>{{person.name}}</div>
{{else}}
<div>{{person.age}}</div>
那麼條件a變了，你也沒法從age切到name
10. mvvm的原理和理解
MVVM是Model-View-ViewModel的簡寫。視圖模型mvvm模式的核心，它是連接view和model的橋梁。模型指的是後端傳遞的數據。視圖指的是所看到的頁面。
它有兩個方向：
一是將【模型】轉化成【視圖】，即將後端傳遞的數據轉化成所看到的頁面。實現的方式是：數據綁定。
二是將【視圖】轉化成【模型】，即將所看到的頁面轉化成後端的數據。實現的方式是：DOM 事件監聽。
這兩個方向都實現的，我們稱之為數據的雙向綁定。
MVVM的框架下視圖和模型是不能直接通信的。它們通過ViewModel來通信，ViewModel通常要實現一個observer觀察者，當數據發生變化，ViewModel能夠監聽到數據的這種變化，然後通知到對應的視圖做自動更新，而當用戶操作視圖，ViewModel也能監聽到視圖的變化，然後通知數據做改動，這實際上就實現了數據的雙向綁定。並且MVVM中的View 和 ViewModel可以互相通信。
MVC和MVVM的區別並不是VM完全取代了C，ViewModel存在目的在於抽離Controller中展示的業務邏輯，而不是替代Controller，其它視圖操作業務等還是應該放在Controller中實現。也就是說MVVM實現的是業務邏輯組件的重用。
由於mvc出現的時間比較早，前端並不那麼成熟，很多業務邏輯也是在後端實現，所以前端並沒有真正意義上的MVC模式。而我們今天再次提起MVC，是因為大前端的來到，出現了MVVM模式的框架，我們需要了解一下MVVM這種設計模式是如何一步步演變過來的。