文章目錄
- 1.Vuejs安裝方式
- 2.Vue.js初體驗
- 3.MVVM模型
- 4.對象options
- 5.Vue的生命周期
1.Vuejs安裝方式
Vue的安裝方式有3種
第一種、下載下傳和引入
1.下載下傳好vue.js架構； 官網中下載下傳
(有開發環境版本和生産環境版本(即未壓縮版和壓縮版),開發過程中用開發環境版本)
2.下載下傳好後用 <script> </script>标簽引入； (類似于引入jQuery)
第二種、CDN引入 (直接引入vue.js架構對應的連結即可； 連結到一個明确的版本号和建構檔案)
1. 開發環境版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.生産環境版本：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
第三種、NPM安裝管理
* 後續通過webpack和CLI的使用，我們使用該方式。
* NPM 能很好地和諸如webpack或Browserify 子產品打包器配合使用，
同時Vue也提供配套工具來開發單檔案元件。
2.Vue.js初體驗
<script src="js/vue.js"></script>
//引入之後就可以在<script>中寫Vue相關代碼了
<div id="app">{{message}}</div> //顯示資料，放在{{ }}中；
<script>
const app=new Vue({
el:"#app", //用于挂載要管理的元素；
data:{ //用于定義資料
message:"你好啊！"
}
})
</script>
//第一個Vue程式，體驗一下Vue的響應式
//代碼做了什麼事情？
// (1).建立了一個Vue對象,并在裡面傳入了一個對象{}
// (2).{}中的el屬性：該屬性決定了該Vue對象挂載哪個元素，
// 我們這裡是挂載到了id為app的元素上。
// 挂載哪個元素，就用vue執行個體中的内容操作哪個元素。
// (3).{}中的data屬性：該屬性中通常會存儲一些資料。
// 這些資料可以是我們直接定義出來的，也可以來自網絡，從伺服器加載的；
// Vue中一般不用var，用let(變量)、const(常量,如接收該構造函)
// 響應式：可以實作資料的實時更新；
上面代碼的實作過程： (這種程式設計範式是：聲明式程式設計)
1.挂載元素後，就會去解析這個元素，然後解析到某個變量message；
2.看Vue執行個體在data中有沒有定義這個變量，如果定義了就會把該變量的值在元素中顯示。
即：先根據el，找元素---》解析元素内容---》對照data；
聲明式程式設計好處：做到資料與界面完全分離
如果是元素js中的做法： (這種程式設計範式是：指令式程式設計)
1.建立div元素，并設定id屬性
2.定義變量message
3.将message變量放在div元素中顯示
//計數器
<script src="js/vue.js"></script>
<div id="app">
<h2>目前計數:{{counter}}</h2>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
//點選執行對應點的方法
//<button v-on:click="counter++">+</button>
//<button v-on:click="counter--">-</button>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
counter:0
},
methods:{ //定義管理元素要使用的方法
add:function () {
this.counter++ //this，表示目前對象中的counter變量
},
sub:function () {
this.counter--
}
}
})
//響應式：直接修改data内容，響應到顯示的内容；
</script>
3.MVVM模型
MVVM (Model View View Model)
：解決資料和頁面顯示的問題而出現前端的MVVM架構，
是一種子產品化開發代碼分層的思想或者架構。
MVVM 的優點：
1.主要目的是分離視圖（View）和模型（Model）
2.降低代碼耦合，提高視圖或者邏輯的重用性。
3.提高了子產品的可測試性
我們直接來看Vue的MVVM (Model View View Model)
(1).View層：
*視圖層
*在我們前端開發中，通常就是DOM層。
*主要的作用是給使用者展示各種資訊。
(2).Model層：
*資料層 (data)
*資料可能是我們固定的死資料，更多是來自我們伺服器，從網絡上請求下來的資料。
*在我們計數器的案例中，就是後面抽取出來的obj，當然，裡面的資料可能沒有這麼簡單。。
(3).VueModel層：
*視圖模型層
*視圖模型層是View和Model溝通的橋梁。
*一方面它實作了Data Binding，也就是資料綁定，将Model的改變實時的反應到View中。
另一方面它實作了DOM Listener，也就是DOM監聽，當DOM發生一些事件(點選、滾動、touch等)時，
可以監聽到，并在需要的情況下改變對應的Data。
即：1.資料綁定：view上面顯示的永遠是Model上最新資料，是因為VueModel幫我們實作了；
2.DOM監聽：監聽事件，并在需要的情況下改變對應的Data。
1. Vue初體驗-計數器 這個案例中的MVVM：
View：是展示給使用者的部分，
是以是<div id="app"> </div>這部分的内容;
Model：是我們的資料，
是以是app中data的内容；
VueModel：将Model展示到View，
是以是建立的Vue對象執行個體,new Vue();
2. 我們的計數器中就有嚴格的MVVM思想:
View依然是我們的DOM
Model就是我們我們抽離出來的obj
ViewModel就是我們建立的Vue對象執行個體
3.它們之間如何工作呢？
首先ViewModel通過Data Binding讓obj中的資料實時的在DOM中顯示。
其次ViewModel通過DOM Listener來監聽DOM事件，并且通過methods中的操作，改變obj中的資料。
4.對象options
我們在建立Vue執行個體的時候，傳入了一個對象options。
這個options 可以包含很多的選項，如：
1.el:
類型：string | HTMLElement
作用：決定之後Vue執行個體會管理哪一個DOM。
2.data:
類型：Object | Function （元件當中data必須是一個函數）
作用：Vue執行個體對應的資料對象。
3.methods:
類型：{ [key: string]: Function }
作用：定義屬于Vue的一些方法，可以在其他地方調用，也可以在指令中使用。
5.Vue的生命周期
Vue生命周期
:從誕生到消亡的整個過程；
:建立一個new Vue()，它的源碼裡面會做一系列的事情。這一系列的事情就是它的生命周期。
(1).每個 Vue 執行個體在被建立時，源碼中都要經過一系列的初始化過程。
例如，需要設定資料監聽、編譯模闆、将執行個體挂載到 DOM 并在資料變化時更新 DOM 等。
(對el的處理，對data的處理、對method的處理、更新DOM...)
(2).同時在這個過程中也會自調用一些叫做生命周期鈎子的函數，
這給了使用者在不同階段添加自己的代碼的機會; (執行自己想執行的内容)
比如created 鈎子可以用來在一個執行個體被建立之後執行代碼，
也有一些其它的鈎子，在執行個體生命周期的不同階段被調用，如 mounted、updated 和 destroyed。
