Analysis of Vue's template syntax, calculated properties, and listeners

The content shared with you in this article is about the analysis of Vue’s template syntax, calculated properties and listeners. Friends in need can refer to it.

TemplateSyntax, ComputationProperties and listeners

Goal :

1, Proficient in using vue’s template syntax

2. Understand the usage and application scenarios of computed properties

and listeners

1. Template syntax

<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" :width="imgWidth" style="border: 1px solid #000"></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 properties(computed)

Computed properties and methods are different, Computed properties are cached based on their dependencies,, When the relevant variables of the calculated attribute change, the calculation will be recalculated, Otherwise, the previous calculation result will be read directly from the cache.( This can reduce performance consumption)

Computed properties include getter and setter, You can define the functions that will be executed when setting and getting the value respectively.

3. Listener(watch)

If we only need to listen to one piece of data,or perform some operations when a piece of data changes(To change multiple data),And these changes may not have dependencies on this data, then you can use the listener .

##Listener,can listen for changes in a data, Then perform the corresponding operations.

4. Usage scenarios

1. Scenarios that watch

is good at processing: a data Affecting multiple data (One change)2.computed
Scenarios that are good at processing: one data is affected by multiple data (Multiple changes,Finally returns one data)

3.method

relative Normally,needs to actively trigger,may also make the code complicated,And if the scenarios like the above,usemethod, there will be greater performance consumption.

Related recommendations:

vue life cycle, vue instance, template syntax

The above is the detailed content of Analysis of Vue's template syntax, calculated properties, and listeners. For more information, please follow other related articles on the PHP Chinese website!