---
tags: Vue 實戰班
---

# Vue 實體，常見的基本方法及屬性

產生 Vue 元件實體以後，將有許多預設的物件屬性及方法可以利用，本段落列出最常見運用的屬性及方法（佔 80%+ 的運用情境），供同學們預習。

- `var app = new Vue();`：將 Vue 的建構函式轉為實體，並且同時傳入元件作為初始化的參數。
- `el`：指定一個元素作為 Vue 實體綁定的位置，選取器方法同`document.querySelector()`，大多情況下都是綁定 `id`。
- `data`：關注點分離的資料位置，所有被預設定義的資料將會產生雙向綁定。資料結構上最外層的 Vue 實體是直接傳入物件，在內層的元件時則是透過函式回傳物件（元件章節會有詳細說明）。
- `methods`：定義元件的函式方法，這些方法可以透過元件 DOM 的 v-on 或元件內的 `this` 直接呼叫。
- `created`：元件的生命週期之一，可在元件建立的同時執行特定方法（如直接呼叫 methods 自訂的方法，或進行 Ajax 行為）。
- `computed`：元件的資料呈現方式，return 的結果會回傳於畫面上，會自動監測資料是否有更動，當有更動後將會執行其內容，並且渲染於畫面之上。

<div id="app">
  <input type="text" class="form-control" v-model="filterText">
  <ul>
    <li v-for="(item, key) in filterData" :key="item.age">
      {{ key }} - {{ item.name }} {{ item.age }} 歲
    </li>
  </ul>
  <button class="btn btn-outline-primary" @click="reverseArray">反轉陣列</button>
</div>

// 將 Vue 的建構函式轉為實體，並且同時傳入元件作為初始化的參數。
var app = new Vue({
  // 指定一個元素作為 Vue 實體綁定的位置
  el: '#app',
  
  // 資料位置，所有被預設定義的資料將會產生雙向綁定。
  data: {
    arrayData: [
      {
        name: '卡斯伯',
        age: 35
      },
      {
        name: 'Ray',
        age: 28
      },
      {
        name: '洧杰',
        age: 33
      }
    ],
    filterText: '',
  }, 
  
  // 定義元件的函式方法
  methods: {
    reverseArray: function () {
      this.arrayData.reverse()
      console.log(this.arrayData)
    },
  },
  
  // 元件的資料呈現方式，return 的結果會回傳於畫面上
  computed: {
    filterData: function () {
      var vm = this;
      return vm.arrayData.filter(function (item) {
        return item.name.match(vm.filterText);
      });
    },
  },
  
  // 元件的生命週期之一
  created: function() {
    this.arrayData.push({
      name: '神秘人',
      age: 42
    })
  }
});

<iframe height="265" style="width: 100%;" scrolling="no" title="Vue 實體常見基本方法" src="https://codepen.io/hsiangfeng/embed/wvKgdEP?height=265&theme-id=dark&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
See the Pen <a href='https://codepen.io/hsiangfeng/pen/wvKgdEP'>Vue 實體常見基本方法</a> by Ray
(<a href='https://codepen.io/hsiangfeng'>@hsiangfeng</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>