На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Урок 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, методы, свойства

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


Урок 2. Комментарии JavaScript
Роботы, "заменяющие" людей, кто следующий?


© upread.ru 2013-2023
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.