[Vue] 模板語法 2/2

計算屬性(computed)

index.html

<div>Reverse Title: {{reverseTitle}}</div>

index.js

Vue({

  data: {

      title: 'Test'

  },

  computed: {

    // 自定義屬性

        reverseTitle: function () {

            return this.title.split('').reverse().join('')

        }

  }

})

計算屬性 v.s. 方法

  methods: {

        reverseTitle: function () {

            return this.title.split('').reverse().join('')

        }

  }

和

  computed: {

    // 自定義屬性

        reverseTitle: function () {

            return this.title.split('').reverse().join('')

        }

  }

• methods 每次渲染都會更新，保持最新的值，但使用較多資源
• computed 會緩存，不一定是最新的值，使用較少資源

source code

計算屬性結合 getter / setter

data: {

    firstName: 'Shawn',

    lastName: 'Tseng'

},

computed: {

        fullName: {

            get: function () {

                return this.firstName + ' ' + this.lastName

            },

            set: function (newValue) {

                var name = newValue.split(' ');

                this.firstName = name[0];

                this.lastName = name[name.length - 1];

            }

        }

}

• 在 fullName 更新時，也會觸發 set ，更新 firstName 和 lastName

source code

監聽器(watch)

  data: {

    age: '',

    reply: '',

  },

  watch: {

      age: function (oldValue) {

        this.reply = '你的年紀:' + oldValue;

      }

  }

• 在age變動時，會執行watch的邏輯，非常消耗資源
• 在需要串接後端的情境常使用

source code

[Vue] 模板語法 1/2

常見的模板語法

• Mustache(雙大括號)

只要變數更新，模板就會更新

{{ var }}

• 一次性綁定

只有第一次會更新模板

<div v-once>{{showHint}}</div>

• HTML 解析

<div v-html="rawHtml"></div>

*. 使用v-html正確解析 HTML內容

• 屬性綁定

<input type="text" v-bind:disabled="!canTypeIn">

*. 使用v-bind綁定 HTML 元素屬性

常見的指令

• v-if

<div v-if="showHint">看情況顯示文字</div>

• v-bind:屬性名稱="要綁定的變數"

<span v-bind:title="loadTime">

    滑鼠移置文字上，顯示'網頁啟動時間'

</span>

*. 縮寫 :bind:屬性名稱="要綁定的變數"

• v-on:事件名稱="要綁定的方法"

<button v-on:click="switchShowHint">開關</button>

*. 縮寫 @click="要綁定的方法"

source code

[Vue] new Vue 的實體

new Vue()

var vm = new Vue({ // 參數 })

• vm: viewModel的意思，概念源自於MVVM架構。

參數

• data

var data = {

    title: 'Hello World'

}

var vm = new Vue({

    data: data

})

Vue 會把變數 data和變數 vm雙向綁定

data.title === vue.title // true

data.title = '改值時vm.title也會改';

vm.title = '改值時data.title也會改';

結論: data 和 vm 共用記憶體空間

DOM渲染注意事項

1.

透過

var vm = new Vue({

    data: data    

})

新增的屬性，都會被監聽，變更時會渲染到畫面上

2.

new Vue() 之後才新增的屬性，都不會被監聽

e.g.

vm.newProperty = 'test'; // newProperty 不會被監聽

3.

根據1.2.的特性，未來才會用到的屬性，就需要在一開始設置初始值

e.g.

var data = {

    futureProperty:''

}

4.

Object.freeze() 可以使物件變成唯讀，不被監聽

e.g.

Object.freeze(data); // 意即data不會被監聽，不會更新到畫面上

Vue提供的屬性、方法

vue提供的屬性方法前面會有前綴符號 $

e.g.

• vm.$data

vm的data

• vm.$el

vm的DOM

• vm.$watch('property',function(newValue, oldValue){ // callback })

可監聽某個property

Vue提供的hook

在 Vue 的生命週期過程中，提供的不同的 hook 給使用者，全景未來說明

e.g.

new Vue({

    created: function(){
        console.log(this.property);

    }

})

source code