第二週｜筆記 by Sz

tags: Sz week2 Vue新手夏令營

• Vue 新手夏令營 課程頁面：內含本週作業
• 筆記入口
• 本週範例程式碼
• 來自天使的筆記（用力參考）

課前知識

不弄懂存活率不樂觀喔

• 需要知道的語法糖｜筆記 by Sz
• this 到底是誰｜筆記 by Sz
• 物件傳參考｜筆記 by Sz
• 基礎的 Promise｜筆記 by Sz
• 用 axios 串接 API｜筆記 by Sz
• 在瀏覽器運行 ES 模組｜筆記 by Sz
• 現行的 ES 模組使用技巧｜筆記 by Sz

與 jQuery 的差別（選讀）

<!-- 記得要匯入 cdn  -->
<div id="text"></div>

const personText = '我是卡斯伯';

$(document).ready(function() {
    $('#text')               // 取得 DOM 元素
    .text(personText)        // 寫入值
    
    $('#num').on('change', function() { // 監聽
    console.log($(this)      // this 取得 DOM 元素
    .val());                 // 取得值
    })
}) 

jQery 風格

1. 資料
2. 操作 DOM
3. 取值

三大框架(Angular, Vue, React)則是

• 關注點分離
• 資料可以直接對應畫面

Vue 的初始化

Vue 的起手式

data：資料邏輯 function

• return 的內容是一個 object
• 透過 v-text({{key}})，顯示於畫面

methods：方法 object

內部包含較多行的 function

mounted: 生命週期 function

畫面

<div id="app">  // .mount('#app') 指定要在這生成（看下段）
</div>

JS

Vue.createApp({           // 導入一個物件(vue 起手式)
    data: function() {    // function
        return {
        
        };
    },
    methods: {            // object
    
    },
    mounted: function() { // function
    
    }
}) .mount('#app')   // 雙向綁定

實例

<div id="app">  
<!-- 把 data 抓到畫面 -->
{{ text }}      // string
{{ name }}      // 小明
{{ num }}       // 0
{{ person.name }}  // 小白

<!-- 把畫面抓回 data：指令 (v-) -->
<input type="number" v-model="num">

</div>

<script>
Vue.createApp({   // 導入一個物件
    data: function() {    // function
        return {
            text: 'string',
            name: '小明',
            num: 0
            person: {
                name: '小白',
                image: '圖片網址',
                gender: 'male',
                cash: 1000
            }, 
            people: [
                {
                name: '小明',
                image: '圖網址',
                gender: 'male',
                }.....
 
            ]            
        };
    },
    methods: {            // object
    
    },
    mounted: function() { // function
    // ajax 的資料會放這
    }
}) .mount('#app')   // 雙向綁定
</script>

data -> 畫面｜v-text （簡寫{{}}）

在 mount 到的畫面區塊內（#app）寫入 {{ 該 data 名稱 }}

<p>{{ text }}</p>      // string

畫面 -> data｜v-model

v- 為 vue 語法的開頭！

v-model 用於資料的雙向綁定，這個 input 就會綁定到 data 上的 num 了

<input type="number" v-model="num">

data -> HTML 標籤的屬性｜v-bind 動態屬性

事前知識：點記法、括弧記法（有機會再補上）

1. 如果屬性內只包含 data 來的內容
   在 "" 內輸入即可

<img :src="person.image" :alt="person.name">

2.如果是包含非 data 內容，
在 "" 內，記得要使用樣板字面值

<a :herf="`mailto:${ item.email }`" :alt="">

判定｜v-if, v-else, v-else-if

判斷如果 gender 為 male，就顯示一張 male 的 icon
非則顯示 female 的 icon

<!-- 省略 cdn 的部份 -->
<i v-if="person.gender === 'male'">male icon</i>
<i v-else">female icon</i>

如果中間有更多判斷：

<i v-else-if">female icon</i>

資料的迴圈｜ v-for

data 的資料批次加到畫面
很像 forEach()
也可以帶物件

以下 :key 到下週會再講解，v-for 就會需要帶 :key

<ul>
<!-- item 代表每個獨立的物件(people[item]) -->
    <li v-for="item in people" :key="item.id">
        {{ item.name }}  
        <img :src="item.image" alt="">
        <i v-if="item.gender === 'male'">male icon</i>
        <i v-else="item.gender === 'female'">female icon</i>
    </li>
</ul>

data: {
    people: [                 // 有很多 object 
        {
            name: '小明',
            image: '圖網址',
            gender: 'male',
        },...
    ]
}

事件觸發｜v-on（簡寫@）

點擊的監聽｜@click

互動性的標籤，需要設定監聽 method

<!-- 這裡有 -->
{{ person.cash }}
<button type="button" 
@click="person.cash++"> // function 放 @click
    增加</button>
    
<!-- 下週預告：跟傳值有關 -->
<button type="button" 
@click="plusCash(item)"> 
    增加</button>

// 下週預告
    plusCash() {
        item.num++;
    }

methods

如上方，第一個 @click，只有一行可以直接寫在 HTML
methods 內就會放置較複雜的 methods（兩行以上）

Vue 的取值：this

用 this 去呼叫 data 或 methods

mounted: function() {
    console.log(this.text);
    
}

ES module

ESM Module

初學可以先整包 Vue 載下來
後面會開始用到模組化，就不會整包帶下來了
載入 Vue.js ESModule

• createApp
• ref
• reactive
• …

<script type="module">
import { creatApp } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.esm-browser.min.js'
</script>

其他補充

• Bootstrap Icon
• 排版輔助 ESlint