# Vue.js - Basic
###### tags: `FrameWork-vue.js`
## 前言 ：
1. 這是一連串的知識整理，不是手把手的教程。
2. 這邊假設你已經有了基本的Vue知識，只是把Vue的知識由點狀化為線狀或面狀而已。
3. 寫這邊文章時，我已經使用過、並大約記得 ：
- Vue 的directive : ```v-bind v-on v-for v-if```等等。
- Vue 的app的所有option是什麼。
- Vue 的component寫法，和props與emit。
- Vue CLI操作。
## 一 . Vue和MVVM的概念
### (一) . MVVM modal
- MVC modal : 是一個鐵三角。
1. M : 處理資料。
2. C : 處理使用者請求和傳送資料。
3. V : 依照資料渲染出需要的樣版。
- MVVM modal : 專注於 view 和 controller中和view相關的部分。
1. V : view ，一樣為依照資料渲染出來的樣板。
2. VM : Vue實例(instance)接手的地方，依照資料處理樣板，並接收使用者請求。
3. M : 處理資料。
### (二) . Vue的設計：
- Vue的設計 ： 如下圖，Vue負責view modal的部分。
1. JS的資料進入Vue : Vue Component的option操作與接收。
2. Vue到HTML的渲染 : directive的綁定資料。
- 學習Vue的方法 ： 可以依照官網的資料，將Vue的基本知識分成三段。
1. JS的資料和Vue互動的方法 ： Vue option和生命週期(request)。
2. Vue component互動 ： 元件樹和元件傳值、生命週期。
3. Vue和HTML的互動 ： Directive的使用。
- basic的地方，我將整理第一和第三部分，和一部分的生命週期。
- 本篇所整理的 ：
1. Vue option。
2. Vue directive。
3. Vue lifehook。
4. Vue Component basic。

## 二 . Vue option和Vue instance入門
### (一) . Vue instance
- 建立一個Vue instance : 這邊用3.X版的用法。
1. 步驟一 ： 建立一個Vue實例。
2. 步驟二 ： 將其掛在於指定的tag之下。
3. 注意，Vue可以影響的只有在掛載的區域。

const app=Vue.createApp();
app.mount('#app');

- Vue的option : 功用為設定這個Vue實例需要的方法和屬性。
1. 如下圖，option是Vue提供的標準街口，可以客製化你的Vue。
2. 常見的option有六種，下面會慢慢介紹。

const option={
    data(){
        return {
            name : 'steven',
            age : 15
        }
    }
    methods:{
        addAge(){
            this.age+=1;
            return ;
        }
    }
}

const app=Vue.createApp(option);
app.mount('#app');

app.addAge();
console.log(app.age); // 16

- Vue中的Component和instance ： Vue 中把元件分成兩類。
1. instance : 用createApp產生的實例，通常為root元件。
2. Component : 可以重複利用的元件。
3. 一開始的專案內容很少，可以全部寫在instance中，但專案變大後，就需要分成多個Component。
4. 兩者的語法差不多，差別只在宣告的方法。
5. 下面用詞，都以Component(元件)的角度為主。
### (二) . Data function和methods object
- Data function : 名稱必須為Data。
1. 形式 ： 必須為一個function，供Vue component的重複使用。
2. 內容 ： 主要為return敘述。回傳的為一個物件，此物件內為component有的data。
3. Reactivity system : 只有在data函式回傳的物件內容，才會被Vue加入資料流中。
- Methods object : 名稱必須為methods。
1. 形式 ： 必須為一個物件。
2. 內容 ： 多個函式，類似ES6 class的寫法。
3. this pointer : Vue會自動把metods中的函式裡的this連上component，因此函式中用data屬性時需要加上this。

### (三) . Watch 和 Computer

## 三 . Vue Directive
### (一) . 單向資料流 : ```{{}} v-html v-text v-once```
- 單向資料流 ：
1. 定義 ：component的data向Html傳輸。(注意先不說元件間的)
2. 負責View層的渲染 ： 像是一個樣板，由component的資料進行不同的渲染。
- ```{{}}``` : 鬍鬚記號
1. 功用 ： 可以在中間加入JS的語法。
2. 語法 ： 在元件的掛載點，可以直接使用data的名稱。
3. 註 ： 不用加入this。

const app=Vue.createApp({
    data(){
        return {
            name: 'steven'
        }
    }
}).mount('#app');

<div id='app'>
     {{ name}}  <!---steven--->
</div>
<!--- 或是 --->
<div id='app'>
     {{'name:'+name}}  <!---name:steven--->
</div>

- ```v-html``` : 綁定innerHtml的屬性。
1. 功用 ： 對掛載區域指定html tag綁定innerHtml屬性。
2. 語法 ： ```<tag v-html:'variable of data'>```

const app=Vue.createApp({
    data(){
        return {
            rawHtml: '<span style="color: red">This should be red.</span>'
        }
    }
})

<div id='app'>
    <span v-html='rawHtml' ></span>
    <!-----
    <span> <span style="color: red">This should be red.</span> </span>
    -->
<div>

### (二) . 單向資料流 : ```v-bind```
- 功用 ： 將Component的資料綁定在指定tag的Html attribute。
1. 語法 ： ```v-bind:attribute=data```
1. 可以綁定data到任何的attribute上，形成那個屬性的value。
2. 但最常用的是綁定Class 或style。
- $Bling\ Class$ : 綁定class的功用
1. 語法 ： ```v-bind:class='data'```。
2. JSX : data部分用JSX，動態決定class的value。
3. Array : data部分用[]包住多個data，形成多個class。
4. 結合JSX和Array : 可以

<style>
.red{
    background-color : red ;
}
.white{
    background-color : white ;
}
.big{
    font-size: 64px;
}
</style>
<script>
 const app=Vue.createApp({
     data(){
         return {
             isError: false,
             red:'red',
             white:'white'
         }
     }
 }).mount('#app');
</script>

<div id='app'>
    <div v-bind:class={ isError ? white:red }></div>
    <div v-bind:class=[white, big]></div>
    <div v-bind:class=[{ isError ? white:red } ,big]></div>
<div>    

- $inline\ style$: 綁定style的功用。
1. 語法 ： ```v-bind:style='data'```。
2. 字串綁定 ： data部分用字串綁定css preperity和value。
3. 物件綁定 ： data部分用key-value的物件形成css的屬性和值。
4. JSX綁定 ： data部分用JSX的語法綁定css的value。
5. Array綁定 ： data部分[]包住以上的多個方法。

<script>
const app=Vue.createApp({
    data(){
        return {
            str: 'color:red',
            object:{
                color: 'red'
            },
            value:'red',
            big:'font-size:36px'
        }
    }
})
</script>
<div id='app'>
   <div v-bind:style='str'></div>
   <div v-bind:style='object'></div>
   <div v-bind:style={color: value}></div>
   <div v-bind:style=[{color: value}, 'big']></div>
</div>

### (三) . 條件渲染 ： ```v-if v-show```
### (四) . 迴圈渲染 ： ```v-for```
### (五) . 事件處理 ： ```v-on```
- 功用 ： 將component的methods綁定於元件的指定tag上。
1. 語法 ： ``` v-on:event='methodsName'```。
2. 可以只傳入methods name不用加入()，只有在需要傳入參數時才加入()。
- 使用$Event$參數 : 在methodsname的()中加入『$event』。
1. 語法 ： ```v-on:event='methodsname(arg1,$event)'```
2. event參數傳入的位置會與$event在參數的位置一樣。
- $Event\ Modifier$ : 將一些常用的event事件縮寫。
1. 語法 ： ```v-on:event.(modifier)```。
2. modifiter取代可能常用的event function。

<input type='submit' v-on:click.prevent>

### (六) . 雙向資料流 ： ```v-modal```
- 功用 ： 將使用者輸入的資料直接傳送到Component內，用於表單元素。
1. 語法 ： ```v-modal='DataName'```。
2. v-modal會忽略綁定element的初值。
3. 對Input-text或textarea : 綁定value值，監聽input event。
4. 對checkbox : 綁定checked值，監聽chnage event。
5. 對select : 綁定value值，監聽input event。

## 三 . Component Basic