Создадим html файл и подключим vue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
</body>
</html>
Создадим элемент станицы:
<div class="">
<div id="exp">
{{message}}
</div>
</div>
и привяжем к нему vue:
<script>
new Vue({
el: '#exp',
data: {
message: 'Этот идентификатор под упавлением vue',
}
})
</script>
Теперь внутри блока с id exp будет выводится сообщение: Этот идентификатор под управлением vue.
Присвоим переменной наш объект класса vue:
var app = new Vue({
el: '#exp',
data: {
message: 'Этот идентификатор под упавлением vue',
}
})
Теперь в консоли браузера можно обратиться к этому объекту и изменить его свойство message:
app.message='Это новое свойство'
Данные в браузере должны измениться.
Директивы
Атрибуты
Изменим наш код js:
<div id="exp" :title="title_message + ' атрибут'">
{{message}}
</div>
И js код:
<script>
var app = new Vue({
el: '#exp',
data: {
message: 'Этот идентификатор под упавлением vue',
title_message: 'Аттрибут message из Vue',
}
})
</script>
Здесь мы привязали атрибут title к vue и заполнили его содержимое: title_message + ‘ атрибут’ , где title_message заполнился из объекта Вью, а также использовали js-вское сложение строк и добавили строку ‘ атрибут’.
Условия
Добавим в html код:
<div id="exp" :title="title_message + ' атрибут'">
{{message}}
<h1 v-if="status">Это верно!</h1>
<h1 v-else>Это ложно!</h1>
</div>
И в js:
<script>
var app = new Vue({
el: '#exp',
data: {
message: 'Этот идентификатор под упавлением vue',
title_message: 'Аттрибут message из Vue',
status: true,
}
})
</script>
В зависимости от значения переменной status выведется блок v-if или v-else. При чем эти блоки должны идти друг за другом.
Еще один пример. HTML:
<div id="exp" :title="title_message + ' атрибут'">
{{message}}
<h1 v-if="status == 1">Статус равен 1</h1>
<h1 v-else-if="status == 2">Статус равен 2</h1>
<h1 v-else>Статус равен {{status}}</h1>
</div>
JS:
var app = new Vue({
el: '#exp',
data: {
message: 'Этот идентификатор под упавлением vue',
title_message: 'Аттрибут message из Vue',
status: 5,
}
})
Также возможно ставить такие условия:
status != 1 !status status && 1+2 == 3 status+2 == 5 || 1+2 == 3
и разные другие.
Обертка — тэг template
В обертку можно заключать куски кода:
<template v-if="status == 1">
<h1>Статус равен 1</h1>
<h1>Статус равен 2</h1>
</template>
<template v-else-if="status == 2">
<h1>Статус равен {{status}}</h1>
</template>
Сам тэг teplate не будет отображаться на странице.
Скрытие/показ элементов — атрибут v-show
<template v-show="status == 2">
<h1>Статус равен {{status}}</h1>
</template>
Если v-show = true, то элемент показывается. В обратном случае — нет.
Генерирование значений атрибутов
Классы
HTML:
<div class="class-default list" :class="{ active: isActive, 'btn-success': isBtn }">
Новый блок
</div>
В зависимости от значения свойства isActive, класс active добавляется или нет. То же и с классом btn-success. А классы class-default и list будут всегда.
Тернарное условие
<div class="class-default list" :class="[isActive ? 'btn-success btn-danger' : 'btn-warning', isBtn ? 'btn-dark' : 'btn-light', 'btn']">
Новый блок
</div>
Класс btn из оператора и классы class-default list будут отображены в любом случае. В остальном, думаю все понятно.
Стили
<div :style="{ color: 'red', margin: vMargin + 'px'}">
Новый блок 2
</div>
margin изменяется в зависимости от свойства vMargin.
JS:
var app = new Vue({
el: '#exp',
data: {
message: 'Этот идентификатор под упавлением vue',
title_message: 'Аттрибут message из Vue',
status: 3,
isActive: false,
isBtn: true,
vMargin: 300,
}
})
Генерация списков
JS:
var app = new Vue({
el: '#exp',
data: {
list: ['один', 'два', 'три'],
users: [
{id: 1, 'name': 'Иван'},
{id: 2, 'name': 'Сергей'}
]
}
})
Выведем массив list:
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
Массив list c номерами индексов:
<ul>
<li v-for="(item, index) in list">index {{index}}: {{ item }}</li>
</ul>
Ассоциативные массивы
Выведем массив users:
<ul>
<li v-for="user in users">{{user.id}}. {{user.name}}</li>
</ul>
Выведем таблицу с данными из массива users:
<table>
<thead border="1">
<tr>
<th>ID</th>
<th>Имя</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
</tr>
</tbody>
</table>
Функции и методы
Объявление метода(функции)
var app = new Vue({
el: '#exp',
data: {
list: ['один', 'два', 'три'],
users: [
{id: 1, 'name': 'Иван'},
{id: 2, 'name': 'Сергей'}
]
}, methods: {
namefunction() {
alert ("Run namefunction");
},
namefunction2: function() {
alert ("Run namefunction2");
}
}
})
В methods два примера задания функции.
Обработка событий
https://ru.vuejs.org/v2/guide/events.html
<table @click="namefunction2">
Здесь по клику вызывается наша функция. Также можно выполнять логику по клику:
<table @click="users[0].id = 20">
По клику на table меняется свойство users[0].id. Но так делать не рекомендуется. Запишем тоже через функцию:
}, methods: {
namefunction() {
this.users[0].id = 20;
},
Жизненный цикл объекта
https://ru.vuejs.org/v2/guide/instance.html
Хук created (после создания экземпляра):
<div class="">
<div id="exp">
<button @click="high()">Counter: {{counter}}</button>
</div>
</div>
<script>
var app = new Vue({
el: '#exp',
data: {
counter: 1,
},
created: function () {
this.counter = 3;
this.high();
},
methods: {
high() {
this.counter++;
}
}
})
</script>
Здесь свойству counter задается значение 1, потом после создания объекта counter присваивается значение 3 и увеличивается на 1 функцией high().
Асинхронные запросы
Подключим библиотеку axios:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Запишем код:
<div>
<div id="exp">
<button @click="getHashtags">Получить тэги</button>
<ul>
<li v-for="hashtag in hashtags">{{hashtag}}</li>
</ul>
<button @click="getCities">Получить города</button>
<ul>
<li v-for="city in cities">{{city.region}}: {{city.city}}</li>
</ul>
</div>
</div>
<script>
var app = new Vue({
el: '#exp',
data: {
hashtags: [],
cities: [],
url: {
'cities':
'https://dka-develop.ru/api?type=city',
'hashtags':
'https://dka-develop.ru/api?type=hashtag'
}
},
methods: {
getHashtags() {
axios.get(this.url.hashtags).then((response) => {
this.hashtags = response.data;
});
},
getCities() {
axios.get(this.url.cities).then((response) => {
this.cities = response.data;
});
}
}
})
</script>
Здесь по нажатию на кнопку «Получить тэги», мы получаем данные из ‘https://dka-develop.ru/api?type=hashtag’ и заполняем ими список.
По нажатию на кнопку «Получить городе», мы получаем данные из ‘https://dka-develop.ru/api?type=city’ и заполняем ими список.
Двунаправленное связывание (метод v-model)
<div id="exp">
<input type="text" v-model="textSearch">
</div>
<script>
var app = new Vue({
el: '#exp',
data: {
textSearch: '',
},
})
</script>
v-model связывает input поле cо свойством textSearch. То есть при изменении текста в input, изменяется и переменная textSearch в объекте Vue, и наоборот.
Опция «Наблюдатель (watch)»
<div>
<div id="exp">
<h1>{{textSearch}}: {{textSearch.length}}</h1>
<input type="text" v-model="textSearch">
</div>
</div>
<script>
var app = new Vue({
el: '#exp',
data: {
textSearch: '',
},
watch: {
textSearch: function() {
if (this.textSearch.length > 3) {
this.textSearch = 'Длина поля больше 3 символов. Больше заполнять нельзя'
}
}
}
})
</script>
Здесь при введении текста в поле input, в h1 отображается текст формы и его длина. А при превышении длины текста 3 символов, выводится ‘Длина поля больше 3 символов. Больше заполнять нельзя’. За это отвечает директива watch.