Vue學習計劃(基礎二)-模板語法,計算屬性,偵聽器
阿新 • • 發佈:2018-07-17
形式 否則 偵聽器 響應 lib family align code set , 否則都是直接從緩存中讀取之前的計算結果.(這樣可以降低性能的消耗)
模板語法、計算屬性和偵聽器
目標:
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學習計劃(基礎二)-模板語法,計算屬性,偵聽器