：リスナー
概要：リスナーは同等である時計は、我々は、データの変更は、この操作が何らかの操作することができたときに、いくつかのアクションを実行、監視データを変更することです
リスナー3つのパラメータがあります。
1.handler：二つのパラメータnewValに（データが変更）OLDVAL（変更前のデータ）を有するどのアクションデータ変更の代わりに、時間関数（newValに、OLDVAL）{}演算子
2.deep：リスナーは、データのタイプ（オブジェクト/配列）、参照モニターに必要な深さ、真の深さリスニング、浅い偽をリスニングしている場合はfalse、デフォルトは偽であります
3 .immediate：真、インスタンスがデータに代わって時計を聴くことは、彼らがリスニングを開始するためにバインドされた最初の時間のために真であるかどうかが作成されます。
<！DOCTYPE HTML>
<HTML>
<ヘッド>
<メタ文字セット= " UTF-8 " >
<タイトル>リスナーの練習</ TITLE>
</ head>の
<身体>
<DIV ID = " アプリ" >
<input type = " テキスト" Vモデル= " conten " >
<DIV> {{showconten}} </ div>
<ボタン@ =をクリックして" obj.name = '赤' 、" >変更データ</ボタン>
</ div>
<スクリプトSRC = " libに/ VUE-2.4.0.js " > </ SCRIPT>
<スクリプトタイプ= " テキスト/ javascriptの" >
のvar VM = 新しいヴュー（{
エル：" #app " 、
データ：{
conten："" 、
OBJ：{
年齢：12 、
名前：「ボブ」
}、
A：0
}、
計算：{
showconten（）{
リターン 「入力の内容は、」 + この.conten。
}
}、
時計：{ // 入力ボックスにモニタ変更
// 各入力ブロックの入力内容は、この行はバックグラウンド値に印刷されている場合：変更されたデータのデータ変更前---
「conten 」：{ // の定義ウォッチのconten conten監視表すデータ
ハンドラ：関数（newValに、OLDVAL）{ // オペレータ
にconsole.log（newValに、" --- " 、OLDVAL）
}、
}、
// リスナーオブジェクト名属性
「obj.name 」：{
// ページには、データだけを入力したとき、暁明＃印刷のデフォルトは未定義、未定義の背景変更されていない
//を使用すると、データを変更する]をクリックすると、スプーラ赤＃暁明の
ハンドラ：機能を（newValに、OLDVAL）{
console.log（newValに、' ＃' 、OLDVAL）
}、
：ディープtrueに、// 深度モニター、あなたがモニタなどのオブジェクトのプロパティを監視することができます「obj.name」
即時負荷：trueに、// モニタデータ彼らはリスニングを開始するためにバインドされた最初の時間のために
}
}
}）
</ SCRIPT>
</ BODY>
</ HTML>
さらに：
リスナーは、VMを呼び出し、インスタンスの外で定義することができます。モニタリングデータに$ウォッチアプローチ。
最初のパラメータがデータ・モニタである、（同じ内部に定義された文言は、実施例における）は、3つのパラメータは{}があることを第2のパラメータは、短い形式で（のみハンドラ）を書くことができます
<！DOCTYPE HTML>
<HTML>
<ヘッド>
<メタ文字セット= " UTF-8 " >
<タイトル>リスナー演習2 </ TITLE>
</ head>の
<身体>
<DIV ID = " アプリ" >
<ボタン@クリック= " NUM ++ " >改变NUM </ボタン>
</ div>
<スクリプトSRC = " libに/ VUE-2.4.0.js " > </ SCRIPT>
<スクリプトタイプ= " テキスト/ javascriptの" >
のvar VM = 新しいヴュー（{
エル：" #app " 、
データ：{
A：0
}、
見る： {
// リスナーがハンドラ直接書き込ま深いとすぐにパラメータを必要としない場合の時間
「NUM 」機能（newValに、OLDVAL）{：
console.log（newValに、' === ' 、OLDVAL）
}
}
}）
VM。$腕時計（" NUM " 、{
ハンドラ：関数（newValに、OLDVAL）{
console.log（newValに、' ==== ' 、OLDVAL）
}
}）
VM。$腕時計（" NUM " 、機能（a、b）は{
console.log（、' === ' 、B）
}）
</ SCRIPT>
</ BODY>
</ HTML>
II：フィルタ
概要：補間フィルタのフィルタはV-バインドの使用でバインディングステートメントと時間を属性することができ、元の値である|フィルター、デフォルトのフィルタ最初の引数は、データをフィルタリングするということです
<！DOCTYPE HTML>
<HTML>
<ヘッド>
<メタ文字セット= " UTF-8 " >
<タイトル>フィルタの練習</ TITLE>
</ head>の
<身体>
<DIV ID = " アプリ" >
<P V- ため = " 4でカウント" > {{カウント|（追加" ¥ "）}} </ P>
</ div>
<スクリプトSRC = " libに/ VUE-2.4.0.js " > </ SCRIPT>
<スクリプトタイプ= " テキスト/ javascriptの" >
のvar VM = 新しいヴュー（{
EL：" #app " 、
// ローカルフィルタの
フィルタ：{
// 下に書かれ、各番号の後ろに¥適用されるフィルタリングする
追加（MSG、X）{ // MSGがフィルタリングされたデータ
はconsole.log（MSG ）
を返す MSG + Xを。
}、
}
}）
</ SCRIPT>
</ BODY>
</ HTML>
また：ビューローフィルタは高についてローカル名を持つグローバルフィルタならば、それは地元の使用を優先させて頂きます場合は、すべてのインスタンスで使用することができます
<！DOCTYPE HTML>
<HTML>
<ヘッド>
<メタ文字セット= " UTF-8 " >
<タイトル> filterグローバル文言</ TITLE>
</ head>の
<身体>
<DIV ID = " アプリ" >
<IMG：SRC = " SRC1 | getimg " ALT = "" >
</ div>
<スクリプトSRC = " libに/ VUE-2.4.0.js " > </ SCRIPT>
<スクリプトタイプ= " テキスト/ JavaScriptを" >
// 我々は、ろ過し、../01.jpgをしたいが、以下：
Vue.filter（" GETIMG " 、機能（MSG）{
リターン " ../ " + MSG。
}）
た VM = 新しい{（ヴュー
エル：" #app " 、
データ：{
SRC1：" 01.jpg "
}
}）
</ SCRIPT>
</ BODY>
</ HTML>