很久很久沒有寫文章了。記得上一次寫此類文章還是半年前。半年了，一直在混日子。今天，自己突然想要記下些什么東西留下些什么來表示自己一直在努力在奮斗。
半年前自己寫的"賣座網(wǎng)"。自己只是仿寫了些頁面后臺除了登錄注冊之外也沒些什么？關(guān)鍵是基礎(chǔ)的東西，基礎(chǔ)的學(xué)會了頁面就會寫起來很順手。自己基礎(chǔ)也不是很牢固。于是決定重新開始學(xué)習(xí)。
我準(zhǔn)備從vue開始從新學(xué)起每天記錄自己學(xué)習(xí)的歷程。
Vue.js介紹
- Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫
- Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動的Web界面的庫。
- Vue.js是一套構(gòu)建用戶界面的 漸進(jìn)式框架。
MVVM框架
MVVM是Model-View-ViewModel的簡寫。即模型-視圖-視圖模型。【模型】指的是后端傳遞的數(shù)據(jù)?！疽晥D】指的是所看到的頁面?！疽晥D模型】mvvm模式的核心，它是連接view和model的橋梁。它有兩個(gè)方向：一是將【模型】轉(zhuǎn)化成【視圖】，即將后端傳遞的數(shù)據(jù)轉(zhuǎn)化成所看到的頁面。實(shí)現(xiàn)的方式是：數(shù)據(jù)綁定。二是將【視圖】轉(zhuǎn)化成【模型】，即將所看到的頁面轉(zhuǎn)化成后端的數(shù)據(jù)。實(shí)現(xiàn)的方式是：DOM 事件監(jiān)聽。這兩個(gè)方向都實(shí)現(xiàn)的，我們稱之為數(shù)據(jù)的雙向綁定。總結(jié)：在MVVM的框架下視圖和模型是不能直接通信的。它們通過ViewModel來通信，ViewModel通常要實(shí)現(xiàn)一個(gè)observer觀察者，當(dāng)數(shù)據(jù)發(fā)生變化，ViewModel能夠監(jiān)聽到數(shù)據(jù)的這種變化，然后通知到對應(yīng)的視圖做自動更新，而當(dāng)用戶操作視圖，ViewModel也能監(jiān)聽到視圖的變化，然后通知數(shù)據(jù)做改動，這實(shí)際上就實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定。
Vue項(xiàng)目
vue有兩種使用一是直接引用這種方法是可以一部分使用vue也可以全部使用。而npm的方式基本就是全部使用了。
直接引用
代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入vue -->
<body>
<!-- 要與下面el上的對應(yīng) -->
<div id="app"></div>
</body>
<script>
new Vue({
el: '#app',
//這是id的名字一定要與上面的對應(yīng)
data: { //這里放置你從數(shù)據(jù)庫獲取數(shù)據(jù)
},
methods:{
//自己定義方法可以在里面寫獲取數(shù)據(jù)據(jù)方法然后賦值
},
})
</script>
</html>
npm安裝
npm安裝用的是vue官方腳手架vue-cli，當(dāng)然要自己有能力也可以自己使用webpack配一個(gè)，這里我就使用最簡單vue-cli。
首先node環(huán)境是OK的，使用cmd打開電腦的操作系統(tǒng)，直接命令行下安裝必要的包。
npm install webpack -g
npm install -g vue-cli
創(chuàng)建項(xiàng)目
vue init webpack （項(xiàng)目名稱）
進(jìn)入項(xiàng)目
cd （項(xiàng)目名稱）
安裝npm依賴
npm install
運(yùn)行項(xiàng)目
npm run dev
這是vue2.0的安裝方式還有vue3.0方式有些變化但大同小異
新建項(xiàng)目
vue create （項(xiàng)目名稱）
運(yùn)行項(xiàng)目
npm run serve
Vue的生命周期
- beforeCreate //實(shí)例創(chuàng)建前狀態(tài) el與data都為undefined
- created //創(chuàng)建完畢狀態(tài) el為undefined， data 里面已經(jīng)有數(shù)據(jù)
- beforeMount //掛載前狀態(tài) el:undefined data里面已有數(shù)據(jù)
- mounted //掛載后狀態(tài) el與data都有相對應(yīng)的屬性
- beforeUpdate //更新前狀態(tài) data里面的屬性值改變 el:[object HTMLDivElement]
- updated //更新完成狀態(tài) data里面的屬性值改變 el:[object HTMLDivElement]
- beforeDestroy //銷毀前狀態(tài)
- destroyed //銷毀狀態(tài)
keep-alive中的生命周期
如果沒有keep-alive生命周期就以上那些但有了keep-alive后就不一樣了。
keep-alive下特有兩個(gè)鉤子函數(shù)：activated、deactivated
第一次進(jìn)入頁面時(shí)，觸發(fā)順序：beforeRouteEnter->created > mounted > activated
第二次進(jìn)入頁面時(shí)，只觸發(fā)：activated
離開頁面時(shí)觸發(fā)：deactivated
下一步就是vue指令，我以前也是從指令開始學(xué)起的指令還是挺簡單的。
