Учебное пособие по Vue.js: создание функционального SPA с нуля

Учебное пособие по Vue Программирование и разработка

Внешняя структура помогает разработчикам создавать современные веб-приложения, называемые одностраничными приложениями (SPA). SPA обычно загружает исходный код приложения (HTML, CSS и JavaScript) со стороны сервера, а последующие ресурсы динамически загружаются на страницу, обычно в ответ на действия пользователя.

React, Angular.js, Ember.js и Vue.js — одни из самых популярных интерфейсных веб-фреймворков, используемых сегодня. Каждый из них предлагает определенные преимущества и ограничения по сравнению с другими, но Vue.js популярен как идеальный компромисс.

Это руководство поможет вам быстро изучить Vue.js. Мы рассмотрим ключевые концепции фреймворка при создании нового приложения Vue.

Знание JavaScript является необходимым условием для использования Vue.js.

Что такое Vue.js?

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

Vue предлагает адаптируемую экосистему, которая может масштабироваться между библиотекой и полнофункциональным фреймворком. С годами он становится все более популярным, набрав 176 тысяч звезд на GitHub.

Основанный на архитектуре MVC, Vue (произносится как «представление») ориентирован только на уровень представления и предоставляет систему, которая позволяет вам декларативно вносить изменения в DOM. Это означает, что вам не нужно беспокоиться о том, как отображается пользовательский интерфейс вашего приложения или как изменения применяются к DOM.

Под капотом Vue использует виртуальную модель DOM для внесения необходимых изменений в пользовательский интерфейс и состояние вашего приложения.

Есть несколько способов добавить Vue в проект.

Импортируйте его как пакет CDN на страницу

На существующей веб-странице HTML добавьте следующую строку кода рядом с закрывающимтегом.

<script src="https://unpkg.com/vue@next"></script>

Использование диспетчера пакетов

Вы можете установить Vue в существующий проект, запустив npm install vue@next.

В качестве альтернативы запустите, yarn add vue@nextесли вы используете диспетчер пакетов Yarn. @nextТег сообщает наш менеджер пакетов, чтобы установить последнюю стабильную версию.

Использование официального инструмента CLI

Vue предоставляет инструмент интерфейса командной строки, который может формировать проект с предопределенными настройками сборки для современного рабочего процесса внешнего интерфейса.

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

Обратите внимание, что для использования интерфейса командной строки требуется знакомство с интерфейсными инструментами сборки.

Использование официального инструмента CLI

Vue.js по сравнению с другими фреймворками

Существует три популярных интерфейсных фреймворка JavaScript:

  • Vue.js
  • Угловой
  • Реагировать

Все эти фреймворки имеют схожую философию и цель. Одно из основных отличий заключается в том, что Angular был разработан Google, а React разработан Facebook. За разработкой Vue.js не стоит крупная технологическая компания.

Vue.js часто считается серединой. Он предлагает больше инструментов, чем React, но меньше, чем Angular. Кроме того, синтаксис Vue.js проще. Vue.js также предлагает встроенное управление состоянием и vue-routerофициальный маршрутизатор Vue.js.

Однако в нем нет функций HTTP-клиента или проверки формы. Vue фокусируется на создании пользовательских интерфейсов и создании повторно используемых компонентов.

Vue.js также отличается от других, меньших по размеру библиотек.

  • jQuery — это небольшая библиотека JavaScript, которая упрощает написание ванильного JS. В jQuery есть дополнительный этап сборки, которого нет у Vue, что делает Vue более гибким.
  • Node.js — это кроссплатформенный серверный фреймворк, который выполняет код JavaScript на стороне сервера. В отличие от Vue.js, DOM не используется.
  • Nuxt.js — это интерфейсный фреймворк, основанный на Vue.js. Nuxt.js и Vue.js обрабатывают логику по-разному, поскольку Vue всегда работает на стороне клиента, а nuxt — нет.

Концепции и особенности Vue.js

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

Читайте также:  Побитовые операторы в C с примерами

Файловая структура Vue.js

Как и многие другие интерфейсные фреймворки, Vue.js позволяет пользователям разбивать веб-страницу на повторно используемые компоненты, каждый со своим собственным HTML, CSS и JavaScript для его визуализации.

Как и многие другие интерфейсные фреймворки

HTML-шаблон и Vue CDN

Начнем с создания index.htmlфайла в папке с именем vue-todo. Откройте терминал и выполните следующие команды:

mkdir vue-todo
cd vue-todo
touch index.html

Мы начнем с пустого HTML-шаблона и добавим Vue из CDN. Для этого откройте index.htmlтолько что созданный файл в текстовом редакторе и добавьте следующий код:

<!DOCTYPE html>
<html>
 <head>
   <meta charset=»utf-8″ />
   <meta http-equiv=»X-UA-Compatible» content=»IE=edge» />
   <title>Vue!</title>
   <meta name=»viewport» content=»width=device-width, initial-scale=1″ />
 </head>
 <body>
   <div id=»app»></div>
   <script src=»https://unpkg.com/vue@next»></script>
 </body>
</html>

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

Создание экземпляра приложения

Приложения Vue обычно организованы в виде дерева вложенных многократно используемых компонентов. Компонент, используемый в качестве отправной точки для приложения, называемый корневым компонентом, отображается, когда мы монтируем его в DOM.

Vue предоставляет вызываемый метод, createApp()который принимает параметры для настройки корневого компонента и возвращает экземпляр приложения. Затем мы можем смонтировать приложение, используя mount()метод.

Продолжая наш пример, добавьте следующий код для настройки вашего приложения Vue:

<script src="https://unpkg.com/vue@next"></script>
<script type="text/javascript">
  const TodoApp = {};
  const app = Vue.createApp(TodoApp);
  app.mount("#app");
</script>

Мы используем <div> в нашем документе в качестве целевого узла DOM для нашего приложения. Обратите внимание, что мы можем передавать параметры createApp()методу.

Давайте пока инициализируем наш список дел как пустой массив. Измените TodoAppобъект, чтобы он выглядел так:

const TodoApp = {
  data() {
    return {
      todos: [],
    };
  },
};

Когда создается экземпляр Vue, он ищет элемент на веб-странице для управления. Его можно определить, присвоив этому элементу идентификатор (обычно div). Затем этот идентификатор упоминается в экземпляре Vue как значение elключа.

<!— This is the div that is assigned the id= ‘app’ —>
<div id=’app’></div>
<script>
new Vue({
    // This `id` is used as a value of `el` so that it knows
    // which element `Vue` should be mounted on.
    el: ‘#app’
})
</script>

Синтаксис шаблона

Если у вас есть некоторый опыт работы с HTML и JavaScript, то то, что мы сделали до сих пор, должно показаться вам знакомым. Это одно из преимуществ Vue.js перед интерфейсными фреймворками, такими как React и Angular.

Возвращаясь к нашему приложению, нам понадобится способ отображать элементы в нашем списке дел и добавлять / удалять элементы. Для визуализации данных Vue предоставляет простой способ сделать это.

Сначала добавьте в массив пример элемента списка дел:

todos: [
  {
    title: "Shop for Christmas",
  },
],

Затем обновите свой HTML, чтобы он выглядел следующим образом:

<ul>
  <li v-for="todo in todos">
    {{ todo.title }}
  </li>
</ul>

v-forАтрибут здесь позволяет связать и сделать список в DOM. Это называется директивой и, как вы уже догадались, ведет себя как цикл for-in в JavaScript.

Директивы имеют префикс, v-чтобы указать, что они являются специальными атрибутами, предоставляемыми Vue. Они применяют особое реактивное поведение к визуализированной модели DOM.

Использование двойных фигурных скобок интерпретирует данные из экземпляра компонента как обычный текст. Это называется интерполяцией текста.

Выражения JavaScript поддерживаются и будут оцениваться как JavaScript в области данных текущего активного экземпляра.

Компоненты и реквизит

Компоненты — это многократно используемые экземпляры Vue, которые можно прикрепить к экземпляру приложения или корневого компонента. Они принимают те же параметры, что и корневой экземпляр, например:

  • данные
  • вычислен
  • смотреть
  • методы
  • крючки жизненного цикла

Компонент должен быть зарегистрирован в экземпляре приложения, прежде чем его можно будет отобразить. Мы можем сделать это с помощью component()метода. Вы обнаружите, что компоненты очень полезны для поддержания аккуратности и упорядоченности ваших кодовых баз, когда вы начнете создавать более крупные приложения.

Давайте внесем несколько изменений в наше приложение Todo, чтобы увидеть компоненты в действии. Сначала мы заменим начальный и конечный

<todo-item
  v-for="todo of todos"
  v-bind:title="todo.title"
></todo-item>

Затем добавьте следующее непосредственно перед app.mount():

app.component("todo-item", {
  props: {
    title: String,
  },
  template: `
    <li>
      {{ title }}
    </li>
  `,
});

Вы можете видеть, что мы создали и зарегистрировали новый компонент, названный todo-itemдля нашего экземпляра приложения. Свойство props определяет данные, которые могут быть переданы компоненту из его родительского приложения или экземпляра компонента.

Читайте также:  Динамическое программирование примеры

Значение, предоставленное свойству шаблона, должно быть строкой, содержащей HTML-код для отображения.

Компоненты отображаются в HTML путем передачи имени компонента в настраиваемый тег. В нашем примере приложения это выглядит так . Директива v-bind используется для привязки атрибута или свойства компонента к выражению.

Здесь мы используем его для динамической передачи данных из нашего цикла в компонент.

Методы

Методы компонента доступны из шаблона компонента. Мы можем добавить методы к экземпляру компонента, передав объект с желаемыми методами в параметр методов компонента.

Vue автоматически связывает значение this для методов, чтобы оно всегда ссылалось на экземпляр компонента.

Примечание: вам следует избегать использования методов стрелок при определении методов, так как это не позволяет Vue связывать соответствующее значение this.

Взгляните на пример использования методов в экземпляре компонента ниже.

const TodoApp = {
  data() {
    return {
      todos: [
        {
          title: «Shop for Christmas»,
        },
      ],
      todo: «»,
    };
  },
  methods: {
    addTodo() {
      if (this.$data.todo.length > 0) {
        this.$data.todos.push({ title: this.$data.todo });
        this.$data.todo = «»;
      }
    },
  },
};

 

<div>
  <input v-model=»todo» />
  <button v-on:click=»addTodo»>Add todo</button>
</div>

Наш компонент был изменен, чтобы иметь дополнительное свойство данных, todo, значение которого мы будем связывать с тегом в HTML. Мы также добавили addTodo()метод для создания нового элемента задачи со значением ввода.

v-model- это директива, используемая для создания двусторонних привязок данных при вводе формы, текстовом поле и элементах выбора. Он автоматически выбирает правильный способ обновления элемента в зависимости от типа ввода. В v-onдирективе прослушивает события DOM.

В нашем примере он используется для вызова addTodo()метода при нажатии кнопки.

Примеры кода Vue.js

Теперь, когда мы понимаем основы создания приложения Vue.js, давайте подробнее рассмотрим различные функции с помощью некоторых примеров кода. Это общие задачи, которые вы, вероятно, реализуете в своих собственных приложениях.

Слушайте, когда щелкают по элементу

new Vue({
    el: ‘#app’,
    methods: {
        doSomething() {
            alert(‘Clicked!’);
        }
    }
});

Связывание классов

new Vue({
    el: ‘#app’,
    data: {
        className: ‘red-text’
    }
});

Обновить содержимое элемента

new Vue({
    el: ‘#app’,
    data: {
        content: »
    }
});

Создать выборку ввода из массива

new Vue({
    el: ‘#app’,
    data: {
        socialNetworks: [‘Twitter’, ‘Facebook’, ‘TikTok’, ‘LinkedIn’, ‘MySpace’]
    }
});

Расширенное использование Vue.js

Наша установка (включая пакетную сборку из CDN) выглядит хорошо и очень хорошо работает для малых и средних проектов, где JavaScript используется только для улучшения определенных представлений. Однако в более сложных проектах или когда ваш интерфейс полностью управляется JavaScript, эти недостатки становятся очевидными:

  • Глобальные определения заставляют уникальные имена для каждого компонента
  • В строковых шаблонах отсутствует подсветка синтаксиса и требуется некрасивая косая черта для многострочного HTML.
  • Отсутствие поддержки CSS означает, что, хотя HTML и JavaScript разбиты на компоненты, CSS явно не учитывается.
  • Никакой шаг сборки не ограничивает нас HTML и ES5 JavaScript, а не препроцессорами, такими как Pug (ранее Jade) и Babel.

Все они решаются однофайловыми компонентами с.vueрасширением. Также доступно множество компонентов, библиотек и инструментов с открытым исходным кодом, которые могут улучшить функциональность и удобство разработки вашего приложения.

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

Он будет установлен vue-cliглобально и сделает vueдвоичный файл доступным из любой точки вашей командной строки.

// using npm
npm install -g @vue/cli

// using yarn
yarn global add @vue/cli

После его установки вы можете создать проект с помощью vue create app-nameкоманды. Вам будут предоставлены подсказки о конфигурации вашего проекта. Вы можете выбрать настройку по умолчанию или настроить свою собственную конфигурацию.

Выполнение этой команды с CLI версии 4.5 дает следующий результат:

Выполнение этой команды с CLI версии

Если вы решите использовать предустановку Vue v3, команда создаст каталог проекта, который выглядит следующим образом:

Если вы решите использовать предустановку Vue 

Оцените статью
bestprogrammer.ru
Добавить комментарий