Урок 4. Введение в данные, методы и свойства Vue

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

Для отображения динамической информации нам необходимо:

Место для хранения данных, которые мы будем отображать
Синтаксис для отображения этой информации

Давайте рассмотрим первый пункт.

Как уже упоминалось, все, что нужно нашему приложению Vue, должно быть предоставлено в объекте options при создании приложения Vue. Поэтому все наши динамические данные должны быть указаны в нашем объекте options в свойстве, называемом data. На прошлом уроке мы использовали перменную title, теперь добавим к ней counter и username:

const App = {
	data() {
		return {
			title: 'Заголовок',
			counter: 0,
			username: 'Yurii'
		}
	}
}

Vue.createApp(App).mount('#app')

В этом примере мы добавили свойство data в наш объект options. Приложения должны отображать много динамических данных. Чтобы учесть это, значение .data также является объектом. Каждый фрагмент данных будет добавлен в объект .data в виде пары ключ-значение. В этом случае мы добавили только один фрагмент данных под названием имя пользователя со значением "Yurii".

Методы

Методы - это раздел в объекте Vue. В нем представлены все методы экземпляра Vue. В него можно записать все виды функций. Чтобы взаимодействовать с этими объектами данных, вы должны написать this. перед ним:

const App = {
	data() {
		return {
			title: 'Заголовок',
			counter: 0,
			username: 'Yurii'
		}
	},
	methods: {
		toUpperCase() {
			return item.toUpperCase()
		}
	}
}

Vue.createApp(App).mount('#app')

Чтобы вызвать методы, нам нужно добавить после них круглые скобки.

<pre class="prettyprint">
<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Vue тест upread.ru</title>
	</head>
	<body>
		<div id="app">
		<h1>{{ title }}</h1>
		{{toUpperCase()}}
		</div>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="app.js"></script>
	</body>
</html>

Вычисляемые свойства (Computed)

Вычисляемые свойства - это также объекты Javascript, как и данные и методы, а также позволяет нам хранить свойства, но это не непосредственно данные, а функция. Разница в том, что нам не нужно заключать круглые скобки в изогнутые скобки. И это важно иметь в виду: все, что хранится в вычисляемом свойстве, можно использовать так же, как вы используете данные в объекте данных!

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

const App = {
	data() {
		return {
			title: 'Заголовок',
			counter: 0,
			username: 'Yurii'
		}
	},
	methods: {
		toUpperCase() {
			return item.toUpperCase()
		}
	},
	computed: {
		toUpperCase() {
			return item.toUpperCase()
		}
	}
}

{{ toUpperCase }}

Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

статьи IT, Уроки по Vue, JavaScript, методы, свойства

Читайте также:

Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.

Помогите сайту

Программирование up

Мои услуги