Vue 3 與指令

Vue 3 與指令

第二週作業展示，運用了 Vue 進階指令與 localStrage，同時也自我挑戰運用了鍵盤監聽，只使用鍵盤就能操控計算機功能，點擊圖片可察看成果

前言

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

課堂重點

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

課堂範例

v-model 修飾符

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

    1
    2
    3
    4
    5
    6
    7
    8
    <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()：去除字串前後多於的空白

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

v-on：事件觸發器

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

v-bind

  • 縮寫：:

v-for

  • key 唯一且必填

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

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

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      <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>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      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
    按下去自動 active

    1
    2
    3
    4
    5
    6
    7
    8
    <button
        type="button"
        class="btn btn-outline-primary"
        :class="{active: isActive}"
        @click="isActive = !isActive"
    >
    Primary
    </button>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const app = {
        data() {
            return {
                isActive: false,
            }
        },
        methods: {}
    }

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <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>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const app = {
        data() {
            return {
                isActive: '',
            }
        },
        methods: {}
    }

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

雙向綁定

圖片取自六角學院 卡斯伯 的免費直播課程，介紹 v-model 雙向綁定功能

綠色：只能讀出資料渲染

紅色：雙向綁定可讀可寫

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

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

參考資料