Vue.js的學習筆記

Vue.js

介紹：Vue是一套用于構(gòu)建用戶界面的漸進式框架。

Vue的安裝：

使用CDN直接引入

<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生產(chǎn)環(huán)境版本，優(yōu)化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

使用下載好的vue.js文件引入
```
<script src="../vue.js"></script>
```

Vue實例：
- 每個 Vue 應用都是通過用 Vue 函數(shù)創(chuàng)建一個新的 Vue 實例開始的：
```
const app = new Vue({});
```
- 然后為Vue實例掛載虛擬節(jié)點
```
const app = new Vue({
    el:"#app",
});
```
- data對象
```
const app = new Vue({
    el:"#app",
    data:{
          message:"hello world",
    }
});
```
  - data 對象中的所有的加入到 Vue 的響應式系統(tǒng)中狐史，當值發(fā)生變化時，視圖就會響應式的更新為新的值
- Vue 實例暴露了一些有用的實例 property 與方法。它們都有前綴 $滑沧，以便與用戶定義的 property 區(qū)分開來。
```
var app = new Vue({
    el: '#app',
    data: {
        message: "hello world"
    },
});
app.$watch("message", function(newValue, oldValue) {
    console.log(newValue, oldValue)
})
setTimeout(() => {
    app.message = "hello"
}, 3000);
```

生命周期鉤子：
- image
- 每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如巍实，需要設置數(shù)據(jù)監(jiān)聽滓技、編譯模板、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等棚潦。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)令漂，這給了用戶在不同階段添加自己的代碼的機會。
1. beforeCreate（創(chuàng)建前狀態(tài)）：在實例初始化之后丸边，數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用叠必。此時Vue剛剛被實例化，還不具有組件屬性妹窖。
2. create（創(chuàng)建前狀態(tài)）：在實例創(chuàng)建完成后被立即調(diào)用纬朝。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測 (data observer)骄呼，property 和方法的運算共苛，watch/event 事件回調(diào)判没。然而，掛載階段還沒開始隅茎，$el property 目前尚不可用澄峰。實例已創(chuàng)建完成，但還未掛載el屬性辟犀。
3. beforeMount（模板掛載之前）：在掛載開始之前被調(diào)用：相關的 render 函數(shù)首次被調(diào)用俏竞。
4. mounted（模板掛載之后）：實例被掛載后調(diào)用，這時 el 被新創(chuàng)建的 vm.$el 替換了踪蹬。如果根實例掛載到了一個文檔內(nèi)的元素上胞此，當 mounted 被調(diào)用時 vm.$el 也在文檔內(nèi)。
5. beforeUpdate（組件數(shù)據(jù)更新之前調(diào)用）：數(shù)據(jù)更新時調(diào)用跃捣，發(fā)生在虛擬 DOM 打補丁之前漱牵。這里適合在更新之前訪問現(xiàn)有的 DOM，比如手動移除已添加的事件監(jiān)聽器疚漆。
6. Update（組件數(shù)據(jù)更新之后調(diào)用）：由于數(shù)據(jù)更改導致的虛擬 DOM 重新渲染和打補丁酣胀，在這之后會調(diào)用該鉤子。當這個鉤子被調(diào)用時娶聘，組件 DOM 已經(jīng)更新闻镶，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。
7. beforeDestroyed（實例銷毀之前調(diào)用）：實例銷毀之前調(diào)用丸升。在這一步铆农，實例仍然完全可用。
8. destroyed（實例銷毀之后調(diào)用）：實例銷毀后調(diào)用狡耻。該鉤子被調(diào)用后墩剖，對應 Vue 實例的所有指令都被解綁，所有的事件監(jiān)聽器被移除夷狰，所有的子實例也都被銷毀岭皂。

模板插值：
- 文本：
  數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值：
```
<p>{{ message }}</p>
```
  通過使用 v-once 指令，你也能執(zhí)行一次性地插值沼头，當數(shù)據(jù)改變時爷绘，插值處的內(nèi)容不再響應式更新。
```
<p v-once>{{ message }}</p>
```
- 輸出HTML：
  
  雙大括號會將數(shù)據(jù)解釋為普通文本进倍，而非 HTML 代碼土至。為了輸出真正的 HTML，你需要使用 v-html 指令：
```
<p v-html="DOM">{{ DOM }}</p>
```
- 為標簽綁定Attribute：
  
  雙大括號語法不能作用在 HTML attribute 上猾昆，遇到這種情況應該使用v-bind:attr="value"的語法：
```
<p v-bind:class="content">{{ DOM }}</p>
```
  也可簡寫為:attr="value"毙籽。
- 使用v-on:event="function"指令，監(jiān)聽DOM事件：
```
<button v-on:click="fun">按鈕</button>
```
  也可簡寫為@event="function"毡庆。

參考文檔：Vue.js教程
 Vue.js api文檔

最后編輯于：2020.06.18 22:27:32

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者