Vue.js Data Binding

data

Vue Instance 可以透過data來儲存外部資料

data 作用有二：

1 儲存元件內部狀態或資料
2 和v-model合作實現雙向綁定

資料型別

參考資料

data可以是object或是function，但元件 (Component)的data只能是function，

這是因為元件內各自擁有自己的data，而非共用的關係。

原理

在observer中，data透過Object.defineProperty()為元件內屬性重新定義

getter和setter method。當data被修改時，會透過setter通知變化，觸發

watcher重新計算、更新與渲染DOM element。

Vue Component Web Component

src code

<div id="app"></div>

Vue.component('vueMd', {
  template: `<div>
    <input type="text" v-model="message">
    <div>{{message}}</div>
  </div>`,
  props: ["message"]
})
let vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    message: 'Hello World!',
  },
  template: `<vueMd/>`
});

filter

filter的作用是用來有效將raw data做格式化顯示而不需要透過對資料本身修改

舉例來說日期顯示 如果後端儲存的資料為 timestamp

而前端想要直接呈現為 yyyy/MM/dd

就可以透過這種方式來處理

<div id="app">
  <div>${date|dateFormat}</div>
</div>

const testTime = new Date().getTime();
let vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    date: testTime,
  },
  filters: {
    dateFormat: function(value) {
      console.log(`dateformat :`,value);
      let result =  new Date(value).toString("yyyy/MM/dd");
      return result;
    }
  }
});

src code

v-bind with filter

v-bind 的作用是把上層Component的data值綁定到下層的存取key

舉例來說：
定義一個vueMd的component
然後讀取外部傳入的dateString

然後透過 v-bind把外部的date對應到這個component的dateString
語法為

<div v-bind:dateString="date">

或是簡寫為

<div :dateString="date">

以下為完整的範例：
HTML部分：

<div id="app"></div>

Javascript部分：

Vue.component('vueMd', {
  template: `<div>{{dateString}}</div>`,
  props: ["dateString"]
});

const testTime = new Date().getTime();
let vm = new Vue({
  el:'#app',
  data: {
    date: testTime,
  },
  filters: {
    dateFormat: function(value){
      console.log(`dateFormat: `,value);
      let result = new Date(value).toString("yyyy/MM/dd");
      return result;
    }
  },
  template: `<vueMd :dateString="date|dateFormat"/>`
});

src code

computed

當資料需要經過比較複雜的運算轉換，或是需要及時互動的時候

就需要使用computed這個hook來做處理

基本上會觸發computed來啟動

主要是observer的getter跟setter

上剛剛的time處理 如果放在v-model的時候就會觸動computed來做這件事情

改寫如下：
HTML部分：

<div id="app"/>

javascript部分：

Vue.component('vueMd',{
  template: `<div v-model="date">{{date}}</div>`,
  props: ["date"]
});

const testTime = new Date().getTime();
let vm = new Vue({
  el:"#app",
  data: {
    date: testTime
  },
  template: `<vueMd :date="formatDate"/>`,
  computed: {
    formatDate: function() {
      console.log(`formatedDate`);
      let formatedDate = new Date(this.date).toString('yyyy/MM/dd');
      return formatedDate;
    }
  }
});

src code