對Vue的模板語法,計算屬性,偵聽器的分析

本篇文章給大家分享的內容是關於對Vue的模板語法,計算屬性以及偵聽器的分析。有需要的朋友可以參考一下。

範本語法、計算屬性與偵聽器

#目標：

1、熟練使用vue的範本語法

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

## 1. 

模板語法

<div id="app">
<!-- 以下说绑定的值都可以写成js表达式形式 -->
<!-- {{}}: 双大括弧语法 -->
<!-- 如果不想让它响应更新,可以添加v-once指令(只渲染一次) -->
<p>
first: {{firstName}}<br>
last: {{lastName}}<br>
{{firstName + &#39; &#39; + 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" :   style="max-width:90%" style="border: 1px solid #000" alt="對Vue的模板語法,計算屬性,偵聽器的分析" ></img>
</div>
 
<script>
var vm = new Vue({
el: &#39;#app&#39;,
data: {
firstName: &#39;Chi&#39;,
lastName: &#39;Chan&#39;,
test: &#39;<h1>哈哈哈<h1>&#39;,
imgHeight: &#39;200px&#39;,
imgWidth: 200
}
})
</script>

 

#2. 計算屬性(computed)

計算屬性和方法時不一樣, 計算屬性是基於他們的依賴,進行快取, #當計算屬性的相關變數改變才會重新進行計算, 否則都是直接從快取讀取之前的計算結果.( 這樣可以降低效能的消耗)

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

#3. 偵聽器(watch)

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

偵聽器,可以偵聽一個資料的變化,#然後執行對應的動作.

4.  使用情境

1.watch

擅長處理的場景：一個數據影響多個資料   (一個變更)#2.computed
擅長處理的情境：一個資料受多個資料影響

# (多個變更,最終回傳一個資料)3.method相對普通,需要主動去觸發

,

#也可能會讓程式碼變得複雜

,

#而且如果像以上這些場景的話,

使用###method######會有更大的效能消耗######. ############相關推薦：###############vue生命週期、vue實例、範本語法########## #

以上是對Vue的模板語法,計算屬性,偵聽器的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！