This page has not been translated yet.

Vue 3 Options API

2021年8月9日

3 min read

#Vue #Hexschool

前言

這裡將會記錄參加六角學院 Vue 3 新手夏令營（活動已結束）課程筆記與每日任務紀錄，第三周介紹如何使用語法進行資料的 CRUD 功能。

課堂重點

了解 methods 與 computed 的差別與運用
稍微了解正則表達式，利用正則表達式增加千分點
mounted 生命週期函數發生後就會被釋放

指令常見三大情境

透過指令，觸發特定事件
- @click="functionName()"
透過其他 Option API，觸發特定事件
- this.functionName()
作為畫面上的資料運算 (俗稱 filter)
- 新版的 Vue 沒有 filter

methods

透過指令，透過點擊或Enter鍵，觸發特定事件，範例如下

<!-- 擷取片段程式碼 -->
<input type="text"
    class="form-control flex-fill"
    @keyup.enter="addTodo"
    v-model="newTodo"
    placeholder="新增代辦事項"/>
<button type="button"
    class="btn btn-size-lg btn-dark rounded-1 m-1"
    @click="addTodo">
    <i class="fas fa-plus"></i>
</button>

// 擷取片段程式碼
Vue.createApp({
    data() {
    // ...
    },
    methods: {
        // 新增 todo
        addTodo() {
            // 添加的 todo 名字不能空白
            if( !this.newTodo.trim() ){
                alert('請輸入代辦事項');
                return
            }
            // 準備好一個 todo 物件
            const item = { id: Date.now(), name: this.newTodo, done: false };
            // 把 item 新增到 todos
            this.todos = [item,...this.todos];
            // 輸入完清空
            this.newTodo = '';
            // 刷新歷史紀錄
            this.pushHistory();
    }
}).mount('#app');

computed

不修改原始數值的情況渲染出新值

<!-- 擷取片段程式碼 -->
<ul class="btn-group">
    <!-- filter todo -->
    <li class='col' :class=" filterType === 'all' ? 'active' : '' ">
        <button class="btn"
        @click.prevent="filterType = 'all'">全部</button>
    </li>
    <li class='col' :class=" filterType === 'undone' ? 'active' : '' ">
        <button class="btn"
        @click.prevent="filterType = 'undone'">待完成</button>
    </li>
    <li class='col' :class=" filterType === 'done' ? 'active' : '' ">
        <button class="btn"
        @click.prevent="filterType = 'done'">已完成</button>
    </li>
</ul>

// 解取片段程式碼
Vue.createApp({
    data() {
        // ...
    },
    computed: {
        // 過濾分類清單
        filterTodos() {
            // 清單目前模式
            switch ( this.filterType ) {
                case 'undone':
                    return this.todos.filter( item => !item.done);
                case 'done':
                    return this.todos.filter( item => item.done);
                default:
                    return this.todos;
        }
    }
}).mount('#app');

CRUD 資料處理發想

基本的 CRUD 包含了

新增資料
刪除資料
編輯資料
陳列資料
過濾資料
修改個別資料的完成度

Vue.createApp({
  data() {
    // ...
  },
  methods: {
    // #1 如何新增資料
    addTodo() {},
    // #2 如何移除資料
    deleteTodo(id) {
      // 找到當前按鈕那列的 index
      const index = this.todos.findIndex(item => item.id === id)
    },
    // ...
  }
})

運用這次直播，稍微修改了第一週的作業

增加性別分類

// computed 不會改動原始值
// watch 類似 methods, 會更動原始值
// “不修改原始數值” 的情況產生 “新值” （此值只為了渲染使用）
 
// 過濾列表
filterPersons() {
    switch( this.genderFilter ){
        // 當性別選擇為'all'，直接回傳
        case 'all':
            return this.persons;
        // 當性別為'男'或'女'，自己對應
        case this.genderFilter:
            return this.persons.filter( item =>
                // 判斷男女後回傳
                item.gender === this.genderFilter );
    }
}

幫選賞金增加千分點

toCurrency(num) {
    // 把數字轉字串，利用小數點分割"整數"與"小數"
    const parts = num.toString().split('.');
    // 將整束用正則表達式每三個數字插入一個千分點
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    // 將整數與小數合併後回傳
    return `${parts.join('.')}`;
}