Начать работу с 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.