Начиная с Vue.js

Если вы знакомы с какой-либо библиотекой внешнего интерфейса, вы знаете, что они могут быть отличным инструментом для создания приложения. Однако часто возникает вопрос, какой из них изучать. Лично у меня гораздо больше опыта работы с React, но недавно мне представилась возможность изучить Vue для решения кода. В этом блоге я расскажу о том, что, по моему мнению, важно знать, когда вы начинаете изучать Vue, а также о некоторых ключевых различиях между Vue и React.

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

О чем все это?

Vue.js определяется как

«прогрессивный фреймворк для создания пользовательских интерфейсов».

Звучит красиво, но что именно это означает? Ну, чтобы разбить его, фреймворк также может называться платформой, используемой для разработки программного обеспечения, написанного на определенном языке для обеспечения общей функциональности. В этом смысле мы можем думать о Vue как о структуре JavaScript или наборе предварительно написанного кода, шаблонов и правил, которые помогают нам проще создавать внешний интерфейс нашего приложения и использовать единый набор правил.

Однако в Vue есть несколько отличий, особенно если вы работаете с React или обычным JavaScript. Я расскажу сегодня:

• Структура компонентов
• Условные
• Петли
• Вход

Vue-компоненты

Первое, что вам нужно сделать при изучении Vue, — это понять структуру компонентов. Когда вы устанавливаете Vue и запускаете команду vue create app-name, вы увидите главную страницу App.vue, которая выглядит следующим образом:

Давайте немного разберем это. Теги шаблона в верхней части указывают, какие компоненты будут отображаться, в данном случае только тег div, тег изображения и весь компонент HelloWorld, который был предварительно создан, когда мы запускали команду для создания этого приложения. Обратите внимание, что весь контент или компоненты внутри шаблона должны быть внутри внешнего тега, в данном случае тега div с идентификатором приложения.

Далее мы видим скрипт, в котором мы импортируем компонент HelloWorld из папки компонентов. Как и в React, мы экспортируем значение по умолчанию, и здесь мы называем наш компонент и перечисляем существующие в нем компоненты, в данном случае HelloWorld. Внутри скрипта мы размещаем любой код JavaScript: пишем методы, возвращаем данные и определяем реквизиты.

Наконец, в строках с 19 по 28 вы можете видеть, что у нас есть наш тег стиля. Это просто CSS, который будет применяться только к этому конкретному компоненту. В Vue таким образом можно стилизовать каждый компонент и избежать необходимости в отдельной странице стилей. Это базовая разбивка компонента Vue, и это сэкономит вам время на изучение Vue, если вы уже знаете это.

Условные

Если вы знакомы с JavaScript, вы либо пишете условные выражения с синтаксисом if, else if, либо с оператором switch. Vue обрабатывает их немного по-другому. Например, если мы хотим условно отображать часть данных или HTML-тег, мы можем просто добавить директиву v-if для привязки данных к DOM. (Обратите внимание, что при запуске Vue директивы будут префиксными атрибутами HTML, которые могут действовать как функции или каким-то образом манипулировать элементом DOM)

Я отредактировал компонент HelloWorld, чтобы продемонстрировать условный рендеринг с помощью директивы v-if. В приведенном ниже примере v-if связывает атрибут данных «appear» с DOM и элементом h1. Если бы мы изменили значение для появления на false вместо true, сообщение «Добро пожаловать в ваше приложение Vue.js» больше не появлялось бы в нашем браузере.

Здесь мы можем увидеть несколько вещей о Vue. Во-первых, в строке 16 мы видим, что наш объект реквизита имеет ключ с именем msg, который является строкой. Если вы обратитесь к опубликованной ранее странице App.vue, вы увидите, что мы передаем и определяем реквизит с именем msg, равный «Добро пожаловать в ваше приложение Vue.js» (строка 4).

Кроме того, мы видим, что данные для компонента — это функция, которая возвращает объект. Здесь мы определяем переменную появления и инициализируем ее значением true. Эту функцию данных можно рассматривать как аналогию состояния в React, если это облегчает понимание.

Петли

Возможно, наиболее распространенным методом, применяемым в любом типе программирования, является возможность перебора данных в цикле. В Vue.js мы используем директиву v-for. Здесь я продемонстрировал, как мы можем пройтись по массиву строк и отобразить их в тегах li.

Чтобы разобрать этот код, мы можем видеть, что в строке 3 мы ссылаемся на одну «песню» в массиве «songs», а затем с помощью двойных скобок {{}} мы отображаем эту песню в элементе li.

В последних обновлениях Vue.js вам нужно добавить привязку клавиш при использовании цикла v-for, чтобы он работал. Это помогает Vue отслеживать личность каждого узла при повторении. Использование идентификатора элемента, в данном случае «song.id», — это простой способ привязать ключ к директиве v-for.

Вход

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

Чтобы связать ввод с состоянием, все, что нам нужно сделать, это добавить директиву v-model и установить ее равной данным, которые мы хотим связать. В приведенном ниже примере inputMessage привязан к вводу и DOM, поэтому всякий раз, когда пользователь вводит текст во ввод, он отображается в теге h1 в строке 3.

Долгий путь

По общему признанию, я совсем недавно начал изучать Vue.js. Однако, если бы кто-нибудь указал мне на эти простые понятия неделю назад, это сделало бы мою жизнь намного проще. Я надеюсь, что этот ускоренный курс для начинающих по основам Vue.js дал вам некоторое представление о том, как приступить к созданию своего первого приложения Vue.js. И, конечно же, лучший способ узнать о чем-либо больше — это попробовать самому!

Ресурсы: