# 第一章:Vue.js 基礎

## 一、筆記

### 1-1 ： Vue.js 簡介
Vue.js最主要的核心功能有兩個部分：「**宣告式渲染**」與「**元件系統**」

**宣告式渲染**：集中管理，再寫出去

**MVVM**：Model, View, ViewModel三個部分組成。Model層與View層分別代表著狀態與畫面兩個部分，ViewModel層會自動將Model層與View層的狀態自動同步。

---

**安裝與起步**
開始使用Vue.js，最簡單的方式就是在HTML底部加上一行：

Vue2.0

<script src="https://cdn.jsdelivr.net/npm/vue.js"></script>

Vue3.0

<script src="https://unpkg.com/vue@next"></script>

---
**Hello Vue!**

在HTML準備一個對應的節點，以 **id="app"** 的 **div** 來示範

<div id="app">
    {{message}}
</div>

{{ }}的內容是Vue.js實體物件內的狀態

### 1-2 ： Vue.js 的核心：實體
建立Vue物件實體
2.x : new Vue({...})
3.x : createApp({...})

將物件指定到某個變數，例：設到 vm 中

// Vue 2.x
const vm = new Vue({
    data: {
        message: 'Hello Vue!'
    }
});

//透過 $mount 掛載至指定的網頁節點
vm.$mount('#app');

而這個被生成的物件，就被稱為「Vue.js的實體物件」，而裡面的物件參數則被稱為「options 物件」

---

**掛載至DOM**
將這個實體掛載至網頁的DOM節點以取得網頁的控制權

html:

<div id="app"></div>

js:

//for Vue 2.x
const vm = new Vue({
    el: '#app'
});

//注意：Vue.js 3.0 無法使用el屬性
const vm = Vue.createApp({
    // options
});

vm.mount('#app');

### 1-3
### 1-4
### 1-5
### 1-6
### 1-7

## 二、問題
**1. 什麼是 漸進式 JavaScript 框架 (The Progressive JavaScript Framework)?**

**2. 什麼是 MVVM 模式?**

ViewModel層會自動將Model層與View層的狀態自動同步。

**3.什麼是元件(component)系統?**

**4.vue2, vue3 有哪些的差異?**

**5.用 vue3 寫一個 hello world 需要那些程式碼?**

//html
<div id="app"></div>

<script src="https://unpkg.com/vue@next"></script>

<script>
    Vue.createApp({
        data () {
            return {
                message: 'hello world'
            }
        }
    }).mount('#app');
</script>

**6.computed/methods 差別在哪?**

**7.html 中 v- 開頭的屬性有什麼用途? 請舉例?**

**8.怎麼實作一個按鈕(button)事件?**

**9.請舉例一個 v-for 的用途?**

**10.請用自己的話解釋 vue 元件的 生命週期 (life cycle) 與更新機制?**

## 三、心得
目前還沒讀透，所以筆記也只做到一半。之後，會陸陸續續補齊，問題的回答也會再補上。就讀到的地方，回想到上禮拜的作業，就稍微了解，網頁製作的原理了，日後應該可以更加明白更多的網頁功能