|
Урок 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, методы, свойстваЧитайте также:
|
|
| © upread.ru 2013-2023 При перепечатке активная ссылка на сайт обязательна. |
