Vue 筆記 - Vue 的實體與特性

Vue 的實體

Vue 的實體是透過 new 這個關鍵字來建立的。

1
2
3

var app = new Vue({
  //實體屬性
});

Vue 的起手式

在 body 中的第一個 <div> 標籤中給一個 id，並且在實體中，先寫入一個 el (element 的意思)，會與 HTML 中 id 標籤名稱相同，下方給一個 data 的物件。

注意：在實體屬性中，是物件的表示方式。

所以起手式如下：

<div id="app">

</div>

<script>
  var vm = new Vue({
    el:'#app',
    data: {
      //資料內容
    },
  })
</script>

Vue 的實體基本屬性

var vm = new Vue({
  el: "#app", //用來掛載 Vue 實體元素
  data: { }, //要綁定的資料
  props: { }, //接收外部資料的屬性
  methods: { }, //定義 vue 實體內使用的函式
  watch: { }, //觀察實體內資料變動
  computed: { }, //自動計算的屬性
  template: "...", //提供 Vue 變更後的樣板
  component: { } //定義子元素
});

el 與 data 的詳述

el

用來把 vue 實體與網頁 DOM 元素做綁定的關鍵實體，當 vue 實體沒有 el 屬性時，就只能透過 vm.$mount()手動編譯。

data

用來存放與實體綁定的資料，當實體建立後，可能過 vm.\$data`` 取得 data 內的資料，實體內則是用 this.xxx 取得。在子元件時，需要用 function() 的形式回傳。

data 內的屬性開頭名稱不可以為 $ 或 _。

實際操作

今天透過 Vue 建立一個 hello Vue!

<div id="app">
    <p>{{message}}</p>
    <input type="text" v-model="message">
</div>

<script>
  var vm = new Vue({
      el: '#app',
      data: {
        message: 'hello! Vue!',
      },
    })
</script>

概念有點像 ES6，變數中給予什麼內容，透過大括號會呈現在網頁上。
使用 v-model 建立資料，對應到 data 的 message 的內容，就會渲染在網頁上。

因為 input 跟 p 段落都是使用相同的資料，所以在 input 輸入新的資料， p 段落會跟著更新。

CodePen