Diretivo
Embora pareça que, embora seja semelhante à definição no Angular, a diretiva é uma expansão das funções DOM, a diretiva de Vue é muito mais fraca. Como o componente Vue realmente contém operações no DOM, na maioria das vezes em que escrevemos um componente geral, é um componente e não uma diretiva e, no angular, escrevemos um componente geral, geralmente é uma diretiva.
Então eu disse que a diretiva de Vue é muito mais fraca que o angular, ou pode -se dizer que é muito mais puro. É uma expansão das funções DOM, não para encapsular a lógica relacionada ao DOM. Se você estiver interessado, pode entender comparando essas duas bibliotecas de interface do usuário:
• Vux https://github.com/airyland/vux
• Bootstrap angular https://github.com/angular-ui/bootstrap
Em comparação, descobriremos que em Vue, na verdade, encapsulamos um componente geral (na verdade, seja geral ou não) é um componente, mas no angular é uma diretiva, porque o controlador no Angular pode criar apenas um escopo de $. Pode ser simplesmente pensado na Diretiva Vue = Diretiva Angular + Controlador. Como mencionado anteriormente, muitos designs de Vue são semelhantes ao Angular2. A diretiva em Vue pode basicamente ser equivalente à diretiva no Angular2, mas não se confunda com a diretiva em Angular.
Para evitar enganosos, a Diretiva Angular não será mais comparada posteriormente.
vida útil
O ciclo de vida é dividido em três etapas:
• vincular gatilhos quando ligado ao elemento DOM pela primeira vez
• O vínculo de atualização será acionado imediatamente após a conclusão e será acionado sempre que os parâmetros forem atualizados no futuro.
• Desparecer os gatilhos quando os elementos desbotados e DOM são desbotados
A API é tão concisa. . .
Entre eles, a atualização é a coisa mais importante, ou seja, quando a diretiva recebe uma atualização de um valor, o código correspondente será executado. Os parâmetros recebidos pela função de atualização são os valores passados pelo usuário através do ATTR.
Vamos implementar uma diretiva simples abaixo, que é usada para verificar a entrada de conteúdo da lista TODO (verificação do formulário). A estrutura básica da diretiva é a seguinte:
Vue.directive ("minlength", {bind: function () {}, update: function (value) {}, desbrind: function () {}});Em seguida, precisamos executar a verificação quando o usuário entra. Aqui implementamos uma verificação simples de minlength, o código é o seguinte:
Vue.directive ("minlength", {bind: function () {var self = this; var el = this.el; el.addeventListener ("keydown", function (e) {if (e.KeyCode === 13) {if (el.value.length <self.minLength) {e.PreventEffult (); el.parentnode.QuerySelector (Button, Type = 'submeter'] "); {}});A lógica básica liga os eventos durante o estágio de ligação e, em seguida, faz julgamentos com base no valor de MinLength passado durante a atualização.
Atualmente, a diretiva deve ser para obter funções semelhantes e, é claro, ainda existem muitos detalhes de uso, por isso não entrarei em detalhes. A diretiva não é uma parte muito importante no Vue. As pessoas geralmente escrevem componente ao escrever código.
Filtro e mixins parecem relativamente simples, pule -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.