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

Откройте компилятор по своему выбору для компиляции кода HTML и Javascript, такого как VScode, PyCharm, возвышенный текст и т. д.

Создайте файл HTML с именем index.html и файл Javascript с именем app.js.

index.html

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</head>
<body>
    <div id="vue_app">
        <p> {{ title }} </p>
    </div>
<script src="app.js">
</body>

app.js

new Vue{(
    el: "#vue_app",
    data:{
        title: "hello world!"
       }
)}

убедитесь, что index.html и app.js принадлежат одному и тому же каталогу

Теперь просто откройте index.html в любом браузере, и результат должен быть таким:

Поздравляем! Вы успешно выполнили первый проект с Vue.js.

Вы гений!

Давайте опишем, что здесь происходит!

Во-первых, давайте опишем файл index.html.

В разделе заголовка html-файла я просто добавил простой скрипт, такой как CDN. С ним я импортировал Vue.js, и теперь я уже могу использовать его и все его функции. Итак, вы заметите, что установка Vue.js — это довольно простой процесс.

если вы хотите узнать больше о процессе установки vue.js, нажмите здесь

В теге body html-файла я объявил тег div с идентификатором 'vue_app' внутри этого div Я объявил тег p для отображения текста в браузере! Тогда вы заметите здесь что-то новое, подобное этому {{ title }}! это данные пришли из vue.js с некоторым значением, которое мы показываем в браузере, вы ясно это поймете через несколько секунд.

Затем я импортировал свой пользовательский файл js с именем app.js, в котором я реализовал свой код Vue.js.

давайте опишем файл app.js.

Я создал новый экземпляр на основе этого с ключевым словом 'new', а затем 'Vue()'. Это дает новый экземпляр Vue, и экземпляры Vue, созданные таким образом, являются ядром каждого приложения Vue. У этих экземпляров есть одна основная задача — управлять собственным шаблоном кода, html-кодом, который они отображают на экране.

Затем я передал аргумент этой функции-конструктору. Аргументом является объект JavaScript.

Затем я использовал очень важное свойство, которое Vue.js распознает, свойство ‘el’. 'el' принимает строку в качестве значения, и с помощью этой строки я устанавливаю, какая часть моего html-кода здесь должна находиться под контролем этого экземпляра Vue. Я имею в виду, что затем я могу изменить его через этот экземпляр Vue.

Значение свойства el действует как селектор CSS. Итак, с помощью ‘#vue_app’ я выбираю элемент с id=‘vue_app’. Таким образом,‘.vue_app’ будет выбран первый элемент с class=’vue_app’

Поэтому, когда элемент был выбран с помощью 'el', весь элемент будет шаблоном этого экземпляра Vue.

Я использовал другое свойство Vue.js под названием data. Объект данных аналогичен объявлению переменных в других языках программирования, таких как javascript, python, java и т. д. Как и 'el', это не строка, а объект. все данные, которые вы хотите использовать в этом экземпляре Vue. Я создал данные с именем title, полностью на ваше усмотрение, а значением title является "hello world".

Теперь, пожалуйста, обратите внимание на эту часть, в разделе html вы нашли что-то новое, например {{ title }}. Давайте поймем, что это специальный синтаксис Vue.js распознает, двойные фигурные скобки (открывающие и закрытие). Между ними я могу просто написать заголовок, и Vue.js автоматически просмотрит этот объект данных.

Наконец, в выводе значение title присваивается тегу p, поэтому я вижу в браузере «hello world!». Все эти процессы и механизмы управляются Vue.js.

Помните важную вещь: ‘ new Vue()’ создает экземпляр Vue, а экземпляры Vue, созданные таким образом, являются ядром каждого приложения Vue.

Спасибо!