Метод процессор
Вы можете использовать команду V-ON для прослушивания событий DOM:
<div id = "Пример"> <кнопка v-on: click = "Greet"> приветствие </button> </div>
Мы связываем обработчик событий Click с приветствием метода. Ниже приведен метод, определенный в экземпляре Vue:
var vm = new Vue ({el: '#Example', data: {name: 'vue.js'}, // определить методы в объекте «Методы»: {greet: function (event) {// в методе `this` point to vm alert ('hello' + this.name + '!') //` event revelce alert ('hello' + this.name + '!') // `event event alert ('hello' + this.name + ') //` event event. }}) // Вы также можете вызвать метод vm.greet () в коде Javascript // -> 'Hello vue.js!'Проверьте это самостоятельно
Встроенный процессор заявления
В дополнение к непосредственному привязке с методом, вы также можете использовать встроенные операторы JavaScript:
<div id = "Пример-2"> <кнопка v-on: chlice = "say ('hi')"> скажем hi </button> <кнопка v-on: click = "say (" что ') "> Скажи что </button> </div> New Vue ({el: '#Пример-2', Методы: {say: function (msg) {alert (msg)}}})Подобно встроенным выражениям, обработчик событий ограничен одним утверждением.
Иногда также необходимо получить доступ к нативным событиям DOM в встроенном процессоре операторов. Вы можете использовать событие специальной переменной $, чтобы передать его в метод:
<Кнопка v-on: click = "say ('Hello!', $ Event)"> отправить </button>
// ... Методы: {say: function (msg, event) {// Теперь мы можем получить доступ к нативному объекту события.Модификатор события
В процессах событий, event.preventDefault () или Event.stoppropagation () часто требуется. Хотя мы можем легко сделать это в рамках метода, было бы лучше, чтобы метод была чистой логикой данных, не обрабатывая детали события DOM.
Чтобы решить эту проблему, Vue.js предоставляет V-ON с двумя модификаторами событий: .prevent и .stop. Вы помните, что модификатор - это суффикс инструкции, который начинается с точки?
<!-Предотвратить событие Click от Bubbled-> <a v-on: click.stop = "dothis"> </a> <!-Отправить событие больше не перегружает страницу-> <form v-on: prepect.prevent = "onsubmit"> </form> <!-Модификаторы могут быть объединены. v-on: отправить.prevent> </form>
1.0.16 Добавлены два дополнительных модификатора:
<!-Используйте режим захвата при добавлении слушателей событий-> <div v-on: click.capture = "dothis"> ... </div> <!-обратный вызов запускается только тогда, когда событие запускается на самом элементе (не дочернем элементе)-> <div v-on: click.shat = "dotat"> ... </div>
Ключевой модификатор
При прослушивании событий клавиатуры нам часто нужно обнаружить ключевой код. Vue.js позволяет добавлять модификаторы ключей в V-on:
<!-vm.submit () вызывается только тогда, когда Key-Код составляет 13-> <input v-on: keyup.13 = "Отправить">
Помните, что все ключевые коды сложны, Vue.js обеспечивает псевдоним для наиболее часто используемых клавиш:
<!-То же самое, что и выше-> <input v-on: keyup.enter = "Отправить"> <!-Синтаксис аббревиатуры-> <input @keyup.enter = "Отправить">
Все ключевые псевдонима:
•входить
• Таб
•удалить
• ESC
•космос
•вверх
•вниз
•левый
•верно
1.0.8+: поддерживает псевдоним для однобуквенного ключа.
1.0.17+: Вы можете настроить псевдоним ключа:
// Вы можете использовать @keyup.f1vue.directive ('on'). Keycodes.f1 = 112Зачем слушать события в HTML?
Возможно, вы заметили, что этот вид метода мониторинга событий противоречит традиционной концепции «разделения беспокойства». Не волнуйтесь, потому что все методы и выражения обработки событий Vue.js строго связаны с ViewModel текущего представления, и это не вызовет каких -либо трудностей для обслуживания. На самом деле, есть несколько преимуществ использования v-on:
1. Сканируйте шаблон HTML, и вы можете легко найти соответствующие методы в коде JavaScript.
2. Поскольку вам не нужно вручную связывать события в JavaScript, ваш код ViewModel может быть очень чистой логикой, полностью отделенной от DOM, что облегчает тестирование.
3. Когда ViewModel уничтожена, все процессоры событий будут автоматически удалены. Вам не нужно беспокоиться о том, как их почистить сами.
Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.