模板語法、計算屬性和偵聽器

目標：

1、熟練使用vue的模板語法

2、理解計算屬性與偵聽器的用法以及應用場景

1. 模板語法

<div id="app">

<!-- 以下說綁定的值都可以寫成js表達式形式 -->

<!-- {{}}: 雙大括弧語法 -->

<!-- 如果不想讓它響應更新,可以添加v-once指令(只渲染一次) -->

<p>

first: {{firstName}}<br>

last: {{lastName}}<br>

{{firstName + ‘ ‘ + lastName}}

 
</p>

<!-- 以下的綁定都會優先顯示,也就是原本標簽之間的值的會無效 -->

<!-- 使用v-html: html會被解析 -->

<p v-html="test"></p>

<!-- 使用v-text: html不會被解析,直接以文本輸出 -->

<p v-text="test">123</p>

 

<!-- 標簽屬性綁定v-bind, 簡寫":" -->

<img v-bind:height="imgHeight" :width="imgWidth" style
 
="border: 1px solid #000"></img>

</div>

 

<script>

var vm = new Vue({

el: ‘#app‘,

data: {

firstName: ‘Chi‘,

lastName: ‘Chan‘,

test: ‘<h1>哈哈哈<h1>‘,

imgHeight: ‘200px‘,

imgWidth: 200

}

})

</script>

2. 計算屬性(computed)

計算屬性和方法時不一樣, 計算屬性是基於他們的依賴,進行緩存, 當計算屬性的相關變量發生變化才會重新進行計算

計算屬性有getter和setter, 可以分別定義其設值和取值時會執行的函數.

3. 偵聽器(watch)

如果我們只需要偵聽一個數據,或者要在一個數據變化的時候執行一些操作(去改動多個數據),而且這些改動可能和這個數據沒有依賴關系, 那麽就可以使用偵聽器了.

偵聽器,可以偵聽一個數據的變化,然後執行相應的操作.

4. 使用場景

1.watch擅長處理的場景：一個數據影響多個數據 (一個變化)
2.computed擅長處理的場景：一個數據受多個數據影響 (多個變化,最終返回一個數據)

3.method相對普通,需要主動去觸發,還可能會讓代碼變得復雜,而且如果像以上這些場景的話,使用method會有更大的性能消耗.

Vue學習計劃(基礎二)-模板語法,計算屬性,偵聽器