Vueの研究ノート（3） - ブランドマネジメントシステム

技術のポイント

フック関数
カスタムコマンド
カスタムフィルタ
計算されたプロパティ
リスナーのプロパティ

カスタムコマンド

なぜ私は、カスタムコマンドが必要なのでしょうか？

コードの再利用性と柔軟性にために。

命令カテゴリ：

グローバルディレクティブ：

外部作成例指示VMで、
Vue.directiveによって作成されました。

ローカル命令：サプリメント後

カスタム命令を定義するには？（割り当てなし）

Vue.directive（コマンド名、{挿入（EL、結合）{}}）

どのようにカスタム命令を使用するには？（割り当てなし）

V-コマンド名

値を定義する方法の説明では？

Vue.directive（名称、{挿入（EL、結合）{binding.value}}）

命令の使い方割り当てる必要が？

V-命令名=「値」

VUEのライフサイクル全体でのフック関数を持っています

フック関数を搭載し、それが独立した構造であり、メソッドのプロパティを記述しないでください
機能をフック：この関数は、自動的にシーンをトリガします

VUEは、面倒な操作DOMから私たちを解放することができることですので、ドムは、要素を取得するためにネイティブな方法を使用することはお勧めしません。

REFでマークVUE要素（参照）

REF =「ラベル値」
ID機能は、以前の設定に似ています
このことにより、値を取得します。$参考文献

上記の実装が、が、1つ大きな欠点があります：あなたが変更の要素のフォーカスを取得する必要があり、およびテンプレートコードと取り付けられたフック関数のコードを変更する必要があることを暗示している場合 - 不便で無理があります。私はこの効果を達成するために願っています：私は、要素のゲインフォーカス機能（機能）を可能にするものを作った、要素はコールのフォーカスを取得する必要がある場合、それは存在していないそうでないとき - この事は、命令です。

手順は：特定の機能を実現することができ、ユーザーが使用することを選択することができます

何がグローバルカスタム命令です：VUEの例以外で作成された命令

グローバルカスタムコマンドを作成する方法

Vue.directive（名前、{挿入フック関数}）

挿入されたフック関数：追加指示要素で親ノードにインサートをトリガ - ホワイトツリー生成DOMその

Vue.directive（「フォーカス」、{
     // EL：この要素を追加することは、現在の命令であり、ELは直接操作に使用することができるDOMは、     
    {（EL、バインディング、vノード）に挿入
         // 我々は、フォーカス要素を取得および設定する必要
        はconsole.logを（EL）
        el.focus（）
    } 
}）

新たな需要：我々はユーザーの好みに応じてテキストの色を変更する必要があります

指令によって実装

Vue.directiveによって（名前、{挿入（EL、結合）{}}）

命令を使用した：V-名=「値」

// カスタムコマンドの色設定 
Vue.directive（「setColorを」、{
     // この命令現在使用要素：EL 
    // バインディング：これは、プロパティ値を持つオブジェクトであるが、命令の現在値は、結合しています
    挿入（EL、バインディング）{ 
        にconsole.log（結合）
        el.style.color = binding.value 
    } 
}）

詳細：

詳細を名前付き：特定のコマンドに名前を付けることは小文字であるとき、それは推奨されます

更新フック関数データやテンプレートを処理する際に、コンテンツの変更が自動的にトリガ

// ページリフレッシュコマンドの値の変化を監視し、更新を追加
{（ELバインディング）を更新
    （EL）にはconsole.logに
    はconsole.log（結合）
    el.style.color = binding.value 
}

フィルタ

役割：受信データ処理は、合理的な結果を返します

種：

グローバルフィルタ：（外側）の前に、VM例フィルタ作成
ローカルフィルタ：内部で作成されたフィルタアセンブリ

どのように定義すること

Vue.filter（名称、機能）

ディテール

フィルタは、データオブジェクトがパラメータを受け取るデフォルト設定されます、このパラメータは、現在のコール・フィルタであり、
手動でパラメータを渡すと、それが直接にデフォルトパラメータを受信した後、新しいパラメータを追加するためのフィルタを意味し、渡されたデフォルトのパラメータに影響することはありません
フィルタが結果を返さなければならないので、機能フィルタは、リターンを書く「しなければなりません」

どのように呼び出すには？

パイプ記号を通して|
フォーマット：フィルタデータを呼び出す必要があり|フィルタ名

// 添加全局的自定义过滤器 
Vue.filter（ 'timeForamt'、（日付、seperator1）=> {
     // VAR日=新しいDate（）; 
    // するvar seperator1 = "/"; 
    するvar年= date.getFullYear （）;
     VARの月= date.getMonth（）+ 1 ;
     VAR strDate = date.getDate（）;
     場合（月> = 1 &&月<= 9 ）{ 
        月 = "0" + 月; 
    } 
    もし（strDate> = 0 && strDate <= 9 ）{ 
        strDate = "0" + strDate。
    } 
    のvar CURRENTDATE =年+ seperator1 +月+ seperator1 +strDate;
    リターンCURRENTDATE。
}）

計算されたプロパティ

計算の性質は何である：それは、複雑なビジネスロジックをカプセル化することができますオブジェクトのプロパティです - 方法

あなたの関数は、プロパティの計算で定義されていますが、通常のプロパティのように使用することができ、プロパティを計算するために使用したいです
プロパティである関数の内部では、それはそれ以外の場合はエラー、機能の仕方によって呼び出すことはできません

どのような計算されたプロパティを使用してシーン：あなたのテンプレートのビジネスをより複雑にしますが、プロパティカプセル化を計算するために使用することができたときに

ときに計算された属性に依存するデータの変更、計算された属性がトリガされます
いわゆる依存データは、これに依存するのメンバーを指し、

これは、従来の方法とは異なります

あなたがこの方法を使用してキャッシュメカニズムのない一般的な方法はありませんが、限り、それは次のようになりますメソッドを実行する呼び出す必要があります
基本的な計算は限り依存性は値が変化しないことを意味する、依存属性のキャッシングでは、再計算財産呼び出すことはありませんが、計算の結果、一度 - 効率を改善するために、

プロパティの実装を計算するために、検索機能を使用します

計算：{ 
    検索（）{ 
        // ユーザキーワードの変化を監視するが、ユーザ入力が変更され、それが再探索する必要がある
        // 計算属性機能は、一般的に、計算結果を返す
        // VAR = []結果
        // ため（VARのI = 0;私は<this.brandList.length、私は++）{ 
        //      //説明は、このオブジェクトの値の名前は、私は記録の1を探しているキーワードが含ま
        //      //あなたはのいずれかを入力しない場合をキーワード、this.userKeyデフォルトは""です
        //      IF（this.brandList [I] .name.indexOf（this.userKey）！= -1）{ 
        //          result.push（this.brandList [I]）
        / /      } 
        // } 
        // 結果を返す
        // 値をアレイから除去されるたびに、コールバック関数値に渡されたパラメータ
        // コールバックの値の条件が検出された場合、その値は、の値となる決定します内部的に作成されたフィルタ方法ARR一時的な配列に格納され、最後には、この配列arrを返します
        //foreachマップフィルタが
        戻り 、この（（値）=> .brandList.filterを{
             戻り value.name.indexOf（この .userKeyを）！= -1 
        }）
    } 
}

リスナーのプロパティ - リスナー

コンピューティングの属性の欠如があります：非同期操作の結果を応答しません。データの変更は、あなたが見て使用する必要があるときには、非同期操作をリッスンする必要がある場合

追加するリスナーを鑑賞する方法

これは、リスナーのプロパティです
メソッド名の内部で自由であり、あなたは正確に同じ属性名をリスニングする必要がないことができます

ウォッチ：{
     // メソッド名は、メンバーである必要があり、一貫性のある内の名前データをリッスンしたい
    まず（newValueに、OLDVALUE）{ 
        のsetTimeout（（） => { 
            にconsole.log（newValueに、OLDVALUE）
            この .fullname = newValueに。 TRIM（）は、toUpperCase（）+ "：" + この.second 
        }、 100 ）; 
    }、
        SECOND（newValueに、OLDVALUE）{ 
            にconsole.log（newValueに、OLDVALUE）
        } 
}

リスニングの深さを実現するために、リスナーを鑑賞する方法

モニタリングの深さは何ではありません。もはやこれの直接のメンバーである、表面は、このメンバーの一員であります

2つの実装

ハンドラ+深いです
'オブジェクト属性'（）{}

OBJ：{
     // ハンドラを介して機能を聴取
    ハンドラ（NV、OV）{ 
        にconsole.log（nv.name、nv.age）
    } 
    // 設定奥行きリスナー 
    ディープ：trueには
} 
// 指定されたメンバを聴きます変動値 
'obj.name' （NV）{ 
    にconsole.log（NV）
}

リスナーを使用する場合は？

データが非同期動作モードに関連する場合、リスナーを使用することが必要です

ブランド管理システムエフェクト

コード住所：https://github.com/C4az6/Vue_study