iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

別再說我不會框架,網頁 Vue 起來!系列 第 3

資料呈現與運算處理

前言

前端需負責畫面上呈現的所有東西,可能是顯示靜態資料或是需要將原始資料經過繁複的運算得到結果,不可能不用到如此重要的Data 以及 Methods

此篇範例取自 Vue.js 官網


資料 Data

延續上一篇: data 屬性用來定義狀態,並且記得需使用 function 方式!

對元件 (component) 來說,data option 是一個 function。Vue 會在建立新的元件實體時,就會去呼叫這個function。這個 function 必須回傳一個物件,Vue 會包裝這個物件成 $data,並儲存在元件實體中,我們就可以使用 實體.$data.name來取用。

ex:

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

// 以下兩種方式都是印出 data 中的 count
console.log(vm.$data.count) // => 4
console.log(vm.count)       // => 4

// 賦值給vm.count 的同時,也會同時更新 $data.count
vm.count = 5
console.log(vm.$data.count) // => 5

方法 Methods

利用 methods option,替實體增加方法,以物件表示,將需要使用的方法寫在物件中。

ex:

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  // 新增 methods option 
  methods: {
    increment() {
      // `this` 是參考這個元件實體
      this.count++
    }
  }
})

const vm = app.mount('#app')

console.log(vm.count) // => 4

vm.increment()

console.log(vm.count) // => 5

Vue 會自動綁定 thismethods,所以methods 中可以存取這個實體的內容


計算 Computed

在模板中可以使用一些簡單的運算式,如果是屬於比較複雜或是重複使用的邏輯運算,建議使用computed
ex:

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}

Computed 基本使用

ex:

Vue.createApp({
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // a computed getter, 宣告一個 publishedBooksMessage 屬性
    publishedBooksMessage() {
      // `this` 指向 vm 實體
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}).mount('#computed-basics')
<div id="computed-basics">
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</div>

computed 是當依賴的或是有連結到的值改變時,就會跟著改變。例如 vm.author.books值異動時,vm.publishedBooksMessage就會更新。

Computed Setter

Computed 屬性預設是 getter,也有 setter 可以使用。

ex:

// ...
computed: {
  fullName: {
    // getter
    // 會觀察 firstName 和 lastName 是否改變
    get() {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    // 當 fullName 被設值時,set 會被觸發
    set(newValue) {
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

下篇預告

  • directive

每日一句:
中秋連假啟動,存稿模式催落 /images/emoticon/emoticon10.gif 


上一篇
Hello, Vue
下一篇
模板中的 Directive 指令 (上)
系列文
別再說我不會框架,網頁 Vue 起來!30

尚未有邦友留言

立即登入留言