Processador de método
Você pode usar o comando v-on para ouvir os eventos DOM:
<div id = "Exemplo"> <Button V-on: Click = "Greet"> Greet </butut> </div>
Ligamos um manipulador de eventos de clique em uma saudação de método. A seguir, é apresentado o método definido na instância do VUE:
var vm = new vue ({el: '#example', dados: {name: 'vue.js'}, // define métodos no `methods` objeto: {greet: function (event) {// no método` `` ponto para vm alert ('hello' this.name + '!') // `/ ` }}) // você também pode chamar o método vm.greet () no código javascript // -> 'olá vue.js!'Teste você mesmo
Processador de declaração embutida
Além de se ligar diretamente a um método, você também pode usar as instruções JavaScript embutidas:
<div id = "Exemplo-2"> <Button V-on: Click = "Say ('Hi')"> Diga oi </butão> <Button V-on: Click = "Say ('What')"> Diga o que </butão> </div> new vue ({el: '#Exemplo-2', métodos: {digamos: function (msg) {alert (msg)}}})Semelhante às expressões embutidas, o manipulador de eventos é limitado a uma declaração.
Às vezes, também é necessário acessar eventos nativos de DOM no processador de declaração embutida. Você pode usar o evento de $ variável especial para transmiti -lo para o método:
<Button V-on: Click = "Say ('Hello!', $ Event)"> Envie </butão>
// ... Métodos: {digamos: function (msg, evento) {// agora podemos acessar o evento de evento nativo event.preventDefault ()}}Modificador de eventos
Nos processadores de eventos, o evento.preventDefault () ou event.stopPropagation () é frequentemente necessário. Embora possamos fazê -lo facilmente dentro de um método, seria melhor que o método seja lógica de dados pura sem lidar com os detalhes do evento DOM.
Para resolver esse problema, o vue.js fornece ao V-ON dois modificadores de eventos: .Prevent e .Stop. Você se lembra que o modificador é o sufixo de instrução que começa com o ponto?
<!-impedir que o evento de clique em Bubled-> <a v-on: click.stop = "Dothis"> </a> <!-Enviar evento não sobrecarrega mais a página-> <formulário V-on: submit.prevent = "OnSubMit"> </form> <!-Modifiers pode ser concatenado-> <a-v-o: clique ". v-on: envie.prevent> </morm>
1.0.16 Adicionado dois modificadores adicionais:
<!-Use o modo de captura ao adicionar ouvintes de eventos-> <div v-on: click.capture = "Dothis"> ... </div> <!-Retorno de chamada é acionado apenas quando o evento é acionado no próprio elemento (não um elemento filho)-> <div v-on: click.self = "Dothat"> ... </div>
Modificador de chave
Ao ouvir eventos do teclado, geralmente precisamos detectar o código de chave. Vue.js permite adicionar modificadores-chave ao V-ON:
<!-vm.submit () é chamado apenas quando o código de chave é 13-> <input v-on: keyup.13 = "submeter">>
Lembre -se de que todos os códigos de chave são difíceis, o vue.js fornece alias para as teclas mais usadas:
<!-o mesmo que acima-> <input v-on: keyup.enter = "submit"> <!-Sintaxe da abreviação-> <input @keyup.enter = "submit">
Todos os principais alias:
•digitar
• guia
•excluir
•esc
•espaço
•acima
•abaixo
•esquerda
•certo
1.0.8+: suporta alias de chave de letra única.
1.0.17+: Você pode personalizar o alias -chave:
// você pode usar @keyup.f1vue.directive ('on'). Keycodes.f1 = 112Por que ouvir eventos em HTML?
Você deve ter notado que esse tipo de método de monitoramento de eventos vai contra o conceito tradicional de "separação de preocupação". Não se preocupe, porque todos os métodos e expressões de manuseio de eventos do Vue.js estão estritamente ligados à ViewModel da visão atual e não causará dificuldades de manutenção. De fato, existem vários benefícios em usar o V-ON:
1. Digitalize o modelo HTML e você pode localizar facilmente os métodos correspondentes no código JavaScript.
2. Como você não precisa vincular manualmente os eventos no JavaScript, seu código ViewModel pode ser uma lógica muito pura, completamente dissociada do DOM, facilitando o teste.
3. Quando um viewmodel é destruído, todos os processadores de eventos serão excluídos automaticamente. Você não precisa se preocupar com como limpá -los.
Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.
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.