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

Давайте пока инициализируем наш список дел как пустой массив. Измените 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 дает следующий результат:

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