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

Как напоминание из прошлого раза, базовый экземпляр Vue выглядит так:

new Vue({
  data: {
    // put properties you will use here
  }
})

Часть data экземпляра Vue, пожалуй, самая важная. Любые свойства, которые вы помещаете в объект данных, автоматически отслеживаются Vue, и любые изменения, которые вы вносите в любое из этих свойств, вызовут повторную визуализацию вашей страницы, поэтому на ней всегда будут отображаться обновленные значения. Любые данные, которые вы хотите использовать и отслеживать, должны быть здесь. Данные, которые вы храните в своем объекте data, могут быть практически любого типа; числа, строка, логическое значение (true или false), массив или даже функция. Это также может быть оценено примерно так:

new Vue({
  data: {
    date: new Date().toLocaleString()
  }
})

В этом примере используется встроенный в JavaScript класс Date для получения точной даты и времени при его вызове, а затем используется метод для преобразования объекта даты в удобочитаемую строку. В качестве еще одного напоминания, способ использования этого свойства на веб-странице заключается в заключении его в двойные скобки в вашем HTML и добавлении свойства el к экземпляру со ссылкой на элемент HTML:

<div id="name">
  {{ date }}
</div>

Теперь мы можем увидеть строку date с датой и временем на странице вот так:

Эта дата будет точной датой и временем загрузки страницы, и она не будет обновляться, пока вы не обновите страницу. При интерполяции данных внутри этих двойных скобок вы не просто ограничены ссылкой на предопределенный фрагмент данных, вы также можете использовать фрагмент кода для изменения того, что отображается на странице. Например, если вы хотите показать только дату без времени, вы можете разделить свойство date на запятую и отобразить только первую часть, например:

{{ date.split(',')[0] }}

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

Еще одно свойство, которое вы можете добавить к экземпляру Vue, помимо el и data, — это methods. До сих пор я говорил только об открытии консоли для ручного изменения данных в вашем экземпляре, но вы часто будете использовать для этого функции. Вот пример экземпляра со свойством method:

new Vue({
  el: "#counter",
  data: {
    count: 0
  },
  methods: {
    add: function () {
      this.count++
    }
  }
})

Теперь, используя директиву, о которой я расскажу подробнее в своем следующем сообщении в блоге, вы можете прикрепить эту функцию к кнопке в DOM:

<div id="counter">
  <p>Count: {{ count }}</p>
  <button v-on:click="add">Add</button>
</div>

В этом примере директива v-on используется для создания прослушивателя событий при нажатии кнопки и присоединяется к прослушивателю функция add. Теперь, если вы нажмете кнопку Добавить, вы увидите, как count появляется на экране.

Последнее свойство экземпляров Vue, о котором я расскажу, — это свойство computed. Оно очень похоже на свойство methods тем, что оно также использует функции. Например:

new Vue({
  data: {
    firstName: "Jane",
    lastName: "Doe"
  },
  computed: {
    fullName: function () {
      return `${this.firstName} ${this.lastName}`
    }
  }
})

Это вычисляемое свойство всегда будет возвращать свойства firstName и lastName с пробелом между ними и будет обновляться всякий раз, когда изменяется одно из других свойств. Вы можете подумать, что это одно и то же: иметь эту функцию в свойстве methods или сделать эту функцию частью data, но это немного другое. Во-первых, если вы используете вычисляемое свойство, вы можете ссылаться на него в DOM так же, как на любой фрагмент данных, вместо того, чтобы использовать круглые скобки для вызова его как функции. Кроме того, вычисляемое свойство обновляется только при обновлении некоторых данных, которые оно использует, в отличие от функций, которые повторно вычисляют результат каждый раз, когда на него ссылаются в DOM. Таким образом, если вы выполняете сложную и трудоемкую оценку, не использовать вычисляемое свойство будет дороже с точки зрения времени.

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