Vueのフィルターとディレクティブの詳細な説明

<!-- 二重中括弧内 -->
{{ メッセージ | 大文字 }}

<!-- `v-bind` 内 -->
<div v-bind:id="rawId | formatId"></div>

Vue.filter('capitalize', function(msg){// msgは固定パラメータで、フィルタリングする必要があるデータです。if (!value) return ''
            値 = value.toString()
            戻り値.charAt(0).toUpperCase() + value.slice(1)
       })

 <div id="アプリ">
            <p>{{ msg | msgFormat('クレイジー','--')}}</p>
        </div>

        <スクリプト>
            // msgFormat という名前の Vue グローバル フィルターを定義します
            Vue.filter('msgFormat', 関数(msg, arg, arg2) {
                // 文字列置換メソッドでは、最初のパラメータに文字列を書き込むだけでなく、通常の戻り値も定義できます msg.replace(/simple/g, arg+arg2)
            })
      </スクリプト>

 // Vueインスタンスを作成し、ViewModelを取得します
            var vm = 新しい Vue({
                el: '#app',
                データ： {
                    メッセージ: 'メッセージ'
                },
                メソッド: {},
                //プライベートローカルフィルターを定義します。フィルターは現在のvueオブジェクトでのみ使用できます: {
                    データフォーマット(メッセージ) {
                        メッセージ+'xxxxx'を返します。
                    }
                }
            });

Vue.directive('focus', {
  // バインドされた要素が DOM に挿入されると...
  挿入: 関数 (el) {
    // フォーカス要素 el.setAttribute('placeholder', 'これはカスタム命令によって追加されます')
    el.フォーカス()
  }
})

ディレクティブ: {
  集中：
    // 挿入された命令の定義: function (el) {
      el.フォーカス()
    }
  }
}

//カスタムディレクティブ Vue.directive('focus', {
  バインド: 関数 (el, バインディング, vnode) {
    コンソールログ("1")
  },
  挿入: 関数 (el, バインディング, vnode) {
    コンソールログ("2");
  },
  更新: 関数 (el, バインディング, vnode, oldVnode) {
    コンソールログ("3");
  },
  コンポーネント更新: 関数 (el、バインディング、vnode、oldVnode) {
    コンソールログ('4');
  },
  アンバインド: 関数 (el, バインディング, vnode) {
    コンソールログ('5');
  }
})