筆記: Vue 在 畫面(html)的操作部分

Vue.js 有設計一些方式，讓我們可以把資料綁定在畫面上，可以綁定內容也可以綁定屬性。

內容綁定方式:
1. {{}}: 雙花括號，很常使用的綁定方式，把資料的 key 直接填入裡面就能在畫面渲染；也可再這個括號使用一些數學運算、三元運算、執行函式等等。
(補充說明: Vue 會幫我們把 data 這個物件括號拆除，所以我們能直接使用這個資料物件內的 key)

<div id="app">
  {{ name }}<br/>
  {{ num*num2 }}
</div>
<script>
// Model
let data = {
  name: 'Billy',
  job: 'Front End',
  age: '<i>30</i>',
  num: 30,
  num2: 6
};
// View-Model
var vm = new Vue({
  el: "#app",
  data: data,
});
</script>

2. v-text: 等同於 JS 的 innerText，v-text 是綁在 html 的標籤上，綁定後就會將資料渲染在這個標籤的內容內。

<div id="app">
  <p v-text="name"></p>
  <div>職業為: <span v-text="job"></span></div>
</div>
<script>
// Model
let data = {
  name: 'Billy',
  job: 'Front End',
  age: '<i>30</i>',
  num: 30,
  num2: 6
};
// View-Model
var vm = new Vue({
  el: "#app",
  data: data,
});
</script>

3. v-html: 等同於 JS 的 innerHTML，跟 v-text 一樣是綁在 html 的標籤上，不同之處在於，v-html 這個方式認得 html 標籤，如下方範例所示，畫面會出現數字 30 的斜體(i標籤)。
(* 需特別注意，v-html 除非能確認資料來源是安全的不然盡量少用，尤其是使用者輸入的輸入框，因為這些輸入框是有機會寫一些惡意程式碼進來的。)

<div id="app">
  <div v-html="age"></div>
</div>
<script>
// Model
let data = {
  name: 'Billy',
  job: 'Front End',
  age: '<i>30</i>',
  num: 30,
  num2: 6
};
// View-Model
var vm = new Vue({
  el: "#app",
  data: data,
});
</script>

4. v-for: 我們很多資料並非是單純字串或數字，很多時候都為陣列形式，而 v-for 讓我們可以根據陣列數量跑迴圈產生對應的 html，並且幫我們把資料塞入。(使用 v-for 時，記得也補上 :key，用意是在於讓 Vue 能夠辨別資料的不同，通常資料來自後端的話較常會去綁上資料的 id。 :key 是 Vue 操作屬性的方式，文章稍後就會提到。)

<div id="app">
  <ul>
    <li v-for="item in classroom" :key="item.id">
      <div>座號: {{item.id}}</div>
      <div>姓名: {{item.name}}</div>
      <div>身高: {{item.height}}</div>
      <div>體重: {{item.weight}}</div>
    </li>
  </ul>
</div>
<script>
// Model
let data = {
  classroom: [
    {
      id: 1,
      name: '小明',
      height: 165,
      weight: 55,
    },
    {
      id: 2,
      name: '小華',
      height: 170,
      weight: 54,
    },
    {
      id: 3,
      name: '小美',
      height: 162,
      weight: 48,
    }
  ],
};
// View-Model
var vm = new Vue({
  el: "#app",
  data: data,
});

5. v-if 如同 JS 常使用的 if else 判斷式一樣，會根據資料狀態判斷區塊的顯示與否，例如: 網頁 loading、網拍的購物車頁面等等，下方範例是模擬網拍的購物車畫面:

<div id="app">
  <table v-if="hasCart === true">
    <thead>
      <tr>
        <th>品名</th>
        <th>數量</th>
        <th>價錢</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in carts">
        <td>{{ item.cartName }}</td>
        <td>{{ item.cartNum }}</td>
        <td>{{ item.price }}</td>
      </tr>
    </tbody>
  </table>
  <div v-else>
    購物車沒有任何商品唷~<br>
    <a href="./shop">去購物</a>
  </div>
</div>
<script>
// Model
let data = {
  carts: [],
  hasCart: false, // false 表購物車沒有商品，反之
};
// View-Model
var vm = new Vue({
  el: "#app",
  data: data,
});
</script>

6. v-show 類似於 v-if 以狀態來判斷內容顯示與否，不同之處在於 v-if 使用的方式是拔除 html 標籤；而 v-show 是用 css display: none 的方式。

7. v-model: 以上六點都是我們把資料帶到 html 的方式，而綁定 v-model 的元素除了可以收到資料的變化而更動，也可以把畫面的內容操作回資料，又稱為雙向綁定，v-model 都是綁定 html 的表單相關元素。(* input file 上傳檔案的綁定方式需特別注意，這個部分不能使用 v-model 做綁定，而是要使用事件處理。)

屬性綁定方式:

屬性綁定，顧名思義就是將資料綁在 html 標籤的屬性上 (ex: src、class、 style、alt 等等......)，以下先來個簡單小範例: 在我們預想要資料的屬性前加上 v-bind: 或者是縮寫 : ，這些方式都能將資料動態綁定在屬性上。

<div id="app">
  <a v-bind:href="imgSrc" target="_blank">連到 youtube</a>
  <a :href="imgSrc" target="_blank">連到 youtube</a>
</div>
// Model
let data = {
  imgSrc: 'https://www.youtube.com/',
};
// View-Model
var vm = new Vue({
  el: "#app",
  data: data,
});
</script>

再舉例常見的 class 、 style 操作，這兩個操作方式都要記得加上物件括號，就像我們寫 css 會寫上的 {}。:class 滿常會拿來做狀態切換，依據狀態的不同決定要加上什麼樣的 class；:style 如果要綁定的樣式比較多時，通常會使用 Vue 的 computed 或 methods 作為處理。

<div id="app">
  <div :class="{ active: isActive }">class測試</div>
  <button type="button" @click="isActive = !isActive">切換class狀態  </button>
  <div class="pic" :style="{'background-image': `url(${bgUrl})`}"></div>
  <div class="pic" :style="{backgroundImage: `url(${bgUrl})`}">  </div>
</div>
<script>
// Model
let data = {
  isActive: false,
  bgUrl: 'https://placem.at/people?w=300&h=300&random=hello'
};
// View-Model
var vm = new Vue({
  el: "#app",
  data: data,
});
</script>

此篇主要是筆記資料如何綁定在畫面上，有一些使用到資料處理、事件的部分將會在後面筆記再做說明。