VueJS - Инстансы

Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в чудесный мир инстансов Vue.js. Не волнуйтесь, если вы новички в программировании - я буду вести вас шаг за шагом, как я делал это для countless студентов на протяжении многих лет моего преподавания. Так что возьмите杯咖啡 (или чай, если это ваше дело), и давайте начнем!

VueJS - Instances

Что такое инстанс Vue?

Before мы перейдем к коду, давайте поймем, что такое инстанс Vue. Представьте, что вы строите дом. Инстанс Vue - это как фундамент этого дома - это то, с чего все начинается. Это ядро, которое управляет всем вашим приложением Vue.

Синтаксис

Создание инстанса Vue довольно просто. Вот базовый синтаксис:

new Vue({
// параметры
})

Это так просто! Мы используем ключевое слово new, за которым следует Vue(), и внутри скобок передаем объект с различными параметрами. Эти параметры resemble чертежи для нашего дома - они говорят Vue, как мы хотим, чтобы наше приложение вели себя.

Ваш первый инстанс Vue

Давайте создадим наш первый инстанс Vue вместе. Не волнуйтесь, если вы не понимаете все сразу - мы разберем это по частям.

Пример 1

<!DOCTYPE html>
<html>
<head>
<title>Мое первое приложение Vue</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Привет, Vue!'
}
})
</script>
</body>
</html>

Вывод

Привет, Vue!

Теперь давайте разберем это:

Мы включаем библиотеку Vue.js в наш HTML-файл.
Мы создаем <div> с идентификатором "app". Это место, где будет жить наше приложение Vue.
Внутри <div>, мы используем {{ message }}. Это называется интерполяция - это то, как мы отображаем данные в Vue.
В теге <script>, мы создаем новый инстанс Vue.
Мы используем el: '#app', чтобы сказать Vue, какой элемент он должен контролировать (наш div с идентификатором "app").
В объекте data, мы определяем свойство message со значением 'Привет, Vue!'.

Когда Vue видит {{ message }} в нашем HTML, он заменяет его значением message из нашего данных. Волшебство, правда?

Данные и методы

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

Пример 2

<!DOCTYPE html>
<html>
<head>
<title>Пример методов Vue</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Обратить сообщение</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Привет, Vue!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>

Вывод

Изначально вы увидите "Привет, Vue!" и кнопку. Когда вы нажмете кнопку, сообщение изменится на "!euV ,olleH".

В этом примере:

Мы добавили кнопку с v-on:click="reverseMessage". Это говорит Vue, чтобы он вызвал метод reverseMessage, когда кнопка будет нажата.
В нашем инстансе Vue, мы добавили объект methods с функцией reverseMessage.
Функция разбивает сообщение на массив символов, reverses его и объединяет обратно в строку.
Мы используем this.message, чтобы получить доступ и изменить свойство message данных.

Жизненные циклы

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

Пример

<!DOCTYPE html>
<html>
<head>
<title>Хуки жизненного цикла Vue</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Привет, Vue!'
},
created: function() {
console.log('Инстанс Vue создан!')
},
mounted: function() {
console.log('Инстанс Vue смонтирован в DOM!')
this.message = 'Добро пожаловать в Vue!'
}
})
</script>
</body>
</html>

Вывод

В браузере вы увидите "Добро пожаловать в Vue!". В консоли вы увидите два сообщения:

Инстанс Vue создан!
Инстанс Vue смонтирован в DOM!

Вот что происходит:

Хук created выполняется, когда создается инстанс Vue. Мы логируем сообщение в консоль.
Хук mounted выполняется, когда инстанс Vue монтируется в DOM. Мы логируем другое сообщение и изменяем свойство message данных.

Эти хуки都非常 полезны для выполнения кода на конкретных точках жизненного цикла вашего приложения.

Свойства и методы инстансов Vue

Инстансы Vue также приходят с内置ными свойствами и методами. Давайте посмотрим на несколько:

Пример

<!DOCTYPE html>
<html>
<head>
<title>Свойства и методы инстансов Vue</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="updateMessage">Обновить сообщение</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Привет, Vue!'
},
methods: {
updateMessage: function() {
this.$data.message = 'Сообщение обновлено!'
console.log(this.$el)
this.$nextTick(function() {
console.log('DOM обновлен!')
})
}
}
})

console.log(app.$data)
</script>
</body>
</html>

В этом примере:

Мы используем this.$data, чтобы получить доступ к объекту данных напрямую.
Мы используем this.$el, чтобы логировать корневой DOM-элемент инстанса Vue.
Мы используем this.$nextTick, чтобы выполнить функцию после обновления DOM.
Вне инстанса Vue, мы можем получить доступ к его свойствам, используя app.$data.

Вот таблица некоторых часто используемых свойств и методов инстансов Vue:

Свойство/Метод	Описание
$data	Объект данных, который отслеживает Vue инстанс
$el	Элемент, которым управляет Vue инстанс
$watch	Наблюдать за изменениями свойства инстанса Vue
$set	Установить свойство на объект, инициируя обновление视图
$nextTick	Отложить выполнение回调а до следующего цикла обновления DOM

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

Надеюсь, это введение в инстансы Vue было полезно! Помните, что обучение кодированию resembles обучение новому языку - это требует времени и практики. Не расстраивайтесь, если вы не понимаете все сразу. Продолжайте экспериментировать, продолжайте программировать и, самое главное, продолжайте наслаждаться! До свидания в следующем уроке!

Credits: Image by storyset