Приступая к работе с Vue.js

3 мин

Чтобы начать работу с Vue.js, необходимо установить платформу, создать приложение Vue и зарегистрировать его на странице. Регистрация указывает странице, как использовать приложение.

Итак, приступим.

Добавление Vue.js на страницу

Добавить Vue.js в приложение можно несколькими способами. В этом модуле вы добавите script элемент для импорта Vue из сети доставки содержимого (CDN). С помощью CDN можно добавлять Vue в существующие приложения, не переписывая их.

Чтобы добавить Vue на страницу с помощью CDN, добавьте следующий элемент script на эту страницу.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Этот элемент указывает браузеру запустить файл сценария, на который ссылается директива src. После выполнения сценария становятся доступными API-интерфейсы Vue.

Создать приложение

Все приложения Vue.js начинаются с создания объекта приложения. Приложение является центральным расположением для всех данных и методов, используемых приложением. Хотя объект приложения соответствует некоторым соглашениям, в целом это объект JavaScript.

Чтобы создать приложение Vue, вызовите метод createApp().

const App = Vue.createApp({
    // methods and content go here
});

Добавление данных

Теперь, когда вы создали приложение, вы можете добавить свойства, которые дают приложению больше возможностей. Важный метод, используемый большинством приложений data(). Vue.js использует этот метод для доступа к любой информации, которую необходимо сделать доступной для приложения.

Примечание.

Вы будете использовать метод data() в рамках этого модуля.

Все свойства внутри объекта, которые возвращает data(), являются динамическими. Vue.js автоматически обнаруживает любые изменения значений. Затем он обновляет соответствующие части экрана, используя обновленные сведения.

Создание объекта данных

Vue.js вызывает метод data(). В ответ Vue.js ожидает объект JavaScript.

В следующем примере возвращаемый объект содержит свойства firstName и lastName.

// a sample app object
const App = Vue.createApp({
    data() {
        return {
            firstName: 'Christopher',
            lastName: 'Harrison'
        };
    }
});

На этом этапе данные предоставляются, поэтому их можно отобразить для пользователя.

Подключение приложения

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

Для подключения приложения необходимо ссылаться на id обычного HTML-элемента.

<!-- the HTML element which will host our app -->
<div id='app'>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const App = Vue.createApp({
        data() {
            return {
                firstName: 'Christopher',
                lastName: 'Harrison'
            };
        }
    });
    // Registering and mounting our app
    App.mount('#app');
</script>

Во время выполнения содержимое элемента id= 'app' заменяется содержимым приложения Vue.js.

Отображение данных

Чтобы отобразить данные на странице, используйте синтаксис {{ }}, который иногда называется рулем. Внутри синтаксиса {{ }} можно предоставить любой код JavaScript, необходимый для доступа к информации, которую нужно отобразить.

Созданная ранее функция data() возвращает объект. Vue.js автоматически делает объект доступным, поэтому вам не нужно вызывать data().

Если необходимо отобразить имя, можно использовать синтаксис {{ firstName }}. В следующем примере показано полное приложение, которое может отображать lastName и firstName.

<!-- the HTML element which will host our app -->
<div id='app'>
    {{ lastName }}, {{ firstName }}
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const App = Vue.createApp({
        data() {
            return {
                firstName: 'Christopher',
                lastName: 'Harrison'
            };
        }
    });
    // Registering and mounting our app
    App.mount('#app');
</script>