Vue.js - это фреймворк Javascript для создания пользовательского интерфейса веб-сайтов. Он во многом напоминает Angular, а также имеет определенное концептуальное сходство с React.



Экземпляр Vue - Введение в Vue.js | Vue Mastery
В этом уроке рассказывается, как получить данные из JavaScript для отображения в HTML. www.vuemaster.com



Вы можете загрузить vue.js, чтобы включить его в свой проект, или вы можете загрузить его с компакт-диска:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

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

Начнем с того, что назовем его с помощью простейшего объекта, который только можно вообразить.

new Vue({
    el: '#main'
});

Свойство el сообщает Vue, в каком элементе будет отображаться ваш пользовательский интерфейс. Vue автоматически найдет элемент, соответствующий селектору, и сохранит его в свойстве вашего экземпляра с именем $el. Содержимое элемента будет рассматриваться как шаблон и отображаться автоматически.

<!doctype html>
<html>
<head>
    <title>My Vue.js App</title>
</head>
<body>
    <div id="main">
        <p>{{ 'Hello World!' }}
        <p>2 + 2 = {{ 2 + 2 }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="script.js"></script>
</body>
</html>

Учитывая этот HTML и предполагая, что вызов конструктора Vue выше помещен в script.js, видимый результат будет:

Выражения, содержащиеся в {{ и }}, автоматически оцениваются и обрабатываются. Нет необходимости вручную компилировать шаблон, вызывать его и вставлять результат в DOM. Это все сделано за вас.

Вы можете указать данные, которые хотите отобразить в пользовательском интерфейсе, добавив свойство data к объекту, который вы передаете в Vue. Все указанные таким образом свойства будут доступны для использования в вашем HTML.

<div id="main">
    <h1>{{ heading }}</h1>
</div>
new Vue({
    el: '#main',
    data: {
        heading: 'My Vue App'
    }
});

Поля, указанные вами в объекте data, будут скопированы в ваш экземпляр представления. Конечно, экземпляр Vue - это просто объект Javascript, и вы можете напрямую добавлять к нему свойства обычным способом. Однако, если вы добавите их через data, они будут реактивными свойствами. Если их значения изменяются в течение срока службы вашего приложения, пользовательский интерфейс автоматически обновляется, чтобы отразить это изменение. По этой причине вы должны использовать data для добавления любого свойства, которое вы используете в своем HTML. Если у вас нет значения свойства во время вызова конструктора Vue, вам следует использовать значение-заполнитель, например пустую строку или null.

Синтаксис двойной фигурной скобки работает для текстовых узлов, но если вы хотите использовать поля данных в атрибутах HTML, вы должны сделать что-то немного другое.

<div id="main">
    <h1 v-bind:class="headingClassName">{{ heading }}</h1>
</div>
new Vue({
    el: '#main',
    data: {
        heading: 'My Vue App',
        headingClassName: 'heading'
    }
});

v-bind - это то, что называется директивой, специальным атрибутом, который начинается с v- и имеет в качестве значения выражение Javascript. Существует множество директив, которые понимает Vue (также можно создать свои собственные). Например, v-if можно использовать для условного отображения содержимого, а v-for можно использовать для отображения списков элементов.

<div id="main">
    <ul v-if="cities.length > 0">
        <li v-for="city in cities">{{city.name}}, {{city.country}}
    </ul>
</div>
new Vue({
    el: '#main',
    data: {
        cities: [
            {
                name: 'Berlin',
                country: 'Germany'
            },
            {
                name: 'Istanbul',
                country: 'Turkey'
            },
            {
                name: 'Paris',
                country: 'France'
            }        ]
    }
});

Директива v-model используется в полях формы для двусторонней привязки данных. В поле формы будет отображаться значение указанного свойства. Когда пользователь обновляет значение поля формы, значение свойства обновляется автоматически.

<div id="main">
    <h1>Hello, <span>{{greetee || 'World'}}!</h1>
    <input type="text" v-model="greetee">
</div>
new Vue({
    el: '#main',
    data: {
        greetee: ''
    }
});

Директива v-on используется для добавления обработчиков событий к элементам. Вы можете добавить к своим Vue методы экземпляра, которые будут вызываться в обработчиках событий (или где-либо еще), добавив свойство methods к объекту, который вы передаете конструктору.

<div id="main">
    <span v-on:mouseover="emphasize" v-on:mouseout="deemphasize">
        Hello, World!
    </span>
</div>
new Vue({
    el: '#main',
    methods: {
        emphasize: function(e) {
            e.target.style.textDecoration = 'underline';
            this.count = this.count ? this.count + 1 : 1;
        },
        deemphasize: function(e) {
            e.target.style.textDecoration = '';
            this.logCount();
        },
        logCount: function() {
            console.log(this.count);
        }
    }
});

Жизненный цикл

Vue экземпляров проходят несколько этапов своей жизни. Они создаются, они отображают контент в DOM, обновляют этот контент, когда это необходимо, и, наконец, они уничтожаются. Vue позволяет вам определять, когда возникают эти моменты, и предпринимать соответствующие действия, когда они возникают. Он делает это с помощью ловушек жизненного цикла - методов, которые вы можете добавить в свой Vue экземпляр, которые будут автоматически вызываться при возникновении события жизненного цикла. Например, если вы хотите что-то сделать при создании вашего Vue экземпляра, вы должны добавить свойство created к объекту, который вы передаете в Vue, и установить его для функции, которая делает то, что вы хотите.

Хук жизненного цикла mounted запускается, когда Vue обработал ваш el и добавил свойство $el в ваш экземпляр. Эту ловушку жизненного цикла удобно использовать для выполнения HTTP-запросов для данных, которые вы хотите отобразить.

Ajax с аксиомами

Vue.js не имеет встроенных средств для выполнения запросов ajax. Мы будем использовать основанную на обещаниях библиотеку под названием axios, чтобы удовлетворить эту потребность.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios довольно прост в использовании. У него есть метод get, который выполняет запросы GET, и метод post для выполнения запросов POST. Вы передаете URL-адрес в качестве первого аргумента обеим функциям. Вы можете передать объект в качестве второго аргумента post, и он будет преобразован в тело запроса JSON.

Когда обещание о том, что возвращаются get и post, выполняется, значение, которое функция, которую вы передали then, получит, будет объектом, представляющим полученный ответ. У него множество свойств, таких как status и headers. Обычно вас больше всего интересует свойство data, которое содержит тело ответа. Тела ответов JSON будут проанализированы автоматически.

Спасибо за чтение! Нажмите, чтобы увидеть другие статьи автора:



Как установить Nightwatch.js? Первый тест с Nightwatch.js
В следующей статье я остановлюсь на том, как установить Nightwatch.js, что вы должны знать и как работать с… средой. com





Процесс тестирования программного обеспечения и уровни тестирования
Процессы тестирования программного обеспечения medium.com





Тестирование программного обеспечения и методологии
В своей серии« Тестирование программного обеспечения я попытаюсь обсудить, почему необходимо тестирование, как эти тесты выполняются, как… средний уровень. com »