Некоторые полезные темы фреймворка Vue

В данном уроке мы изучим некоторые полезные вещи, не изученные нами ранее.

Модификаторы событий

По следующей ссылке изучите раздел Модификаторы событий.

Дана ссылка. Сделайте так, чтобы по нажатию на ссылку в абзац под ссылкой выводился какой-нибудь текст. Сделайте так, чтобы клик по ссылке не приводил к переходу по этой ссылке. Используйте для этого соответствующий модификатор.

Дана кнопка. Сделайте так, чтобы нажатие на эту кнопку приводило в выводу какого-нибудь сообщения алертом на экран. Сделайте так, чтобы это сообщение выводилось только при первом нажатии на кнопку.

Директива v-once

По следующей ссылке изучите раздел Текст (про директиву v-once).

Пусть в data есть свойство text, содержащее какой-нибудь текст. Выведите этот текст в каком-нибудь абзаце, используя директиву v-once. Сделайте кнопку, по нажатию на которую поменяется свойство text. Убедитесь, что текст в нашем абзаце при этом не поменяется.

Директива v-html

По следующей ссылке изучите раздел Сырой HTML.

Дана кнопка и абзац. По нажатию на кнопку выведите в абзац какой-нибудь текст с тегами.

Сокращения

По следующей ссылке изучите раздел Сокращения.

Работа с объектом Event

Иногда в обработчиках необходим доступ к оригинальному событию DOM. Его можно передать в метод, используя специальную переменную $event:

<div id="app"> <button v-on:click="warn('Форма не может быть отправлена.', $event)"> Отправить </button> </div> let app = new Vue({ el: '#app', data: { message: '', }, methods: { warn: function (message, event) { // Теперь у нас есть доступ к нативному событию: event.preventDefault(); alert(message); } } });