フロントエンドのvue基礎学習2日目

7045 ワード
先端
四.フィルタ
コンセプト:Vue.jsでは、フィルタをカスタマイズできます.一般的なテキストフォーマットとして使用できます.フィルタは、mustache補間とv-bind式の2つの場所で使用できます.フィルタはJavaScript式の末尾に追加され、「パイプ」記号で示されます.
1.プライベートフィルタ
1.基本フォーマット
(1)プライベートフィルタの定義
プライベートローカルフィルタは、現在のVMオブジェクトが制御するView領域でのみ使用できます.
vm 2でフィルタを定義する場合、sが加算されますが、配列ではなくオブジェクトです.
var vm2 = new Vue({
      el: '#app2',
      data: {
        dt: new Date()
      },
      methods: {},
      //       ：         【            】
      filters: {      
        dateFormat: function (dateStr, pattern = '') {}     
    })

(2)プライベートフィルタの呼び出し
フィルタ呼び出しの場合は,近接原則を採用し,プライベートフィルタとグローバルフィルタ名が一致した場合,プライベートフィルタを優先的に呼び出す.
{{item.ctime | dataFormat('yyyy-mm-dd')}}

2.グローバルフィルタ
1.フィルターの基本使用
(1)jsでグローバルフィルタを定義する
グローバルフィルタとは、すべてのVMインスタンスが共有される
Vue.filter('      ', function (msg) {}


      function ，     ，       ，                      
Vue.filter('      ', function (data) {
      return data + '123'
    })

(2)呼び出しフィルタ
              {{ name |        }} 


{{ msg | dateFormat}}

2.フィルターはパラメータ伝達も可能
フィルタの最初のパラメータは呼び出しフィルタの最初の値を取得し、他にも複数のパラメータを渡すことができます.
（1）       
Vue.filter('dataFormat', function (item.ctime,arg ) {}

（2）     


{{ item.ctime | dateFormat("  ")}}

3.フィルタを複数回呼び出すことができる
（1）     

Vue.filter('dataFormat', function (msg,arg ) {}
Vue.filter('text', function (msg) {}

（2）     


{{msg | dateFormat("  ")| text}}

4.応用
(1)グローバルフィルタの定義
Es 6の知識点を補充する
ES 6の文字列の新しい方法String.prototype.padStart(maxLength, fillString='')またはString.prototype.padEnd(maxLength, fillString='')を使用して文字列を埋め込む.
つまり、1秒2秒、1分2分と現れると、自動的に0が加算されます
Vue.filter('dataFormat', function (input, pattern = '') {
//           pattern=""         ，    
  var dt = new Date(input);
  //      
  var y = dt.getFullYear();
  var m = (dt.getMonth() + 1).toString().padStart(2, '0');
  var d = dt.getDate().toString().padStart(2, '0');

  //              ，      ，   yyyy-mm-dd，       - - 
  //   ，      - -   ： ： 
  if (pattern.toLowerCase() === 'yyyy-mm-dd') {
  //        
    return `${y}-${m}-${d}`;
  } else {
    //      
    var hh = dt.getHours().toString().padStart(2, '0');
    var mm = dt.getMinutes().toString().padStart(2, '0');
    var ss = dt.getSeconds().toString().padStart(2, '0');
    //    
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
  }

});

(2)呼び出しフィルタ
 {{ item.ctime | dateFormat() }}

      dateFormat()，    pattern = ''，  ES6

五.キー修飾子
1.既存のキー修飾子の使用

必要に応じて古いブラウザをサポートするために、Vueはほとんどの一般的なキーコードの別名を提供します.
  • .enter
  • .tab
  • .delete(「削除」キーと「バックアウト」キーをキャプチャ)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

    • 2.カスタムキー修飾子
    (1)基礎
    一部のボタンが定義されていない場合は、その数字コードを直接使用できます.
    
//enter=13

    (2)ステップアップ
    しかし、数字は覚えにくいので、カスタマイズすることができます.つまり、名前をつけることができます.
  • Vue.config.keyCodes. = を介して案件修飾子を定義する別名:
    • Vue.config.keyCodes.f2 = 113;
  • カスタムキー修飾子を使用する:
    •

    六.カスタムコマンド
    1.カスタムグローバルコマンド
    js動作に関係するものは、insertedで実行することが望ましい.スタイルに関係するものはbindで実行するのが望ましい
    パラメータ1:命令の名前、注意、定義する時、命令の名前の前で、v-接頭辞をプラスする必要はありませんが、:呼び出す時、命令の名前の前でv-接頭辞をプラスして呼び出す必要があります
    パラメータ2:オブジェクトです.このオブジェクトには、特定の段階で関連する操作を実行できる命令関連の関数があります.
    2.フック関数
    (1)命令定義オブジェクトには、次のようなフック関数があります(いずれもオプション).
  • bind:1回のみ呼び出され、命令が要素に最初にバインドされたときに呼び出されます.ここでは、一度に初期化設定を行うことができます.
  • inserted:バインドされた要素が親ノードに挿入されたときに呼び出されます(親ノードが存在することを保証しますが、必ずしもドキュメントに挿入されているわけではありません).
  • update:コンポーネントのVNode更新時に呼び出されますが、サブVNode更新の前に発生する可能性があります.命令の値が変わったかもしれないし、なかったかもしれない.ただし、更新前後の値を比較することで、不要なテンプレート更新
    • を無視することができます.
    (2)命令フック関数は次のパラメータに入力されます.
  • el:DOMを直接操作するために使用できる命令にバインドされた要素.
  • binding
    :次の属性を持つオブジェクト.
  • name:v-プレフィックスを含まない命令名.
  • value:命令のバインド値、例えば、v-my-directive="1 + 1"のうち、バインド値は2である.
  • oldValue:命令バインディングの前の値で、updateおよびcomponentUpdatedフックでのみ使用できます.値が変更されるかどうかにかかわらず使用できます.
  • expression:文字列形式の命令式.例えばv-my-directive="1 + 1"において、式は"1 + 1"である.
  • arg:命令に伝達されるパラメータ.オプション.例えばv-my-directive:fooでは、パラメータは"foo"である.
  • modifiers:修飾子を含むオブジェクト.たとえば、v-my-directive.foo.barでは、修飾子オブジェクトは{ foo: true, bar: true }です.

  • vnode:Vueコンパイル生成された仮想ノード.詳細については、VNode APIを参照してください.
  • oldVnode:前の仮想ノードは、updateおよびcomponentUpdatedフックでのみ使用できます.
    •  Vue.directive('focus', { 
 
 
      bind: function (el) {
  【              ，        bind   ，     
     ：        ，     ，    el ，              ，   el   ，      JS  
                 ，        DOM  ，   ，   focus       
      ，    ，    DOM  ，      】
  el.focus()
      },
      

      inserted: function (el) {  
//inserted         DOM    ，    inserted   【  1 】
        el.focus()
        
// JS       ，    inserted     ，   JS     
      },
      
       
      updated: function (el) {  
      //  VNode     ，    updated，        

      }
    })

    2.グローバル命令の適用
    (1)カスタムグローバル命令
       
   //         v-focus，            ：
    Vue.directive('focus', {
      inserted: function (el) { // inserted                
                   ，        bind   ，     
        ：        ，     ，    el ，              ，   el   ，      JS  
        //              ，        DOM  ，   ，   focus       
        //    ，    ，    DOM  ，      
        // el.focus()
        el.focus();
      }
    });


    //         v-color   v-font-weight，                      ：
      directives: {
        color: { //             
          bind(el, binding) {
            el.style.color = binding.value;
          }
        },
        'font-weight': function (el, binding2) { //           ，       bind   update       
          el.style.fontWeight = binding2.value;
        }
      }

    (2)カスタム命令の使用方法:
    部分g++(gcc)オプション
    vue ssrはwindow._を削除する方法INITIAL_STATE__ ちゅうにゅう