Vue のテンプレート構文、計算されたプロパティ、リスナーの分析-jsチュートリアル-php.cn

Vue のテンプレート構文、計算されたプロパティ、リスナーの分析

不言

リリース： 2018-07-17 16:32:10

オリジナル

1486 人が閲覧しました

この記事で共有する内容は、Vue のテンプレート構文、計算されたプロパティ、およびリスナーの分析に関するものです。困っている友達は参考にしてください。

テンプレート構文、計算プロパティとリスナー

目標:

1、 vueの上手な使い方テンプレート構文

2、計算されたプロパティ

とリスナーの使用法とアプリケーションシナリオを理解する

テンプレート構文

<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. 計算されたプロパティ(計算された)

属性とメソッドは次のとおりです。異なる、計算されたプロパティは依存関係に基づいてキャッシュされます、、計算されたプロパティの関連変数が変更されると、再計算されます、それ以外の場合は直接キャッシュされます前の計算を読み取ります(これによりパフォーマンスの消費を削減できます ) 計算されたプロパティには

getter

と setter が含まれており、はそれぞれ実行される関数 . を定義できます。

3. リスナー

(監視) 1 つのデータのみをリッスンする必要がある場合

、またはデータが変更されたときにいくつかの操作を実行する場合

( 複数のデータを変更する場合)、これらの変更はこのデータに依存していない可能性があります、その後、リスナーを使用できます。リスナー、

はデータ

、の変更をリッスンして、対応する操作を実行できます.4. 使用シナリオ

1. watch が処理を得意とするシナリオ: 1 つのデータが複数のデータに影響を与える (

1 つの変更

)2.computed が得意とするシナリオ: 1 つのデータが複数のデータの影響を受ける
(複数の変更、最終的に 1 つのデータを返す)3.method比較的普通

、