資源
Vue.js 官方文檔
Hello Vue 使用Codepen.io來進行練習
VueMaster
Awesome Vue.js A curated list of awesome things related to Vue.js
首頁視頻
先看了首頁的Why Vue.js的視頻內(nèi)容，獲得了幾個概念
- 漸進式框架：可以作為一部分的應用，不需要全部設置
- Reusable Components 可復用組件，每個組件都有自己的H C J
- 響應式框架 Reacitve ：當數(shù)據(jù)改變的時候，Vue會自動改變所有網(wǎng)頁涉及到這個數(shù)據(jù)的內(nèi)容
- 做一個fetch遠程拉取，然后通過vue來將顯示為頁面內(nèi)容
- 有Chrome插件可以進行更多信息的查看和檢索
文檔記錄
應用/組件實例
- 實際上Vue做的似乎是將數(shù)據(jù)渲染進DOM之中，或者類似通過vue命令來進行綁定，然后可以用更方便地方式來操作
- 可以設置事件系統(tǒng),
注意在這個方法中，我們更新了應用的狀態(tài)，但沒有觸碰 DOM——所有的 DOM 操作都由 Vue 來處理，你編寫的代碼只需要關注邏輯層面即可。
- 組件化：組件系統(tǒng)是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通?？蓮陀玫慕M件構建大型應用。仔細想想，幾乎任意類型的應用界面都可以抽象為一個組件樹（可能也是我們在整理網(wǎng)站，梳理邏輯時可以搞清楚的）
const RootComponent = {
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')
應用實例 Application Instance
每個 Vue 應用都是通過用 createApp 函數(shù)創(chuàng)建一個新的應用實例開始的。
組件實例 root component instance.
一個應用需要被掛載到一個 DOM 元素中。例如，如果你想把一個 Vue 應用掛載到 <div id="app"></div>，應該傳入 #app：與大多數(shù)應用方法不同的是，mount 不返回應用本身。相反，它返回的是根組件實例 - >此在文檔中經(jīng)常會使用 vm (ViewModel 的縮寫) 這個變量名表示組件實例。
[站外圖片上傳中...(image-6f1c1-1618475491416)]
（參考 MVC，MVP 和 MVVM 的圖示）
組件實例property / Component Instance Properties
在 data 中定義的 property 是通過組件實例暴露的。
const app = Vue.createApp({
data() {
return { count: 4 }
}
})
const vm = app.mount('#app')
console.log(vm.count) // => 4
還有各種其他的組件選項，可以將用戶定義的 property 添加到組件實例中，例如 methods，props，computed，inject 和 setup。我們將在后面的指南中深入討論它們。組件實例的所有 property，無論如何定義，都可以在組件的模板中訪問
生命周期鉤子
每個組件在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如，需要設置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己的代碼的機會。
Vue.createApp({
data() {
return { count: 1}
},
created() {
// `this` 指向 vm 實例
console.log('count is: ' + this.count) // => "count is: 1"
}
})
也有一些其它的鉤子，在實例生命周期的不同階段被調(diào)用，如 mounted、updated 和 unmounted。生命周期鉤子的 this 上下文指向調(diào)用它的當前活動實例。Arrow function expressions 箭頭函數(shù)表達式
[站外圖片上傳中...(image-1538af-1618475491416)]
模版語法
Vue.js 使用了基于 HTML 的模板語法，允許開發(fā)者聲明式地將 DOM 綁定至底層組件實例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。
插值
文本
數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值 。
Mustache 標簽將會被替代為對應組件實例中 msg property 的值。無論何時，綁定的組件實例上 msg property 發(fā)生了改變，插值處的內(nèi)容都會更新。請只對可信內(nèi)容使用 HTML 插值，絕不要將用戶提供的內(nèi)容作為插值。
<span>Message: {{ msg }}</span>
Mustache 語法不能在 HTML attribute 中使用，然而，可以使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="isButtonDisabled">按鈕</button>
可以使用JavaScript表達式
{{ ok ? 'YES' : 'NO' }}
指令
指令 (Directives) 是帶有 v- 前綴的特殊 attribute。
指令 attribute 的值預期是單個 JavaScript 表達式 (v-for 和 v-on 是例外情況，稍后我們再討論)。指令的職責是，當表達式的值改變時，將其產(chǎn)生的連帶影響，響應式地作用于 DOM?；仡櫸覀冊诮榻B中看到的例子：
<p v-if="seen">現(xiàn)在你看到我了</p>
一些指令能夠接收一個“參數(shù)”，在指令名稱之后以冒號表示。
v-bind 指令可以用于響應式地更新 HTML attribute
v-on 指令，它用于監(jiān)聽 DOM 事件
也可以在指令參數(shù)中使用 JavaScript 表達式，方法是用方括號括起來：
<a v-bind:[attributeName]="url"> ... </a>
Data Property 和 方法
Data Property
組件的 data 選項是一個函數(shù)。Vue 在創(chuàng)建新組件實例的過程中調(diào)用此函數(shù)。它應該返回一個對象，然后 Vue 會通過響應性系統(tǒng)將其包裹起來，并以 $data 的形式存儲在組件實例中。為方便起見，該對象的任何頂級 property 也直接通過組件實例暴露出來：
const app = Vue.createApp({
data() {
return { count: 4 }
}
})
const vm = app.mount('#app')
console.log(vm.$data.count) // => 4
console.log(vm.count) // => 4
// 修改 vm.count 的值也會更新 $data.count
vm.count = 5
console.log(vm.$data.count) // => 5
// 反之亦然
vm.$data.count = 6
console.log(vm.count) // => 6
Vue 使用 $ 前綴通過組件實例暴露自己的內(nèi)置 API。它還為內(nèi)部 property 保留 _ 前綴。你應該避免使用這兩個字符開頭的的頂級 data property 名稱。
方法
我們用 methods 選項向組件實例添加方法，它應該是一個包含所需方法的對象：
const app = Vue.createApp({
data() {
return { count: 4 }
},
methods: {
increment() {
// `this` 指向該組件實例
this.count++
}
}
})
const vm = app.mount('#app')
console.log(vm.count) // => 4
vm.increment()
console.log(vm.count) // => 5
這些 methods 和組件實例的其它所有 property 一樣可以在組件的模板中被訪問。在模板中，它們通常被當做事件監(jiān)聽使用，你可以在模板支持 JavaScript 表達式的任何地方調(diào)用方法：
<button @click="increment">Up vote</button>
<span :title="toTitleDate(date)">
{{ formatDate(date) }}
</span>
計算屬性 Computed Properties
對于任何包含響應式數(shù)據(jù)的復雜邏輯，你都應該使用計算屬性
你可以像普通屬性一樣將數(shù)據(jù)綁定到模板中的計算屬性。Vue 知道 vm.publishedBookMessage 依賴于 vm.author.books，因此當 vm.author.books 發(fā)生改變時，所有依賴 vm.publishedBookMessage 的綁定也會更新。而且最妙的是我們已經(jīng)聲明的方式創(chuàng)建了這個依賴關系：計算屬性的 getter 函數(shù)沒有副作用，它更易于測試和理解。
計算屬性 vs 方法
我們可以將同一函數(shù)定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基于它們的反應依賴關系緩存的。計算屬性只在相關響應式依賴發(fā)生改變時它們才會重新求值。這就意味著只要 author.books 還沒有發(fā)生改變，多次訪問 publishedBookMessage 計算屬性會立即返回之前的計算結果，而不必再次執(zhí)行函數(shù)。
