Vue의 템플릿 구문, 계산된 속성 및 리스너 분석

이 기사에서 공유한 내용은 Vue의 템플릿 구문, 계산된 속성 및 리스너 분석에 관한 것입니다. 도움이 필요한 친구들이 참고할 수 있습니다.

Template구문, Calculation속성 및 리스너

Goals:

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" :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. 계산된 속성(계산됨)

속성과 메소드는 다음과 같습니다. Different, 계산된 속성은 종속성에 따라 캐시됩니다,, 계산된 속성의 관련 변수가 변경되면 다시 계산됩니다, 그렇지 않으면 직접 캐시됩니다. 이전 계산 읽기 (이렇게 하면 성능 소비가 줄어들 수 있습니다 )

계산된 속성에는 getter 및 setter가 포함되며, 에서는 해당 설정과 값을 각각 정의할 수 있습니다 .

3. 리스너 (보기)

하나의 데이터만 수신해야 하는 경우,또는 데이터가 변경될 때 일부 작업을 수행( 여러 데이터를 변경하려면),그리고 이러한 변경 사항은 이 데이터, 그런 다음 리스너를 사용할 수 있습니다.

리스너,는 데이터,의 변경 사항을 듣고 해당 작업을 수행할 수 있습니다. .

4. 사용 시나리오

이 처리에 능숙한 시나리오: 하나의 데이터가 여러 데이터에 영향을 줌      (One Change )2.computed
하나의 데이터는 여러 데이터의 영향을 받습니다 (다중 변경,마지막으로 하나의 데이터를 반환)

상대적으로 평범함 , 적극적으로 트리거되어야 함 , 또한 코드를 복잡하게 만들 수 있습니다. vue 라이프 사이클, vue 인스턴스, 템플릿 구문

위 내용은 Vue의 템플릿 구문, 계산된 속성 및 리스너 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!