vue簡介
Vue.js 是什么 :
1. Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架
------------------------------------------------------------------------------------------
Vue.js 作用 :
1. Vue 核心庫 只關(guān)注視圖層 , 通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件
2. Vue 將界面拆分成一個個組件, 通過組件來構(gòu)建界面 , 用自動化 工具來生成單頁面
前端主要工作 :
主要負(fù)責(zé)于 MVC 的 V 這一層 ; 主要和 界面 打交道
為什么要學(xué)習(xí)框架 :
企業(yè)中使用框架可以 提高效率
以前的開發(fā)模式 :
原生JS -> Jquery 之類的庫 -> 前端模板引擎 -> Vue,js 之類的框架
( 能夠幫我們健身不必要的DOM操作,提高渲染效率,雙向數(shù)據(jù)綁定的概念,我們前端程序員只需要關(guān)系數(shù)據(jù)的業(yè)務(wù)邏輯,不在關(guān)心DOM是如何渲染的 )
框架和庫 區(qū)別 :
框架 : 是一套完整的解決方案 , 對項目侵入性 比較大 , 項目如果需要 更換框架 , 則需要 重新架構(gòu) 整個 項目
庫( 插件 ) : 提高一個小功能 , 對項目侵入性比較小 , 如果某個庫 無法完成 某些需求, 可以很容易 切換 到 其他的 庫實現(xiàn) 需求
補(bǔ)充 : Node 中的 MVC? 與 前端 中的 MVVM 之間的區(qū)別
MVC 是后端的分成開發(fā)的概念 :
Model( 模塊 )層 : 處理數(shù)據(jù)的CRUD( 增(Create)潮秘、查(Retrieve)需纳、改(Update)戴已、刪(Delete) )
View( 前端視圖 )層 : 前端頁面
Controller( 控制 )層 : 業(yè)務(wù)邏輯層 ( 路由也是這個層里面有部分 )
MVVM 前端視圖層( view )概念 : 主要關(guān)注于 視圖層分離
MVVM 把前端的視圖層市俊，分為了 三部分 Model, View , VM( 調(diào)度者 )ViewModel
補(bǔ)充 : 單向綁定 雙向綁定
單向綁定非常簡單，就是把Model綁定到View，當(dāng)我們用 JS代碼 更新Model( 數(shù)據(jù) )時，View就會自動更新婆殿。
Model? VM? View
有單向綁定，就有雙向綁定罩扇。如果用戶更新了View婆芦，Model的數(shù)據(jù)也自動被更新了，這種情況就是雙向綁定喂饥。
Vue 雙向綁定的原理 :
VUE實現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty( ) 這個方法重新定義了對象獲取屬性值(get)和設(shè)置屬性值(set)的操作來實現(xiàn)的
延伸 :
在javaScript中消约，對象的屬性分為兩種類型：數(shù)據(jù)屬性和訪問器屬性。
1.數(shù)據(jù)屬性:默認(rèn) （可以動態(tài)控制屬性的增刪改查權(quán)限）
var person = {
? ? name:'張三',
? ? age:18,
? ? hobby:'足療愛好者'
}
//1.刪除權(quán)限
Object.defineProperty(person,'name',{
? ? configurable:false,//不可刪除的
} )
delete person.name;//無效
//2.遍歷權(quán)限
Object.defineProperty ( person,'hobby', {
? ? enumerable:false //不可被枚舉
} )
for( var key in person ){
? ? console.log( person[ key ] )? // hobby不可被枚舉
}
3.查詢權(quán)限
Object.defineProperty( person,'age',{
? ? value:88 // 訪問到的的數(shù)據(jù)值
} )
console.log( person.age ) // age 的數(shù)據(jù)值 固定為 88
//4.讀寫權(quán)限
Object.defineProperty( person,'name',{
? ? writable:false? //不可被枚舉
} )
person.name = '李四'; // 無效
Object.defineProperty( )
第一個參數(shù)：對象
第二個參數(shù)：屬性
第三個參數(shù)：權(quán)限 默認(rèn)都是true
? ? configurable?: boolean? ? 可刪除的
? ? enumerable?: boolean? ? 可遍歷的
? ? value?: any? ? ? ? ? ? ? ? ? ? ? 訪問的數(shù)據(jù) 查詢
? ? writable?: boolean? ? ? ? ? 可修改的
2.訪問器屬性：
( 監(jiān)聽對象屬性的狀態(tài)员帮，可以攔截對象的行為
( 賦值與取值 ) ,MVVM,雙向綁定或粮，設(shè)計模式)
set? :? 賦值的時候會執(zhí)行這個方法
get ：取值的時候會執(zhí)行這個方法
------------------------------------------------------------
1. 數(shù)據(jù)屬性和訪問器屬性不能混用，只能同時設(shè)置某一種
2. 在get與set內(nèi)部使用 this.屬性 會導(dǎo)致死循環(huán)
3. 需要綁定的 屬性 對象中對應(yīng)的屬性 前面加 '_' 下劃線
var student = {? ?
? ? _name : '張三',
? ? age : 20,
? ? hobby : '段子手'
}
-----------------------------------------------------------------------------------
1. 需要綁定的 屬性 對象中對應(yīng)的屬性 前面加 '_' 下劃線
2. 下面的 參數(shù)二 所寫的 屬性不加 '_' , 此屬性 與 對象中 '_'屬性 建立橋梁對應(yīng)
3. 有人 修改了 第二個參數(shù) 所綁定的屬性, 觸發(fā) set 方法, value 為 修改的值
-----------------------------------------------------------------------------------
Object.defineProperty( student , 'name' , {
? ? set : function( value ){
? ? ? ? console.log( '有人居然想要改我的name屬性' )
? ? ? ? this._name = value;
? ? },
? ? get : function(){
? ? ? ? return this._name;
? ? }
} )
對應(yīng)到 Vue
1. 通過 v-bind 綁定屬性 到 Object.defineProperty 第二個參數(shù)
2. new Vue 一個實例對象 , 里面有 { } 對象, data 存放數(shù)據(jù),
3. 操作數(shù)據(jù), data 里面數(shù)據(jù) 發(fā)生了改變, 就進(jìn)入到了 set 方法中, html 元素 對應(yīng)的 綁定屬性值 也改變
? ? var box = document.getElementById('box')
? ? var vm = {
? ? ? ? _backgroundColor : 'green'
? ? }
? ? Object.defineProperty( vm, 'backgroundColor',{
? ? ? ? set : function ( value ) {
? ? ? ? ? ? box.style.backgroundColor = value
? ? ? ? ? ? this._backgroundColor = value
? ? ? ? },
? ? ? ? get : function ( ) {
? ? ? ? ? return this._backgroundColor
? ? ? ? }
? ? })
? ........... ( 后面操作數(shù)據(jù)改變就 動態(tài)修改 )
