Base
Além das diretivas internas, o Vue.js também permite o registro de diretrizes personalizadas. As diretrizes personalizadas fornecem um mecanismo para mapear alterações nos dados no comportamento DOM.
Uma diretiva personalizada global pode ser registrada usando o método Vue.Directive (ID, Definition), que recebe dois IDs de instrução de parâmetros e objetos de definição. Você também pode registrar uma diretiva personalizada local usando a opção Diretivas do componente.
Função de gancho
Definir um objeto pode fornecer várias funções de gancho (todas opcionais):
• Vincular: chamado apenas uma vez e é chamado quando a instrução está vinculada ao elemento pela primeira vez.
• Atualização: a primeira chamada é chamada imediatamente após a ligação com o valor inicial como o parâmetro e, sempre que o valor limitado muda, os parâmetros são o novo valor e o valor antigo.
• Unbind: chamado apenas uma vez, quando a instrução não é realizada no elemento.
Exemplo
Vue.directive ('my-Directive', {bind: function () {// trabalho de preparação // por exemplo, adicionando um processador de eventos ou uma tarefa de alto consumo que só precisa ser executada uma vez}, atualizar: function (newValue, antigo) {// funcionar quando o valor é atualizado // também será chamado de que é chamado {o parâmetro) {/m parâmetros {///n) {//n) {/s), que é atualizado, que também é chamado (newValue, o parâmetro {// //. ouvinte de eventos adicionado por bind ()}})Após o registro, você pode usá-lo assim no modelo Vue.js (lembre-se de adicionar o prefixo V-):
<div v-my-Direction = "algumValue"> </div>
Quando apenas a função de atualização é necessária, você pode passar em uma função em vez do objeto de definição:
Vue.Directive ('My-Directive', function (value) {// Esta função é usada como atualização ()})Propriedades da instância diretiva
Todas as funções do gancho serão copiadas para o objeto diretivo real, e isso dentro do gancho aponta para esse objeto diretivo. Este objeto expõe algumas propriedades úteis:
• EL: o elemento ligado à diretiva.
• VM: o viewModel de contexto que possui a instrução.
• Expressão: a expressão da diretiva, excluindo parâmetros e filtros.
• Arg: parâmetros da diretiva.
• Nome: o nome da diretiva, sem prefixo.
• Modificadores: um objeto que contém modificadores para diretrizes.
• Descritor: um objeto que contém os resultados da análise de uma diretiva.
Você deve tratar essas propriedades como somente leitura e não as modificam. Você também pode adicionar propriedades personalizadas ao objeto Diretiva, mas tome cuidado para não substituir as propriedades internas existentes.
Exemplo:
<div id = "Demo" v-Demo: hello.ab = "msg"> </div>
Vue.directive ('Demo', {bind: function () {console.log ('Demo Bound!')}, Atualização: function (value) {this.el.innerhtml = 'nome -' + this.name + '<br>' + expressão ' + this.expression +' <br> '' '' - 'argumento. Json.stringify (this.modifiers) + '<br>' + 'value -' + value}}) var demo = new vue ({el: '#demo', dados: {msg: 'hello!'}})Objeto literal
Se a diretiva exigir vários valores, você poderá passar em um objeto JavaScript literal. Lembre -se de que as diretivas podem usar qualquer expressão legal de JavaScript:
<div v-demo = "{color: 'white', texto: 'Olá!' } "> </div>
Vue.directive ('Demo', function (value) {console.log (value.color) // "white" console.log (value.text) // "hello!"})Modificador literal
Quando a diretiva usa um modificador literal, seu valor será processado como uma string normal e passada para o método de atualização. O método de atualização será chamado apenas uma vez, porque uma string normal não pode responder às alterações de dados.
<div v-demo.literal = "Foo Bar Baz">
Vue.directive ('Demo', function (value) {console.log (value) // "Foo Bar Baz"})Diretiva Elementar
Às vezes, queremos usar as diretivas na forma de elementos personalizados, não na forma de recursos. Isso é muito semelhante à diretiva "E" do Angular. As instruções do elemento podem ser consideradas um componente leve. Você pode registrar uma diretiva de elemento personalizada como o seguinte:
Vue.ElementDirective ('My-Directive', {// api bind: function () {// operação this.el ...}})Não escreva assim:
<Div v-my-Direction> </div>
Escreva desta forma:
<My-Direction> </ meu-Directive>
Uma instrução de elemento não pode aceitar parâmetros ou expressões, mas pode ler as características de um elemento para determinar seu comportamento.
Ao contrário das instruções comuns, as instruções do elemento são finais, o que significa que, uma vez que o Vue encontra uma instrução de elemento, ele pulará o elemento e seus elementos filhos - apenas a própria instrução do elemento pode operar no elemento e em seus elementos filhos.
Opções avançadas
params
As diretivas personalizadas podem receber uma matriz Params, especificando uma lista de recursos, e o Vue Compiler extrairá automaticamente esses recursos dos elementos ligados. Por exemplo:
<div v-Exemplo a = "oi"> </div>
Vue.directive ('exemplo', {params: ['a'], bind: function () {console.log (this.params.a) // -> "hi"}})Esta API também suporta propriedades dinâmicas. this.params [key] será atualizado automaticamente. Além disso, um retorno de chamada pode ser especificado para ligar quando o valor mudar:
<div v-Exemplo V-bind: a = "algum valor"> </div>
Vue.directive ('exemplo', {params: ['a'], paramwatchers: {a: function (val, OldVal) {console.log ('a alterado!')}}})Semelhante aos adereços, o nome do parâmetro Diretiva usa o estilo CamelCase em JavaScript e o estilo de casos de kebab corresponde ao HTML. Por exemplo, suponha que exista um parâmetro `desabilitar o efeito" no modelo, acesse-o em javascript com `desabilleeffect`.
profundo
Se uma diretiva personalizada for usada em um objeto e a atualização for acionada quando as propriedades internas da alteração do objeto, especifique profundamente: true no objeto de definição da diretiva.
<div v-my-directive = "obj"> </div>
Vue.directive ('my-Directive', {Deep: true, atualização: function (obj) {// chamado quando as propriedades aninhadas de `obj` alteração}})Twoway
Se a diretiva desejar escrever dados de volta na instância do VUE, especifique o Twoway: true no objeto de definição da diretiva. Esta opção permite que este.set (valor) seja usado nas diretivas:
Vue.directive ('Exemplo', {Twoway: true, bind: function () {this.Handler = function () {// Escreva os dados de volta para vm // se a diretiva ligar v-expler = "abc" como este // ele definirá `vm.Abc` com o valor dado. this.Handler)}, nãoAcepstatement
Passagem AcceptStatement: True permite que as diretrizes personalizadas aceitem declarações em linha, assim como o V-ON:
<div v my-directive = "a ++"> </div>
Vue.Directive ('My-Directive', {Acepstatement: true, atualização: function (fn) {// O valor recebido é uma função // A instrução "a ++" será calculada no escopo da instância de pertencimento quando for chamado}})Use sabiamente porque geralmente você deseja evitar efeitos colaterais em seu modelo.
terminal
1.0.19+
O VUE compila módulos atravessando recursivamente a árvore dom. Mas quando encontra uma diretiva terminal, ele para de atravessar os elementos descendentes desse elemento. Esta diretiva assumirá a tarefa de compilar esse elemento e seus descendentes. V-IF e V-For são diretivas de terminais.
A redação de diretivas de terminais personalizados é um tópico de alto nível e requer uma melhor compreensão do processo de compilação da Vue, mas isso não significa que seja impossível escrever diretivas de terminais personalizados. Terminal Use: True para especificar uma diretiva de terminal personalizada e também pode precisar usar o vue.FragmentFactory para compilar parcial. Aqui está uma diretiva de terminal personalizada que compila seu modelo de conteúdo e injeta os resultados em outro lugar na página:
var fragmentFactory = vue.fragmentFactoryVar remover = vue.util.removeVar cremeanchor = vue.util.createanchorvue.directive ('inject', {terminal: true, bind: function () {var container = documentElementById (this.arg) this.anchor. remove(this.el) var factory = new FragmentFactory(this.vm, this.el) this.frag = factory.create(this._host, this._scope, this._frag) this.frag.before(this.anchor) }, unbind: function () { this.frag.remove() remove(this.anchor) }})<div id = "modal"> </div> ... <div v inject: modal> <h1> cabeçalho </h1> <p> corpo </p> <p> rodapé </p> </div>
Se você deseja escrever diretivas de terminais personalizadas, é recomendável ler o código-fonte das diretivas de terminais internas, como V-IF e V-For, para entender melhor os mecanismos internos da Vue.
prioridade
Você pode atribuir uma prioridade à instrução. Se não for especificado, o padrão para o comando normal é 1000 e o padrão para o comando de terminal é de 2000. As instruções com maior prioridade no mesmo elemento serão processadas antes do que outras instruções. As diretrizes com a mesma prioridade são processadas na ordem em que aparecem na lista de propriedades de elementos, mas não se pode garantir que essa ordem seja consistente em diferentes navegadores.
A prioridade das diretrizes internas pode ser vista na API. Além disso, as instruções de controle do processo V-IF e V-For sempre têm a maior prioridade durante o processo de compilação.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.