初探Vue

介紹Vue基礎，Vue的運作部分及v-on事件綁定、v-bind屬性綁定、v-for渲染。

MVVM架構

• 透過 Model 來動態更新 View 做渲染畫面

  Vue 運作流程

  

Vue起手式

參考官方文件來學習

載入方式：

<script src="https://unpkg.com/vue@next"></script>

引入之後，在index.html檔案

<div id="app">
   <h1>{{message}}</h1>
 </div>

在JavaScript部分：

Vue.createApp({

  data(){
     return {
      message: 'hello'
    }
  }
}).mount('#app')

畫面就會出現相應的文字: hello

V-on 事件綁定

寫法：

<button v-on:click="addFn">Add</button>

• 建立add、minus兩個按鈕
  • 點選add增加數字、點選minus減少數字
• 讓add按鈕綁定addFn函式：v-on:click=”addFn” on click事件，執行addFn函式
• 綁定後，在methods撰寫addFn函式內容，要取得 data 中的 num 才能進行運算 =>this.num++
• 同理，在minus的按鈕，函式內運算this.num++，並將點擊事件放入button
  • v-on:Event 事件綁定，有兩種撰寫方式
    

    <div id="app">
      <h1>{{num}}</h1>
    
       <button v-on:click="addFn">Add</button>
       <!-- v-on 改為@ -->
       <button @click="MinusFun">Minus</button>
    
     </div>

    Vue.createApp({
    
      data(){
         return {
           num: 0
        }
      },
      methods: {
        addFn() {
           //num.value = num.value + 1;
              this.num ++;
        },
         MinusFun(){
            this.num--;
         },
      }
    }).mount('#app')

V-bind 屬性綁定

屬性綁定可以輕鬆的將data中的資料，與HTML的標籤屬性綁定，這樣一來可以動態的變更資料。
原本 HTML 的樣子

• img中原本有個圖片資料
• v-bind是指令，：後接的是HTML的屬性

  <h3>綁定屬性 v-bind</h3>
  <p>{{ breakfastShop.name }}</p>
  <img src="https://images.unsplash.com/photo-1600182610361-4b4d664e07b9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="square-img" alt="">

  在JavaScript部分：

  Vue.createApp({
  
    data(){
       return {
        breakfastShop: {
          name: '奇蹟早餐',
          imgUrl: 'https://images.unsplash.com/photo-1600182610361-4b4d664e07b9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80',
          resizeImg: 'https://images.unsplash.com/photo-1600182610361-4b4d664e07b9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&q=80'
        },
      }
    }
  }).mount('#app')

  將原本src => v-bind:src="breakfastShop.imgUrl"
• 此外title 屬性，也能綁定

  <h3>綁定屬性 v-bind</h3>
        <p>{{ breakfastShop.name }}</p>
        <img v-bind:src="breakfastShop.imgUrl" class="square-img" v-bind:title="breakfastShop.name" alt="">

  縮寫形式
  換成冒號:

  <h3>縮寫形式 <code>:</code></h3>
          <img :src="breakfastShop.imgUrl" class="square-img" :title="breakfastShop.name" alt=""

  V-for將資料多筆的渲染出來

  v-for 呈現多筆陣列

  v-for= "自訂名稱 in 資料集中的陣列或物件名稱"

  v-for= item in peopleArr ， item 為 自定義名稱，後面(peopleArr)填入要迴圈的資料
  item是表示 peopleArr 陣列中每個單一物件
  key ：為帶入陣列的 key 值

  <div id="app">
   <h3>v-for 與 key</h3>
  <p> 人員介紹</p>
  <ul>
    <li v-for="(item, key) in peopleArr">
      {{ key }} - {{ item.name}} / {{ item.age }} 歲
    </li>
  </ul>
  </div>

  Vue.createApp({
  
    data(){
       return {
       peopleArr: [
          {
            name: 'Ken',
            age: 30,
            vegan: false
          },
          {
            name: 'Wong',
            page: 35,
            vegan: false
          },
          {
            name: 'Merry',
            age: 60,
            vegan: false
          },
          {
            name: 'Tom',
            age: 30,
            vegan: true
          },
        ],
      }
    },
  
  }).mount('#app')