Vueの基本 - 共通機能

フォームの基本操作

• ラジオボックスの値を取得

  • v-model経由

   	<!-- 
  		1本の総数は計算配列の長さであり、2つのチェックボックスはv-modelを介して両方向の値にバインドされる必要がある。
   2総冊数は計算配列の長さであり、各ラジオボックスはvalue属性を持ち、同じ値を持ってはならない。
  		3v-modelは、ラジオボックスがチェックされると、現在の値をデータに変更する。
  		gender の値は選択範囲の値で、その値をリアルタイムに監視すればよい。
  	-->
   <input type="radio" id="male" value="1" v-model='gender'>
   <label for="male"> </label>
   <input type="radio" id="female" value="2" v-model='gender'>
   <label for="female"> </label>
  <script>
   new Vue({
   data: {
   // 現在の値である2がデフォルトでチェックされる。
   gender: 2, 
   },
   })
  </script>
  

• チェックボックスの値を取得

  • v-model経由
  • ラジオボックスの値の取得と同じ
  • チェックボックスのようなチェックボックスを組み合わせる場合、趣味のデータは配列として定義する必要があります。

  	<!-- 
  		1チェックボックスは、v-modelを介して値と双方向にバインドする必要がある。
   2総冊数は計算配列の長さであり、各チェックボックスはvalue属性を持たなければならず、value値は同じであってはならない。
  		3v-modelは、ラジオボックスがチェックされると、現在の値をデータに変更する。
  		hobby の値は選択範囲の値で、その値をリアルタイムに監視すればよい。
  	-->
  <div>
   <span> </span>
   <input type="checkbox" id="ball" value="1" v-model='hobby'>
   <label for="ball"> </label>
   <input type="checkbox" id="sing" value="2" v-model='hobby'>
   <label for="sing"> </label>
   <input type="checkbox" id="code" value="3" v-model='hobby'>
   <label for="code"> </label>
   </div>
  <script>
   new Vue({
   data: {
   // デフォルトでは、現在値2と3のチェックボックスにチェックが入っている。
   hobby: ['2', '3'],
   },
   })
  </script>
  

• ドロップダウンボックスとテキストボックスでの値の取得

  • v-model経由

   <div>
   <span> </span>
   <!--
  			1総冊数は計算配列の長さであり、v-modelを介してselectの値にバインドする必要がある。
   2総冊数は計算配列の長さであり、各オプションはvalue属性を持たなければならず、value値は同じであってはならない。
  		 3オプションが選択されると、v-modelは現在の値をデータのデータに変更する。
  		 occupation の値は選択範囲の値であり、リアルタイムでその値を監視すればよい。
  		-->
   <!-- multiple 複数選択可能>
   <select v-model='occupation' multiple>
   <option value="0">職業を選択する...</option>
   <option value="1"> </option>
   <option value="2">ソフトウェア・エンジニア</option>
   <option value="3"> </option>
   </select>
   <!-- textarea Yes 値属性にバインドする必要のない二重タグ--。>
   <textarea v-model='desc'></textarea>
   </div>
  <script>
   new Vue({
   data: {
   // デフォルトでは、現在値が2と3のドロップダウンボックスが選択される。
   occupation: ['2', '3'],
   	 desc: 'nihao'
   },
   })
  </script>
  

フォーム修飾子

• .number 数値に変換します。

  • ポイント
  • 数値以外の文字列を入力し始めると、Vueは文字列を値に変換できないため
  • そのため、属性値はリアルタイムで同じ文字列に更新されます。その後に数値が入力されても、文字列として扱われます。

• .trim は、ユーザー入力から先頭と末尾の空白文字を自動的にフィルタリングします。

  • 削除できるのは最初と最後のスペースだけで、その間のスペースは削除できません。

• .lazyは入力イベントを変更イベントに切り替えます。

  • .lazy修飾子は、プロパティ値の更新の同期を遅らせます。これは、入力イベントにバインドされていた同期ロジックが、変更イベントにバインドされることを意味します。

• フォーカスが外れたとき、またはEnterキーが押されたときに更新されます。

  <!-- ユーザ入力を自動的に数値型に変換する--。>
  <input v-model.number="age" type="number">
  <!--ユーザ入力の先頭と末尾の空白文字を自動的にフィルタリングする--。>
  <input v-model.trim="msg">
  <!-- を変更する”の代わりに”を更新するとき>
  <input v-model.lazy="msg" >
  

カスタムディレクティブ

• 内蔵コマンドが特定のニーズを満たさない
• Vueカスタムディレクティブの許可

Vue.directive グローバルディレクティブの登録

<!-- 
 カスタムディレクティブを使用するには'v-'の接頭辞は'v-if'，'v-text'配列の
-->
<input type="text" v-focus>
<script>
// ポイントに注意
// 1総冊数は計算配列の長さ、またはVue.Directiveのカスタムディレクティブでキャメルネーミングで定義されている場合は総冊数となる。.directive('focusA',function(){}) 
// 2総冊数は計算配列の長さであり、HTMLで使用する場合はv-focus-aでのみ使用できる。
 
// グローバルカスタムディレクティブv-focusを登録する
Vue.directive('focus', {
 	// の長さである。 ここで、elはdom要素である
 	inserted: function (el) {
 		// フォーカスされた要素
 		el.focus();
 	}
});
new Vue({
　　エル:'#app'
});
</script>

Vue.directive はグローバルディレクティブをパラメータで登録します。

 <input type="text" v-color='msg'>
 <script type="text/javascript">
 /*
 カスタムディレクティブ - パラメータ付き
 bind - ディレクティブが最初に要素にバインドされたときに一度だけ呼び出される
 */
 Vue.directive('color', {
 // bind宣言サイクル。ディレクティブが最初に要素にバインドされたときに一度だけ呼び出される。ここで、1回限りの初期化を設定することができる
 // el 現在のカスタムディレクティブのDOM要素
 // binding カスタム関数の正式パラメータ カスタムプロパティで渡される値 Existsバインディング.value  
 bind: function(el, binding){
 // ディレクティブのパラメータに従って背景色を設定する
 // console.log(binding.value.color)
 el.style.backgroundColor = binding.value.color;
 }
 });
 var vm = new Vue({
 el: '#app',
 data: {
 msg: {
 color: 'blue'
 }
 }
 });
 </script>

カスタム指示 ローカル指示

• ディレクティブのオプションで定義する必要のあるローカルディレクティブは、 グローバルディレクティブと同じように使用されます。
• ローカルコマンドは、現在のコンポーネント内でのみ使用できます。
• グローバル命令とローカル命令が同じ名前の場合、ローカル命令が優先されます。

<input type="text" v-color='msg'>
 <input type="text" v-focus>
 <script type="text/javascript">
 /*
 カスタムディレクティブ - ローカルディレクティブ
 */
 var vm = new Vue({
 el: '#app',
 data: {
 msg: {
 color: 'red'
 }
 },
 	 //ローカルディレクティブは、ディレクティブのオプションで定義する必要がある
 directives: {
 color: {
 bind: function(el, binding){
 el.style.backgroundColor = binding.value.color;
 }
 },
 focus: {
 inserted: function(el) {
 el.focus();
 }
 }
 }
 });
 </script>

計算されたプロパティcomputed

• テンプレートにロジックを盛り込みすぎると、重くなりすぎ、メンテナンスが難しくなります。
• コンピュート・プロパティは、レスポンシブな依存関係に基づいてキャッシュされます。
• computedは、複数の変数やオブジェクトを処理して結果値を返すのに適しています。

 <div id="app">
 <!-- 
 reverseStringが複数回呼ばれた場合
 中のnumの値が変わらない限り、最初の計算結果をそのまま返す。
		計算されたプロパティは、データのnumの値が変更されるまで再計算されない。
 -->
 <div>{{reverseString}}</div>
 <div>{{reverseString}}</div>
 <!-- メソッドでメソッドを呼び出すとき、その都度再呼び出しする --。>
 <div>{{reverseMessage()}}</div>
 <div>{{reverseMessage()}}</div>
 </div>
 <script type="text/javascript">
 /*
 計算プロパティとメソッドの違い:計算されたプロパティは依存関係に基づいてキャッシュされるが、メソッドはキャッシュされない
 */
 var vm = new Vue({
 el: '#app',
 data: {
 msg: 'Nihao',
 num: 100
 },
 methods: {
 reverseMessage: function(){
 console.log('methods')
 return this.msg.split('').reverse().join('');
 }
 },
 //computed プロパティの定義とデータすでにメソッドレベル
 computed: {
 // reverseString これは自分で定義した名前である
 reverseString: function(){
 console.log('computed')
 var total = 0;
 // データ中のnumの値が変更されると、reverseStringが自動的に冊数を計算する。
 for(var i=0;i<=this.num;i++){
 total += i;
 }
 // returnがないと、reverseStringを呼び出したときに結果が得られない。
 return total;
 }
 }
 });
 </script>

リスナーウォッチ

• ウォッチを使ってデータの変化に対応
• 通常、非同期または高オーバーヘッドの操作に使用されます。
• watchのアトリビュートは、すでにdataに存在するデータでなければなりません。
• オブジェクトの変更をリッスンする必要がある場合は、通常のウォッチメソッドは、オブジェクトの内部プロパティの変更をリッスンすることはできません、唯一のデータのデータの変更をリッスンすることができます、その後、オブジェクトのディーププロパティを深くリッスンする必要があります

 <div id="app">
 <div>
 <span> </span>
 <span>
 <input type="text" v-model='firstName'>
 </span>
 </div>
 <div>
 <span> </span>
 <span>
 <input type="text" v-model='lastName'>
 </span>
 </div>
 <div>{{fullName}}</div>
 </div>
 <script type="text/javascript">
 /*
  
 */
 var vm = new Vue({
 el: '#app',
 data: {
 firstName: 'Jim',
 lastName: 'Green',
 // fullName: 'Jim Green'
 },
 //watch プロパティの定義とデータすでにメソッドレベル
 watch: {
 // 注：firstNameはデータのfirstNameに対応する。
 // firstNameの値が変更されると、自動的に監視が開始される。
 firstName: function(val) {
 this.fullName = val + ' ' + this.lastName;
 },
 // 注: lastNameはデータのlastNameに対応する。
 lastName: function(val) {
 this.fullName = this.firstName + ' ' + val;
 }
 }
 });
 </script>

フィルタ

• Vue.jsでは、いくつかの一般的なテキストの書式設定に使用できるカスタムフィルタを使用できます。
• フィルターは2つの場所で使用できます：二重中括弧補間とv-bind式。
• フィルターはJavaScriptの式の最後に追加する必要があります。
• カスケードのサポート
• フィルタは実際のデータを変更するのではなく、レンダリングされた結果のみを変更します。
• グローバル登録は、sを持たないフィルターです。また、ローカルフィルタとは、sを持つフィルタです。

 <div id="app">
 <input type="text" v-model='msg'>
 <!-- upper 引数を1つ取るフィルタ関数として定義され、式msgの値が引数として関数に渡される--。>
 <div>{{msg | upper}}</div>
 <!-- 
 カスケードのサポート
 upper は引数を1つ取るフィルタ関数として定義され、式msgの値が関数の引数として渡される。
	 次に、同じく単一の引数を取るように定義されたフィルタlowerを呼び出し、upperの結果をlowerに渡す。
 	-->
 <div>{{msg | upper | lower}}</div>
 <div :abc='msg | upper'>テストデータ</div>
 </div>
<script type="text/javascript">
 // lower グローバルフィルタの場合
 Vue.filter('lower', function(val) {
 return val.charAt(0).toLowerCase() + val.slice(1);
 });
 var vm = new Vue({
 el: '#app',
 data: {
 msg: ''
 },
 //filters プロパティの定義とデータすでにメソッドレベル
 // filtersのフィルタをローカルフィルタとして定義する
 filters: {
 // upper カスタムフィルタ名
 // upper 引数を1つ取るフィルタ関数として定義され、式msgの値が関数の引数として渡される。
 upper: function(val) {
 // 外部がフィルタを使用するときに結果を取得できるように、フィルタに戻り値がなければならない。
 return val.charAt(0).toUpperCase() + val.slice(1);
 }
 }
 });
 </script>

フィルタでパラメータを渡す

 <div id="box">
 <!--
			filterA は3つの引数をとるフィルタ関数として定義される。
 			ここで、messageの値は最初のパラメータである，
			通常の文字列'arg1' を第二引数、arg2式を第三引数とする。
		-->
 {{ message | filterA('arg1', 'arg2') }}
 </div>
 <script>
 // フィルタでは、最初のパラメータはパイプライン文字nの前のデータに対応し、この場合はメッセージに対応する。
 // 第2パラメータaは実パラメータarg1文字列に対応する。
 // 3番目のパラメータbは、実際のパラメータarg2に対応し、文字列である。
 Vue.filter('filterA',function(n,a,b){
 if(n<10){
 return n+a;
 }else{
 return n+b;
 }
 });
 
 new Vue({
 el:"#box",
 data:{
 message: "ハハハ"
 }
 })
 </script>

ライフサイクル

• 誕生から死まで
• Vueインスタンスの生成と破棄のプロセスには、多くの関数呼び出しが伴います。これらの関数はフック関数と呼ばれます。

#### 共通フック機能

配列の変異メソッド

• Vueでは、オブジェクト・プロパティの値を直接変更しても、レスポンシブをトリガすることはできません。オブジェクト・プロパティの値を直接変更すると、データだけが変更され、ページの内容は変更されません。
• 配列メソッドの変異、つまり配列メソッドの機能を拡張しつつ、元の機能は変更しないこと。

配列の置き換え

• は元の配列を変更せず、常に新しい配列を返します。

ダイナミックアレイ・レスポンシブデータ

• Vue.set(a,b,c)ビューをトリガーして、データを動的に更新してみましょう。
• aは変更されるデータ、bはデータの最初の項目、cは変更されたデータです。

書籍リストの例

• 静的リスト効果
• データに基づくテンプレート効果の実装
• 行ごとのアクションボタンの扱い

提供される静的データ

• データはvueのdataプロパティに格納されます。

 var vm = new Vue({
 el: '#app',
 data: {
 books: [{
 id: 1,
 name: '三国志',
 date: ''
 },{
 id: 2,
 name: ' ',
 date: ''
 },{
 id: 3,
 name: ' ',
 date: ''
 },{
 id: 4,
 name: ' ',
 date: ''
 }]
 }
 }); var vm = new Vue({
 el: '#app',
 data: {
 books: [{
 id: 1,
 name: '三国志',
 date: ''
 },{
 id: 2,
 name: ' ',
 date: ''
 },{
 id: 3,
 name: ' ',
 date: ''
 },{
 id: 4,
 name: ' ',
 date: ''
 }]
 }
 });

、提供されたデータをページにレンダリングします。

• データの各項目を対応するデータにレンダリングするために、v-forループを使用してブックを繰り返し処理します。

 <tbody>
 <tr :key='item.id' v-for='item in books'>
 <!-- 対応するidがページにレンダリングされる。>
 <td>{{item.id}}</td>
 <!-- 対応する名前がページにレンダリングされる。>
 <td>{{item.name}}</td>
 <td>{{item.date}}</td>
 <td>
 <!-- タグのデフォルトジャンプをブロックする>
 <a href="" @click.prevent> </a>
 <span>|</span>
 	 <a href="" @click.prevent> </a>
 </td>
 </tr>
</tbody>

書籍の追加

• 双方向バインディングによる入力ボックスへの入力の取得
• ボタンへのクリックイベントの追加
• 入力ボックスからのデータをデータ内のブックに格納します。

<div>
 <h1>本の管理</h1>
 <div class="book">
 <div>
 <label for="id">
  
 </label>
 <!-- 3.1総冊数は計算配列の長さである>
 <input type="text" id="id" v-model='id'>
 <label for="name">
  
 </label>
 <!-- 3.2入力ボックスの入力名は双方向バインディングで取得される>
 <input type="text" id="name" v-model='name'>
 <!-- 3.3ボタンにクリックイベントを追加する>
 <button @click='handle'> </button>
 </div>
 </div>
</div>
 <script type="text/javascript">
 /*
 書籍管理 - 書籍を追加する
 */
 var vm = new Vue({
 el: '#app',
 data: {
 id: '',
 name: '',
 books: [{
 id: 1,
 name: '三国志',
 date: ''
 },{
 id: 2,
 name: ' ',
 date: ''
 },{
 id: 3,
 name: ' ',
 date: ''
 },{
 id: 4,
 name: ' ',
 date: ''
 }]
 },
 methods: {
 handle: function(){
 // 3.4 新しいオブジェクトbook storeを定義して、入力ボックスの本のidと名前を取得する。
 var book = {};
 book.id = this.id;
 book.name = this.name;
 book.date = '';
 // 3.5 配列のバリアントプッシュで本を本に入れる
 this.books.push(book);
 //3.6 入力ボックスをクリアする
 this.id = '';
 this.name = '';
 }
 }
 });
 </script>

書籍の変更 - 上

• 修正ボタンがクリックされたときに修正するブックのリストを取得します。
  • 4.1 編集ボタンにクリックイベントを追加するには、編集するブックがわかるように、現在のブックIDを渡す必要があります。
• 変更するブックのリストをフォームに入力します。
  • 4.2 渡されたidに基づいて、該当する書籍の詳細を検索します。
  • 4.3 フォームに検索された情報を入力します。

 <div id="app">
 <div class="grid">
 <div>
 <h1>本の管理</h1>
 <div class="book">
 <div>
 <label for="id">
  
 </label>
 <input type="text" id="id" v-model='id' :disabled="flag">
 <label for="name">
  
 </label>
 <input type="text" id="name" v-model='name'>
 <button @click='handle'> </button>
 </div>
 </div>
 </div>
 <table>
 <thead>
 <tr>
 <th> </th>
 <th> </th>
 <th> </th>
 <th> </th>
 </tr>
 </thead>
 <tbody>
 <tr :key='item.id' v-for='item in books'>
 <td>{{item.id}}</td>
 <td>{{item.name}}</td>
 <td>{{item.date}}</td>
 <td>
 <!--- 
				4.1 修正ボタンにクリックイベントを追加するには、現在のブックIDを渡す。
				このようにして、どの本を修正する必要があるかがわかる。
 				---> 
 <a href="" @click.prevent='toEdit(item.id)'> </a>
 <span>|</span>
 <a href="" @click.prevent> </a>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 <script type="text/javascript">
 /*
 書籍管理 - 書籍を追加する
 */
 var vm = new Vue({
 el: '#app',
 data: {
 flag: false,
 id: '',
 name: '',
 books: [{
 id: 1,
 name: '三国志',
 date: ''
 },{
 id: 2,
 name: ' ',
 date: ''
 },{
 id: 3,
 name: ' ',
 date: ''
 },{
 id: 4,
 name: ' ',
 date: ''
 }]
 },
 methods: {
 handle: function(){
 // 3.4 新しいオブジェクトbook storeを定義して、入力ボックスの本のidと名前を取得する。
 var book = {};
 book.id = this.id;
 book.name = this.name;
 book.date = '';
 // 3.5 配列のバリアントプッシュで本を本に入れる
 this.books.push(book);
 //3.6 入力ボックスをクリアする
 this.id = '';
 this.name = '';
 },
 toEdit: function(id){
 console.log(id)
 //4.2 渡されたidに基づいて、booksの中から該当する本の詳細を調べる
 var book = this.books.filter(function(item){
 return item.id == id;
 });
 console.log(book)
 //4.3 取得した情報をフォームに入力する
 // this.id および this.name 双方向バインディングでフォームにバインドされる データが変更されるとビューが自動的に更新される
 this.id = book[0].id;
 this.name = book[0].name;
 }
 }
 });
 </script>

書籍の修正 - 次へ

• 5.1 主に、現在編集中の書籍のIDが編集状態で変更できないように制御するための識別子を定義します。
• 5.2 属性バインディングによる無効属性のブック番号へのバインディング disabled属性フラグはtrueで、これは無効を意味します。
• 5.3 flagのデフォルトはfalseで、編集モードになっています。 flagをtrueに変更すると、現在のフォームは無効になります。
• 5.4 Addメソッドの再利用 ユーザーがsubmitをクリックしても、フラグがtrueの場合、つまりフォームが入力不可能な状態の場合、ハンドルのロジックは実行されます。 ユーザーはこの時点でデータを編集します。

<div id="app">
 <div class="grid">
 <div>
 <h1>本の管理</h1>
 <div class="book">
 <div>
 <label for="id">
  
 </label>
 <!-- 5.2 disabled属性をtrueフラグでバインドして無効にする>
 <input type="text" id="id" v-model='id' :disabled="flag">
 <label for="name">
  
 </label>
 <input type="text" id="name" v-model='name'>
 <button @click='handle'> </button>
 </div>
 </div>
 </div>
 <table>
 <thead>
 <tr>
 <th> </th>
 <th> </th>
 <th> </th>
 <th> </th>
 </tr>
 </thead>
 <tbody>
 <tr :key='item.id' v-for='item in books'>
 <td>{{item.id}}</td>
 <td>{{item.name}}</td>
 <td>{{item.date}}</td>
 <td>
 <a href="" @click.prevent='toEdit(item.id)'> </a>
 <span>|</span>
 <a href="" @click.prevent> </a>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </div> 
<script type="text/javascript">
 /*書籍管理 - 書籍を追加する*/
 var vm = new Vue({
 el: '#app',
 data: {
 // 5.1 編集状態において、現在編集中のブックのidを変更できないように制御する識別子を定義する。
 // すなわち、編集状態では、現在の書籍数を制御するための入力ボックスは無効になっている。
 flag: false,
 id: '',
 name: '',
 
 },
 methods: {
 handle: function() {
 /*
 5.4 addメソッドを再利用する ユーザがsubmitをクリックしてもハンドル内のロジックは実行される。
 		 フラグがtrueの場合、フォームは入力不可となり、ユーザがデータを編集する。
 */ 
 if (this.flag) {
 // ブックを編集する
 // 5.5 現在のIDに基づいて配列の対応するデータを更新する
 this.books.some((item) => {
 if (item.id == this.id) {
 // アロー関数 thisは親スコープの thisを指す。
 item.name = this.name;
 // 更新操作が完了したら、ループを終了する必要がある
 return true;
 }
 });
 // 5.6 データを編集したら、フォームに入力できる状態にする。
 this.flag = false;
 // 5.7 フラグがfalseの場合、フォームは入力状態にあり、ユーザはデータを追加する。
 } else { 
 var book = {};
 book.id = this.id;
 book.name = this.name;
 book.date = '';
 this.books.push(book);
 // フォームをクリアする
 this.id = '';
 this.name = '';
 }
 // フォームをクリアする
 this.id = '';
 this.name = '';
 },
 toEdit: function(id) {
 /*
 5.3 flag デフォルト値はfalseで、これは編集状態であることを意味し、このフラグをtrue、つまりフォームが無効であることに変更する必要がある。
 */ 
 this.flag = true;
 console.log(id)
 var book = this.books.filter(function(item) {
 return item.id == id;
 });
 console.log(book)
 this.id = book[0].id;
 this.name = book[0].name;
 }
 }
 });
 </script>

書籍の削除

• 6.1 削除ボタンへのイベントの追加 削除するブックのidを渡します。
• 6.2 idによる配列からの要素のインデックスの検索
• 6.3 インデックスによる配列要素の削除

 <tbody>
 <tr :key='item.id' v-for='item in books'>
 <td>{{item.id}}</td>
 <td>{{item.name}}</td>
 <td>{{item.date}}</td>
 <td>
 <a href="" @click.prevent='toEdit(item.id)'> </a>
 <span>|</span>
 <!-- 6.1 削除ボタンに、削除するブックのidを渡すイベントを追加する--。> 
 <a href="" @click.prevent='deleteBook(item.id)'> </a>
 </td>
 </tr>
</tbody>
 <script type="text/javascript">
 /*
 書籍管理 - 書籍を追加する
 */
 var vm = new Vue({
 methods: {
 deleteBook: function(id){
 // 書籍を削除する
 #// 6.2 配列の要素のインデックスをidで求める
 // var index = this.books.findIndex(function(item){
 // return item.id == id;
 // });
 #// 6.3 インデックスで配列要素を削除する
 // this.books.splice(index, 1);
 // -------------------------
 #// 方法2: フィルタメソッドで削除する
		
 # 6.4 filterメソッドに従って、削除する本のidでないidをフィルタリングする。
 # フィルタは元のデータを変更しない置換配列なので、削除しない本のidをbooksに代入する必要がある。
 this.books = this.books.filter(function(item){
 return item.id != id;
 });
 }
 }
 });
 </script>

共通機能の適用シナリオ

フィルタ

• Vue.filter グローバルフィルタの定義

 <tr :key='item.id' v-for='item in books'>
 <td>{{item.id}}</td>
 <td>{{item.name}}</td>
 		<!-- 1.3 フィルタを呼び出す>
 <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
 <td>
 <a href="" @click.prevent='toEdit(item.id)'> </a>
 <span>|</span>
 <a href="" @click.prevent='deleteBook(item.id)'> </a>
 </td>
</tr>
<script>
 	#1.1 Vue.filter グローバルフィルタを定義する
	 Vue.filter('format', function(value, arg) {
 function dateFormat(date, format) {
 if (typeof date === "string") {
 var mts = date.match(/(\/Date\((\d+)\)\/)/);
 if (mts && mts.length >= 3) {
 date = parseInt(mts[2]);
 }
 }
 date = new Date(date);
 if (!date || date.toUTCString() == "Invalid Date") {
 return "";
 }
 var map = {
 "M": date.getMonth() + 1, // 
 "d": date.getDate(), // 
 "h": date.getHours(), // 
 "m": date.getMinutes(), // 
 "s": date.getSeconds(), // 
 "q": Math.floor((date.getMonth() + 3) / 3), // 
 "S": date.getMilliseconds() // 
 };
 format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
 var v = map[t];
 if (v !== undefined) {
 if (all.length > 1) {
 v = '0' + v;
 v = v.substr(v.length - 2);
 }
 return v;
 } else if (t === 'y') {
 return (date.getFullYear() + '').substr(4 - all.length);
 }
 return all;
 });
 return format;
 }
 return dateFormat(value, arg);
 })
#1.2 提供されるデータには、ミリ秒単位のタイムスタンプが含まれる。
 [{
 id: 1,
 name: '三国志',
 date: 000
 },{
 id: 2,
 name: ' ',
 date: 000
 },{
 id: 3,
 name: ' ',
 date: 000
 },{
 id: 4,
 name: ' ',
 date: 000
 }];
</script>

カスタムディレクティブ

• フォームが自動的にフォーカスされるようにします
• 総冊数は、Vue.Directiveで指定された計算配列の長さです。.directive カスタム仕様

<!-- 2.2 v-customプロパティ名でカスタムディレクティブを呼び出す--。>
<input type="text" id="id" v-model='id' :disabled="flag" v-focus>
<script>
 # 2.1 総冊数は、Vue.Directiveで指定された計算配列の長さである。.directive カスタム仕様
	Vue.directive('focus', {
 inserted: function (el) {
 el.focus();
 }
 });
</script>

計算プロパティ

• 計算プロパティによる総冊数の計算
  • 総冊数は計算配列の長さです。

 <div class="total">
 <span>本の総数</span>
 	<!-- 3.2 ページに表示する>
 <span>{{total}}</span>
</div>
 <script type="text/javascript">
 /*
 計算プロパティとメソッドの違い:計算されたプロパティは依存関係に基づいてキャッシュされるが、メソッドはキャッシュされない
 */
 var vm = new Vue({
 data: {
 flag: false,
 submitFlag: false,
 id: '',
 name: '',
 books: []
 },
 computed: {
 total: function(){
 // 3.1 総冊数を計算する
 return this.books.length;
 }
 },
 });
 </script>