一、混入
 
二、カスタム命令
コア機能のデフォルト内蔵命令(v-modelとv-show)に加えて、Vueはカスタム命令の登録を許可します.Vue 2.0では、コード多重化と抽象化の主な形式はコンポーネントですが、通常のDOM要素を最下位に操作する必要がある場合もあります.この場合、カスタムコマンドが使用されます.ページがロードされると、入力ボックスはフォーカスされます.このページを開いた後も何もクリックしていない限り、この入力ボックスはフォーカス状態にある必要があります.

//        ，     DOM  ，  vue    
document.getElementById('search').focus();

命令の名前:定義時、命令の名前にv-接頭辞を付ける必要はありません.呼び出すときは、v接頭辞を付ける必要があります.
オブジェクト:特定のフェーズで関連する操作を実行する命令関連関数を含む.
グローバルカスタムコマンドを登録します.

Vue.directive('focus',{
  //           DOM  
  inserted:function(el){
    //     ，        DOM  ，      
    el.focus()
  }
})

ローカルコマンドを登録し、コンポーネントにdirectivesのオプションを受け入れます.

directives:{
  focus:{
    inserted:function(el){
      el.focus()
    }
  }
}

次に、テンプレート内の任意の要素で新しいv-focusプロパティを使用できます.

1、フック関数
1つの命令定義オブジェクトには、次のフック関数があります(いずれもオプション).
bind:一度だけ呼び出され、命令が要素に最初にバインドされたときに呼び出されます.ここでは、ページに挿入されているかどうかにかかわらず、命令によって要素にバインドされている限り、スタイルをバインドするなど、一度に初期化することができます.
inserted:一度だけ呼び出され、バインドされた要素が親ノード(DOMツリー)に挿入されたときに呼び出されます(親ノードが存在することを保証しますが、ドキュメントに挿入されているとは限りません).JSの動作に関連する操作をバインドし、JSの動作が有効にならないようにします.
update:コンポーネントのVNode更新時に呼び出される複数回呼び出される場合がありますが、サブVNode更新の前に発生する場合があります.命令の値が変わったかもしれないし、なかったかもしれない.しかし、更新前後の値を比較することで、不要なテンプレート更新を無視することができます.
componentUpdated:コマンドが存在するコンポーネントのVNodeとそのサブVNodeがすべて更新された後に呼び出されます.
unbind:一度だけ呼び出され、命令が要素にバインドされていない場合に呼び出されます.
2、フック関数のパラメータ
el:コマンドにバインドされた要素は、元のJSオブジェクトであり、DOMを直接操作することができます.
binding:名前:v接頭辞を含まない命令名を含むオブジェクト.value:v-my-directive="1+1"などの命令のバインド値.バインド値は2です.expression:v-my-directive="1+1"などの値をバインドする文字列形式で、式は1+1です.oldValue:コマンドバインドの前の値は、updateとcomponentUpdatedフックでのみ使用できます.値が変更されるかどうかにかかわらず使用できます.arg:v-my-directive:fooなどの命令を伝達するパラメータで、パラメータはfooです.modifiers:v-my-directive:foo.barでは、修飾子オブジェクトは{foo:true,bar:true}です.
vnode:Vueは生成された仮想ノードをコンパイルします.
oldVnode:前の仮想ノード、updateとcomponentUpdatedフックでのみ使用可能
el以外のパラメータは読み取り専用で、変更しないでください.フック間でデータを共有する必要がある場合は、要素のdatasetで行うことをお勧めします.
3、関数の略記
カスタム命令の簡略化形式はbindとupdateの2つのフック関数を定義し、他のフックに関心を持たないことに等しい.

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

三、レンダリング関数&JSX
render関数は、Vueページでレンダリングするhtml構造を示す仮想ノード(Virtual Node)を返します.結果を返すとelで指定したコンテナが置き換えられます.コンポーネントツリー内のすべてのVNodesは一意でなければなりません.
createElementは次のような関数です.
パラメータ1:必須、{String|Object|Function}、HTMLラベル文字列、コンポーネントオプションオブジェクト、または上記のいずれかのasync非同期関数を解析します.
パラメータ2:オプション、{Object}テンプレート関連属性を含むデータオブジェクトで、templateでこれらの特性を使用できます.
パラメータ3:オプション、{String|Array}、サブ仮想ノード、createElement()または文字列から構成されます.

var login={
  template:'
    
'
}

var vm=new Vue({
  el:'#app',
  render:function(createElement){
    return createElement(login)
  }
});

五、フィルター
Vue.jsでは、フィルタをカスタマイズできます.一般的なテキストフォーマットで使用できます.フィルタは、2つの場所で使用できます.カッコ補間とv-bind式(後者は2.1.0+からサポートされます).フィルタはJavaScript式の末尾に追加され、「パイプ」記号で示されます.フィルタ呼び出し時のフォーマット:

{{ message |        }}

过滤器的定义语法：

（1）在一个组件的选项中定义本地的过滤器

filters:{
       :function(data){
    return data+'123';
  }
}

(2)Vueインスタンスを作成する前にグローバルフィルタを定義し、すべてのvmインスタンスを共有する

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

var vm=new Vue({
  // ...
});

{message|filterA|filterB}}フィルタは直列に接続でき、フィルタ関数は式の値(前の操作チェーンの結果)を最初のパラメータとして受信します.
{message|filtera('data',arg 1,arg 2)}}フィルタには複数のパラメータがあり、最初のパラメータはフィルタパイプシンボルの前から伝達されたデータである.

  

    
{{msg | filterA('  ','  ') | filterB}}
  
  
    Vue.filter('filterA',function(msg,arg1,arg2){
      return msg.replace(/  /g,arg1+arg2);
    });

    Vue.filter('filterB',function(msg){
      return '===='+msg+'====';
    })
    
    var vm=new Vue({
      el:'#app',
      data:{
        msg:'   ，   !       ，   !?      ，    !?'
      },
      filters:{
        filterA:function(msg,arg1,arg2){
          return msg.replace(/  /g,arg1+arg2);
        }
      }
    });
  

ローカルとグローバルの2つの名前が同じフィルタがある場合、ローカルフィルタがグローバルフィルタよりも優先されるという近接原則で呼び出されます.