Vueのリスナー

リスナーアプリケーションのシナリオ：

非同期データ変更や大きなオーバヘッド動作を行います。

データは、リスナーの通知方法に変更されていたら、バインドされています。

1 <！ - VUE侦听器- >
 2 <！DOCTYPEのHTML>
 3 <HTMLのlang = "EN">
 4 <ヘッド>
 5      <メタのcharset = "UTF-8">
 6      <メタ名= "ビューポート"コンテンツ= "幅=デバイス幅、初期スケール= 1.0">
 7      <メタHTTP-当量= "X-UA-互換"コンテンツ= "IE =縁">
 8      <タイトル>ドキュメント</タイトル>
 9      <SCRIPT SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </ SCRIPT>
 10 </ head>の
 11 <身体>
 12 <div要素のid = 'アプリ'>
13  
14      の<div>姓<入力V-モデル= "firstNameの"> </入力> </ div>
 15     <DIV>名：<入力V-モデル= "lastNameの"> </入力> </ div>
 16      <div>の全名：<入力V-モデル= "のfullName"> </入力> </ div>
 17  
18 </ div>
 19  
20 <スクリプト>
 21      VARの VM = 新しいヴュー（{
 22          EL： '＃アプリ' 、
 23          データ：{
 24              のfirstName 'ジム' 、
 25              lastNameの： 'グリーン' 、
 26              のfullName：「ジム・グリーン
 27          }、
 28          の方法：{
 29  
30          }、
31      //     リスナー
32         時計：{
 33              のfirstName：関数（値）{
 34                  この .fullName =値+ '' + この.lastName
 35              }、
 36              lastNameの：関数（値）{
 37                  この .fullName =    この .firstName + '' + 値 
 38      }
 39          }
 40      }）
 41 </スクリプト>
 42 </ BODY>
 43 </ HTML>