Vueの共通機能

基本的なフォーム操作

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

  • vモデルによって

   	<!-- 
  		12つのチェックボックスは、v-modelを介して同時に値にバインドされる必要がある。
   2各ラジオボックスはvalue属性を持たなければならず、値は同じであってはならない。
  		3Vモデルはラジオボックスがチェックされたときの現在値をデータの値に変更する。
  		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モデルによって
  • ラジオボックスの値の取得と同じ
  • チェックボックスのようなチェックボックスを組み合わせる場合、趣味のデータは配列として定義する必要があります。

  	<!-- 
  		1チェックボックスは、同様にv-modelを介して値に双方向にバインドされる必要がある。
   2各チェックボックスはvalue属性を持たなければならず、値は同じであってはならない。
  		3Vモデルは、ラジオボックスがチェックされたときの現在値をデータの値に変更する。
  		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モデルによって

   <div>
   <span> </span>
   <!--
  			1selectプロパティはv-modelを介して両方向の値にバインドされる必要がある。
   2各オプションはvalue属性を持たなければならず、同じ値を持ってはならない。
  		 3オプションが選択されると、vモデルは現在の値をデータの値に変更する。
  		 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('focusA',function(){}) 
// 2HTMLで使用する場合、v-focus-aでのみ使用できる。
 
// グローバルカスタムコマンドv-focusを登録する
Vue.directive('focus', {
 	// バインドされた要素がDOMに挿入されるとき。 ここで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 カスタム関数のフォーム参照 カスタムプロパティを通して渡される値 存在バインディング.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オプションで定義する必要があるローカルディレクティブ。
 directives: {
 color: {
 bind: function(el, binding){
 el.style.backgroundColor = binding.value.color;
 }
 },
 focus: {
 inserted: function(el) {
 el.focus();
 }
 }
 }
 });
 </script>

計算されたプロパティは

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

 <div id="app">
 <!-- 
 reverseStringが複数回呼び出された場合
 中のnumの値が変わらない限り、最初の計算結果をそのまま返す。
		dataのnumの値が変更されるまで、計算は再実行されない。
 -->
 <div>{{reverseString}}</div>
 <div>{{reverseString}}</div>
 <!-- methodsのメソッドが呼び出されると、そのたびにまた呼び出される--。>
 <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の値が変化したときに自動的にwatchを起動する。
 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: {
 // upper カスタムフィルタ名
 // upper は引数を1つ取るフィルター関数として定義され、式msgの値が関数の引数として渡される。
 upper: function(val) {
 // フィルタを使用する際に外部が結果を取得できるように、フィルタには戻り値がなければならない。
 return val.charAt(0).toUpperCase() + val.slice(1);
 }
 }
 });
 </script>

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

 <div id="box">
 <!--
			filterA は3つの引数をとるフィルター関数として定義される。
 			ここで、メッセージの値は最初のパラメータである，
			通常の文字列'arg1' を第2引数に、式arg2の値を第3引数に取る。
		-->
 {{ 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入力ボックスの入力のidは双方向バインディングによって得られる。>
 <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 配列の突然変異メソッドpushを使ってブックをブックに入れる。
 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 modifyボタンにクリックイベントを追加し、現在のブック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 配列の突然変異メソッドpushを使って本を本に入れる。
 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 属性によるブック番号のバインディング 属性フラグがtrueの場合、バインディングは無効になります。
• 5.3フラグのデフォルトはfalseで、編集モードです。 フラグを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 属性によるバインド disable属性に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 削除するブックのidでないidをfilterメソッドでフィルタリングする。
 # フィルタは元のデータを変更しない置換配列なので、削除しないブックの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 カスタム指定

<!-- 2.2 v-カスタムプロパティ名でカスタムコマンドを呼び出す。>
<input type="text" id="id" v-model='id' :disabled="flag" v-focus>
<script>
 # 2.1 ブックのライフサイクルは、Vueの.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>