Основы использования Vue.js вместо jQuery

Основы использования Vue.js вместо jQuery

От автора: в этом посте вы познакомитесь с основными компонентами Vue.js для разработчиков, уже знакомых с jQuery. Давайте начнем.

Vue.js, фреймворк для создания веб-приложений, имеет систему реактивности, которая позволяет моделировать и управлять состоянием приложения таким образом, чтобы при изменении данных это отражалось в пользовательском интерфейсе, без необходимости запрашивать DOM. Эта система реактивности делает простым управление состоянием. С учетом всего, что происходит в последнее время с JS-фреймворков, вы, возможно, хотите начать использовать Vue js вместо jQuery. Возможно, вы просто постоянно видите статьи о Vue в своих любимых новостных рассылках, и вам интересно, как вы можете осуществить переход.

В этой статье я опишу некоторые фундаментальные компоненты Vue, которые вам необходимо знать, чтобы начать работать в качестве разработчика jQuery.

Добавление Vue.js в приложение

Первое, что вам нужно сделать, это добавить ссылку на Vue.js в проект. Есть разные способы сделать это, но я опишу использование ссылки на скрипт. Вы можете добавить следующий код на страницу для ссылки на библиотеку Vue:

Фреймворк VUE JS: быстрый старт

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

После добавления вам нужно инициализировать Vue. Создайте файл HTML со следующим содержимым:

Функция Vue получает объект параметров, который сообщает Vue, как настроить приложение после инициализации. Свойство el указывает элемент DOM, который Vue перехватывает и определяет, как свою территорию. Все, что находится внутри этого элемента, будет контролироваться Vue.

Отображение данных

В каждом приложении нам нужно отображать данные. В jQuery это делается путем вызова $(element).text(data) или $(element).html(data). При этом нам нужно знать, как идентифицировать элемент DOM. Во Vue это можно сделать с помощью текстовой интерполяции. Например, следующим образом:

Здесь мы добавили новое свойство при инициализации Vue. Объект data добавляется к системе реактивности Vue, связывая данные и DOM. Как было сказано, система реактивности Vue является одной из его отличительных особенностей, и она делает управление состоянием простым и интуитивно понятным. С помощью этой системы реактивности, когда состояние изменяется, оно автоматически отражается на странице. Поэтому, если вы обновите значение message, оно автоматически отобразится на странице. Добавьте следующий код в свой скрипт:

Основы использования Vue.js вместо jQuery

Иногда нам нужно отобразить список элементов, может быть, в table или ol. В jQuery для этого потребуется объединение строк текста, что может привести к ошибкам. Во Vue это намного проще, потому что данные и DOM связаны между собой. Приведенный ниже код показывает, как это делается во Vue для списка людей, отображаемых в элементе списка:

Атрибут v-for, которыйф мы использовали, является директивой Vue. У Vue есть много других директив, и все они начинаются с v-; эта применяет к DOM реактивное поведение Vue, изменяя его по мере изменения данных.

Обработка событий

Другим важным аспектом веб-приложений является обработка событий, когда пользователи взаимодействуют с вашим приложением. Директива v-on используется для подключения обработчиков событий в Vue. Ниже приведен пример кода, который прослушивает нажатие кнопки и отображает окно предупреждения:

v-on:click говорит Vue, что мы хотим прослушивать событие клика для этой кнопки, с alert в качестве обработчика событий. Функции, о которых должен знать Vue, содержатся в свойстве объекта параметров methods, передаваемого в функцию Vue при инициализации. Вы можете вызывать функцию с параметрами при ее подключении.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Основы использования Vue.js вместо jQuery

В директиве v-on есть сокращение — @. Так что, если вам нужно переписать фрагмент, который прикрепил обработчик события click к кнопке, тогда:

Работа с формами

Формы — это способ получения информации от пользователей. Они могут содержать текстовое поле, чек-бокс и радио-кнопки. Vue предоставляет директиву v-model, которая создает двустороннюю привязку данных между состоянием приложения и элементами формы. Давайте рассмотрим пример:

Основы использования Vue.js вместо jQuery

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

Чтобы собрать данные, мы прослушиваем событие отправки формы, используя @submit.prevent. .prevent является модификатором события, которое в данном случае является сокращением для вызова event.preventDefault() внутри функции обработчика событий. Затем для публикации данных вы можете использовать API Fetch или другую HTTP-библиотеку (например, axios) для публикации данных на сервере.

Скрытие и отображение вещей

Еще одна функция — возможность скрывать и отображать вещи, основываясь на значении логического состояния. Это может быть скрытие определенных частей страницы в зависимости от роли пользователя или переключение отображения раздела страницы одним нажатием кнопки. Во Vue вы можете делать это, используя директивы v-if и v-show . Давайте рассмотрим пример:

Основы использования Vue.js вместо jQuery

С помощью приведенного выше кода содержимое тега <p/> отображается, если состояние show истинно. Этого также можно достичь с помощью v-show, но между ними есть небольшая разница. С v-if этот элемент будет полностью размонтирован, а с v-show нет; вместо этого переключается значения свойства CSS display для этого элемента. С v-if также используются v-else и v-else-if, вы можете прочитать больше о них здесь.

Возможно, вы уже заметили, что с помощью Vue вы обновляете то, что видят ваши пользователи, не обращаясь к DOM. Все манипуляции с DOM обрабатываются Vue, вы пишете меньше кода, и ваше приложение также легче поддерживать. Конечно, во Vue гораздо больше всего, чем я рассказал — у него есть собственный CLI для быстрого создания новых проектов, маршрутизатор Vue для обработки маршрутизации в одностраничных приложениях и много других API.

Для получения дополнительной информации о Vue: Хотите узнать о создании отличных пользовательских интерфейсов с помощью Vue? Ознакомьтесь с Kendo UI for Vue, нашей библиотекой компонентов пользовательского интерфейса, которая позволяет быстро создавать высококачественные, быстро реагирующие приложения. Она включает в себя все компоненты, которые вам понадобятся, от таблиц и диаграмм до планировщиков и наборов.

Автор: Peter Mbanugo

Источник: https://www.telerik.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Создание веб-приложения на VUE JS

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree