comando personalizado Vue_

Instruções sobre como se inscrever

Como registrar um comando personalizado mundial

//注册一个全局自定义指令 `v-foucs`
Vue.directive("focus",{
    //当被绑定的元素插入到DOM中时：
    inserted:function(el){
    //聚焦元素
    el.focus()
    }
})

Como registrar uma instrução locais

directives:{
    focus:{
        //指令的定义
        inserted:function(el){
            el.focus()
        }
    }
}

As instruções acima pode ser chamada foco v usados:

<input v-focus>

função de gancho

ligar

Chamado apenas uma vez, pela primeira vez, está ligada ao elemento da chamada de comando. Aqui você pode configurar uma inicialização de uma só vez.

inserido

Chamado, quando o nó pai é inserido no elemento de ligação (para garantir que apenas a presença do nó pai, mas não tem necessariamente de ser inserido no documento).

atualizar

Chamado quando atualização vnode onde os componentes, mas pode ocorrer antes seus filhos atualização vnode. O valor da instrução pode ser alterado ou não. Mas você pode ignorar atualização modelo desnecessária comparando os valores antes e depois da atualização (os parâmetros da função gancho detalhado abaixo).

componentUpdated

Vnode sua sub vnode onde as instruções de montagem são todos chamados após a atualização.

unbind

Chamado apenas uma vez, quando a solução de instrução de chamada e elemento empate.

parâmetros da função gancho

o

elementos de instrução Vinculadas, pode ser usado para operar diretamente DOM.

obrigatório

Um objecto contendo as seguintes propriedades:

• nome

nome do comando, não inclua v- prefixo.

• valor

instruções valor limite, tais como: v-meu-directiva = "1 + 1", o valor de ligação de 2.

• oldValue

Antes de um valor de comando ligado, e só está disponível nos ganchos de atualização componentUpdated. Independentemente de saber se a alteração do valor estão disponíveis.

• expressão

expressão de cadeia Instrução. Por exemplo, v-meu-directiva = "1 + 1", a expressão "1 + 1"

• arg

Parâmetros passados ​​para a instrução, opcional. Por exemplo, v-meu-directiva: foo, o parâmetro de "foo".

• modificadores

Um objecto que contém modificador. Por exemplo: v-my-directive.foo.bar, o objeto modificador {foo: true, bar: true}.

vnode

compilador Vue gerado nó virtual.

oldVnode

Um nó virtual, disponível apenas nos ganchos de atualização e componentUpdated.

Parâmetro Command dinâmica

Parâmetro da instrução pode ser dinâmica. Por exemplo, o v-mydirective: [argumento] = "valor" em, parâmetros de argumento pode ser atualizado de acordo com os dados instância do componente! Isto permite a flexibilidade de personalizar as instruções podem ser usados ​​na aplicação.

amostra gancho personalização

<input type="text" v-color="'red'" v-fontWeight="'90'" v-fontsize="'60'">
<script>
    var vm=new Vue({
        el:"#app",
        data:{},
        methods:{},
        filters:{},
        directives:{
            'color':{
                bind:function(el,binding){
                    el.style.color=binding.value;
                    console.log(binding.value);//red
                    console.log(binding.expression);//'red'
                }
            },
            'fontweight':{
                bind:function(el,binding){
                    el.style.fontWeight=binding.value;
                }
            },
            'fintsize':{
                bind:function(el,binding){
                    el.style.fontSize=parseInt(binding.value)+'px';
                }
            }
        }
    });
</script>