本篇文章給大家分享的內容是關於對Vue的模板語法,計算屬性以及偵聽器的分析。有需要的朋友可以參考一下。
範本語法、計算屬性與偵聽器
#目標：
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生命週期、vue實例、範本語法########## #以上是對Vue的模板語法,計算屬性,偵聽器的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
