?? Vue構(gòu)建大型單頁面電商應(yīng)用 開源啦!點(diǎn)我看源碼????
閱讀時(shí)間預(yù)估:3分鐘
啥是Vue?
當(dāng)你看到這篇文章的時(shí)候,想必這位大俠難免多少略知Vue這個(gè)世界級別的框架的來頭,華裔程序貴族尤雨溪大佬的開源作品(膜拜大佬三分鐘...),從面世至今gitHub上的點(diǎn)贊數(shù)量已經(jīng)超過Angular,React等著名框架,??的發(fā)紫,著實(shí)有后來者居上的感覺,Vue借鑒了前兩者的優(yōu)秀設(shè)計(jì)模式和思想以一種漸進(jìn)式的模式呈現(xiàn)給我們,意圖也非常明顯,小白上手首選,學(xué)習(xí)成本低,開源社區(qū)活躍,廢話不多說,接下來跟(da)著(lao)我的腳步,帶你從小白進(jìn)階大佬(chui niu)..
Vue -漸進(jìn)式JavaScript框架
介紹
大佬叮囑: 萬層高樓平地起,作為vue小白vue官方中文網(wǎng)一定要努力的通讀幾遍,案例一定要多敲幾遍哦.
- vue 中文網(wǎng)
- vue github
- Vue.js 是一套構(gòu)建用戶界面(UI)的漸進(jìn)式JavaScript框架
庫和框架有啥區(qū)別
Library
庫，本質(zhì)上是一些函數(shù)的集合。每次調(diào)用函數(shù)，實(shí)現(xiàn)一個(gè)特定的功能，接著把控制權(quán)交給使用者
- 代表：jQuery
- jQuery這個(gè)庫的核心：DOM操作，即：封裝DOM操作，簡化DOM操作
- jQuery 源碼分析系列
Framework
框架，是一套完整的解決方案，使用框架的時(shí)候，需要把你的代碼放到框架合適的地方，框架會在合適的時(shí)機(jī)調(diào)用你的代碼
- 框架規(guī)定了自己的編程方式，是一套完整的解決方案
- 使用框架的時(shí)候，由框架控制一切，我們只需要按照規(guī)則寫代碼
主要區(qū)別
You call Library, Framework calls you
-
核心點(diǎn)：誰起到主導(dǎo)作用（控制反轉(zhuǎn)）
- 框架中控制整個(gè)流程的是框架
- 使用庫，由開發(fā)人員決定如何調(diào)用庫中提供的方法（輔助）
好萊塢原則：Don't call us, we'll call you.
框架的侵入性很高（從頭到尾）
啥是MVVM?
- MVVM，一種更好的UI模式解決方案
- 從Script到Code Blocks、Code Behind到MVC、MVP、MVVM - 科普
MVC
- M: Model 數(shù)據(jù)模型（專門用來操作數(shù)據(jù)，數(shù)據(jù)的CRUD）
- V：View 視圖（對于前端來說，就是頁面）
- C：Controller 控制器（是視圖和數(shù)據(jù)模型溝通的橋梁，用于處理業(yè)務(wù)邏輯）
后端中常常采用MVC模式.
MVVM組成
- MVVM ===> M / V / VM
- M：model數(shù)據(jù)模型
- V：view視圖
- VM：ViewModel 視圖模型
優(yōu)勢對比
MVC模式，將應(yīng)用程序劃分為三大部分，實(shí)現(xiàn)了職責(zé)分離
在前端中經(jīng)常要通過 JS代碼 來進(jìn)行一些邏輯操作，最終還要把這些邏輯操作的結(jié)果現(xiàn)在頁面中。也就是需要頻繁的操作DOM
-
MVVM通過數(shù)據(jù)雙向綁定讓數(shù)據(jù)自動地雙向同步
- V（修改數(shù)據(jù)） -> M
- M（修改數(shù)據(jù)） -> V
- 數(shù)據(jù)是核心
Vue這種MVVM模式的框架，不推薦開發(fā)人員手動操作DOM
Vue中的MVVM
雖然沒有完全遵循 MVVM 模型，Vue 的設(shè)計(jì)無疑受到了它的啟發(fā)。因此在文檔中經(jīng)常會使用 vm (ViewModel 的簡稱) 這個(gè)變量名表示 Vue 實(shí)例
學(xué)習(xí)Vue要轉(zhuǎn)化JS老觀念
- 不要在想著怎么操作DOM，而是想著如何操作數(shù)據(jù)?。?！以數(shù)據(jù)來驅(qū)動開發(fā).
起步 - Hello Vue
- 安裝:npm i -S vue
<!-- 指定vue管理內(nèi)容區(qū)域，需要通過vue展示的內(nèi)容都要放到找個(gè)元素中 通常我們也把它叫做邊界 數(shù)據(jù)只在邊界內(nèi)部解析-->
<div id="app">{{ msg }}</div>
<!-- 引入 vue.js -->
<script src="vue.js"></script>
<!-- 使用 vue -->
<script>
var vm = new Vue({
// el：提供一個(gè)在頁面上已存在的 DOM 元素作為 Vue 實(shí)例的掛載目標(biāo)
el: '#app',
// Vue 實(shí)例的數(shù)據(jù)對象，用于給 View 提供數(shù)據(jù)
data: {
msg: 'Hello Vue'
}
})
</script>
Vue實(shí)例
- 注意 1：先在data中聲明數(shù)據(jù)，再使用數(shù)據(jù)
- 注意 2：可以通過 vm.$data 訪問到data中的所有屬性，或者 vm.msg
var vm = new Vue({
data: {
msg: '大家好,我是Geek-James'
}
})
vm.$data.msg === vm.msg // true
數(shù)據(jù)綁定
- 最常用的方式：Mustache(插值語法)，也就是 {{}} 語法
- 解釋：{{}}從數(shù)據(jù)對象data中獲取數(shù)據(jù)
- 說明：數(shù)據(jù)對象的屬性值發(fā)生了改變，插值處的內(nèi)容都會更新
- 說明：{{}}中只能出現(xiàn)JavaScript表達(dá)式 而不能解析js語句
- 注意：Mustache 語法不能作用在 HTML 元素的屬性上
<h1>Hello, {{ msg }}.</h1>
<p>{{ 1 + 2 }}</p>
<p>{{ isOk ? 'yes': 'no' }}</p>
<!-- ?。?！錯(cuò)誤示范?。。?-->
<h1 title="{{ err }}"></h1>
雙向數(shù)據(jù)綁定 Vue two way data binding
-
雙向數(shù)據(jù)綁定：將DOM與Vue實(shí)例的data數(shù)據(jù)綁定到一起，彼此之間相互影響
- 數(shù)據(jù)的改變會引起DOM的改變
- DOM的改變也會引起數(shù)據(jù)的變化
-
原理：Object.defineProperty中的get和set方法
- getter和setter：訪問器
- 作用：指定讀取或設(shè)置對象屬性值的時(shí)候，執(zhí)行的操作
/* defineProperty語法 介紹 */
var obj = {}
Object.defineProperty(obj, 'msg', {
// 設(shè)置 obj.msg = "1" 時(shí)set方法會被系統(tǒng)調(diào)用 參數(shù)分別是設(shè)置后和設(shè)置前的值
set: function (newVal, oldVal) { },
// 讀取 obj.msg 時(shí)get方法會被系統(tǒng)調(diào)用
get: function ( newVal, oldVal ) {}
})
Vue雙向綁定的極簡實(shí)現(xiàn)
<!-- 示例 -->
<input type="text" id="txt" />
<span id="sp"></span>
<script>
var txt = document.getElementById('txt'),
sp = document.getElementById('sp'),
obj = {}
// 給對象obj添加msg屬性，并設(shè)置setter訪問器
Object.defineProperty(obj, 'msg', {
// 設(shè)置 obj.msg 當(dāng)obj.msg反生改變時(shí)set方法將會被調(diào)用
set: function (newVal) {
// 當(dāng)obj.msg被賦值時(shí) 同時(shí)設(shè)置給 input/span
txt.value = newVal
sp.innerText = newVal
}
})
// 監(jiān)聽文本框的改變 當(dāng)文本框輸入內(nèi)容時(shí) 改變obj.msg
txt.addEventListener('keyup', function (event) {
obj.msg = event.target.value
})
</script>
動態(tài)添加數(shù)據(jù)的注意點(diǎn)
- 注意：只有data中的數(shù)據(jù)才是響應(yīng)式的，動態(tài)添加進(jìn)來的數(shù)據(jù)默認(rèn)為非響應(yīng)式
- 可以通過以下方式實(shí)現(xiàn)動態(tài)添加數(shù)據(jù)的響應(yīng)式
- 1 Vue.set(object, key, value) - 適用于添加單個(gè)屬性
- 2 Object.assign() - 適用于添加多個(gè)屬性
var vm = new Vue({
data: {
stu: {
name: 'jack',
age: 19
}
}
})
/* Vue.set */
Vue.set(vm.stu, 'gender', 'male')
/* Object.assign 將參數(shù)中的所有對象屬性和值 合并到第一個(gè)參數(shù) 并返回合并后的對象*/
vm.stu = Object.assign({}, vm.stu, { gender: 'female', height: 180 })
異步DOM更新
說明：Vue 異步執(zhí)行 DOM 更新，監(jiān)視所有數(shù)據(jù)改變，一次性更新DOM
優(yōu)勢：可以去除重復(fù)數(shù)據(jù)，對于避免不必要的計(jì)算和 避免重復(fù) DOM 操作上，非常重要
-
如果需要那到更新后dom中的數(shù)據(jù) 則需要通過 Vue.nextTick(callback)：在DOM更新后，執(zhí)行某個(gè)操作（屬于DOM操作）
- 實(shí)例調(diào)用vm.$nextTick(function () {})
methods: {
fn() {
this.msg = 'change'
this.$nextTick(function () {
console.log('$nextTick中打?。?, this.$el.children[0].innerText);
})
console.log('直接打?。?, this.$el.children[0].innerText);
}
}
Vue是個(gè)啥? 看完這篇不知道面前的這位大俠是否真正的領(lǐng)略到,歡迎留言點(diǎn)贊加評論,文章有不對的地方懇請各位大佬提出.
如果我的分享對面前的這位大俠有所啟發(fā),懇請以程序員最高禮遇點(diǎn)? 星加分享的方式鼓勵(lì)我.
關(guān)注公眾號回復(fù):學(xué)習(xí) 領(lǐng)取前端最新最全學(xué)習(xí)資料,也可以進(jìn)群和大佬一起學(xué)習(xí)交流
猛戳我點(diǎn)星星
