Vue 3 與指令

#前言

這裡將會記錄參加六角學院 Vue 3 新手夏令營（活動已結束）課程筆記與每日任務紀錄，第二周介紹常用的語法學習 Vue。

#課堂重點

可以用修飾符取得自己想要的資料型態。
用v-for時，必須填入key，不然資料無法綁定。
用:class時，當判斷式為true時，會代入class。

#課堂範例

#v-model 修飾符

.number：限制只有數值型別的資料才能寫入 v-model 預設是字串型別

複製成功！

<div id="app">
    <input type="text" v-model.number="number" >
    {{ number }} <!-- 顯示數字 -->
    {{ typeof( number ) }} <!-- 顯示 Number -->
    <input type="text" v-model="number" >
    {{ number }} <!-- 顯示數字 -->
    {{ typeof( number ) }} <!-- 顯示 String -->
</div>

trim()：去除字串前後多於的空白

複製成功！

const text = '   六角學院 Vue 3 夏令營   '
console.log( text.trim() ) 
<!--  顯示'六角學院 Vue 3 夏令營'  -->

#v-on：事件觸發器

最常用：.prevent（去除預設事件）

#v-bind

縮寫：:

#v-for

key 唯一且必填

當 input 輸入內容後，按下反轉陣列時：

如果沒有key時，則input位置不會被同時更動

當有加上key時，input位置會與原本的資料內容位置一起變動有無添加 key 所影響的效果

複製成功！

<div id="app">
    <h4>缺少 key</h4>
        <ul>
            <li v-for="( item, key ) in arrayData" 
                class="pb-1">
            {{ key }} - {{ item.name }} {{ item.age }} 歲 <input type="text" />
            </li>
        </ul>

    <h4>加上 key</h4>
        <ul>
            <li v-for="( item, key ) in arrayData" 
                class="pb-1" :key="item.age">
            {{ key }} - {{ item.name }} {{ item.age }} 歲 <input type="text" />
            </li>
        </ul>
    <button class="btn btn-outline-primary" 
        @click="reverseArray">
        反轉陣列
    </button>
</div>

複製成功！

Vue.createApp({
    data(){
        return{
            arrayData: [
                { name:"魯夫", age: 19 },
                { name:"索隆", age: 21 },
                { name:"娜美", age: 20 },
            ],
        }
    },
    methods: {
        reverseArray() {
            this.arrayData.reverse()
            console.log( this.arrayData )
        }
    },
}).mount('#app')

#:class

範例一按鈕樣式 - 按下去自動 active

複製成功！

<button
    type="button"
    class="btn btn-outline-primary"
    :class="{active: isActive}"
    @click="isActive = !isActive"
>
Primary
</button>

複製成功！

const app = {
    data() {
        return {
            isActive: false,
        }
    },
    methods: {}
}

Vue.createApp(app).mount('#app')

範例二頁籤切換 - 達到頁籤效果頁籤切換效果

複製成功！

<div id="app">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button
                class="nav-link"
                :class="{active: isActive === 'Home'}"
                @click="isActive = 'Home'">
                Home
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button
                class="nav-link"
                :class="{active: isActive === 'Profile'}"
                @click="isActive = 'Profile'">
                Profile
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button
                class="nav-link"
                :class="{active: isActive === 'Casper'}"
                @click="isActive = 'Casper'">
                Casper
            </button>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane" 
            :class="{active: isActive === 'Home'}">
        Home
        </div>
        <div class="tab-pane" 
            :class="{active: isActive === 'Profile'}">
        Profile
        </div>
        <div class="tab-pane" 
            :class="{active: isActive === 'Casper'}">
        Casper
        </div>
    </div>
</div>

複製成功！

const app = {
    data() {
        return {
            isActive: '',
        }
    },
    methods: {}
}

Vue.createApp(app).mount('#app')

#雙向綁定

綠色：只能讀出資料渲染

紅色：雙向綁定可讀可寫

藍色：利用事件觸發調整 data，再利用渲染方法渲染到畫面上

黑色：初始化渲染畫面 ( 1 次 )

#前言

#課堂重點

#課堂範例

#v-model 修飾符

#v-on：事件觸發器

#v-bind

#v-for

#:class

#雙向綁定

#參考資料