#1 – изучаем Vue.js

Создадим 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.

0 0 голос
Рейтинг статьи
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x