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 輸入內容後，按下反轉陣列時：

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

  2. 當有加上key時，input位置會與原本的資料內容位置一起變動

     <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 次 )

參考資料

• 第二堂 - 共筆文件
• 六角學院 Vue 3 夏令營
• Vue 3 必學指令教學