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

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

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

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

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

Сегодня мы узнаем:

  • Что такое Vue.js?
  • Vue.js по сравнению с другими фреймворками
  • Концепции и особенности Vue.js
  • Примеры кода Vue.js
  • Advanced Vue.js использует
  • Что изучать дальше

Разработка сингла среднего уровня Страничные приложения с Vue.js

Этот курс представляет собой введение в Vue.js. Вы расскажете о важнейших понятиях, таких как директивы, средства визуализации, API и компоненты, — все с практической практикой.

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

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

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

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

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

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

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

Импортировать его как пакет CDN на странице

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

     

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

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

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

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

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

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

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

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

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

  • Vue .js
  • Angular
  • React

Все эти фреймворки разделяют схожую философию и цель. Одно из основных отличий заключается в том, что 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, одновременно изучая основные концепции фреймворка.

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

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

Шаблон HTML и Vue CDN

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

  mkdir vue-todocd vue-todotouch index.html  

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

       Vue!     

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

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

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

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

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

     const TodoApp = {};  const app = Vue.createApp (TodoApp);  приложение. mount ("# app");   

Мы используем

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

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

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

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

  
new Vue ({//Этот `id` используется как значение` el`, чтобы он знал,//какой элемент `Vue` должен быть установлен. el:' #app '})

Монтирование экземпляра Vue

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

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

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

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

  todos  : [{title: "Магазин на Рождество",},],  

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

  
  • {{todo.title}}

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

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

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

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

Компоненты и свойства

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

  • data
  • computed
  • watch
  • методы
  • хуки жизненного цикла

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

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

  • следующими:

         

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

      app.component ("todo-item", {props: {title: String,}, template: `
  • {{title }}
  • `,});

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

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

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

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

    Продолжайте обучение.

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

    Практический Vue.js: создание полнофункционального SPA

    Методы

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

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

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

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

     const  TodoApp = {data () {return {todos: [{title: "Магазин на Рождество",},], todo: "",};  }, методы: {addTodo () {if (this. $ data.todo.length> 0) {this. $ data.todos.push ({title: this. $ data.todo});  это. $ data.todo = "";  }},},}; 

     

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

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

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

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

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

    Слушать щелчок по элементу

    • JavaScript
    • HTML
    
    

    Классы привязки

    • JavaScript
    • HTML
     

    Upda содержание элемента

    • JavaScript
    • HTML
     

    Создание ввода выбора из массива

    • JavaScript
    • HTML
     

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

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

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

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

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

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

     //используя npmnpm install -g @ vue/cli//используя yarnyarn global add @ vue/cli  

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

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

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

    Что изучать дальше

    Это все, что вам нужно, чтобы начать использовать Vue с современным JavaScript t ools и функции для разработки многофункциональных приложений!

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

    • Условный рендеринг
    • Привязки классов и стилей
    • События и модификаторы ввода
    • Плагины Vue.js
    • Vuex: шаблон управления состоянием

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

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

    Удачного обучения!

    Читать далее Vue.js

    • Создайте приложение с нуля с помощью Vue.js
    • Напишите и протестируйте свой первый компонент Vue.js с помощью Jest
    • Сравнение самых популярных интерфейсов JavaScript-фреймворков

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