Определите логику вашего компонента Vue с помощью объекта Options.

Vue.js заслужил репутацию прогрессивного JavaScript-фреймворка. Вы можете использовать Vue.js для создания одностраничных приложений (SPA) или разработки определенных пользовательских интерфейсов.

Здесь вы изучите основы Vue.js, в том числе узнаете, как создать компонент Vue и работать с объектом параметров для отображения динамических данных.

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

<сценарийисточник="">сценарий>

Использование ссылки CDN — отличный вариант для улучшения статического HTML или добавления функциональности вашему приложению.

Однако вам необходимо установить Vue.js через npm, чтобы использовать больше его расширенных функций, таких как синтаксис однофайлового компонента (SFC), который полезен при создании полноценных приложений Vue.

Создание Vue-приложения

instagram viewer

Доступ к библиотеке Vue через ссылку CDN предоставляет объект Vue, включая .создать приложение () метод.

Как следует из названия, вы можете создать приложение Vue, используя этот метод.

Например:

HTML>
<HTMLязык="ан">
<голова>
<заголовок>Vue-приложениезаголовок>
<сценарийисточник=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
голова>
<тело>
<сценарий>
 константное приложение = Vue.createApp();
сценарий>
тело>
HTML>

Здесь созданное приложение хранится в приложение переменная. После создания экземпляра приложения вы должны визуализировать его с помощью .устанавливать() метод. Этот метод сообщает, где монтировать приложение в Объектная модель документа (DOM).

Вот так:

HTML>
<HTMLязык="ан">
<голова>
<заголовок>Vue-приложениезаголовок>
<сценарийисточник=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
голова>
<тело>
<дивидентификатор="приложение">див>
<сценарий>
 константное приложение = Vue.createApp();
 app.mount("#приложение");
сценарий>
тело>
HTML>

Чтобы использовать Vue .устанавливать() метод, вы должны указать элемент DOM или селектор в качестве аргумента. В этом примере мы смонтировали приложение Vue, используя элемент DOM с #приложение ИДЕНТИФИКАТОР.

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

Последним шагом создания приложения Vue является вызов .устанавливать() после завершения всех настроек приложения.

Объект параметров в Vue

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

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

Некоторые из часто используемых свойств в Параметры объект:

  • данные: это свойство определяет объект данных для приложений Vue. Это функция, которая возвращает объект, содержащий свойства данных и их начальные значения.
  • методы: методы Свойство объекта Options выполняет жизненно важные функции для включения динамического рендеринга.
  • шаблон: это свойство определяет шаблон HTML для экземпляра или компонента Vue. Это строка, содержащая HTML-разметку, которую может проанализировать компилятор шаблонов Vue.

Обратите внимание, что при использовании свойства шаблона компилятор Vue будет отображать только содержимое, определенное в шаблоне.

Вот пример приложения Vue с данные, методы, и шаблон характеристики:

HTML>
<HTMLязык="ан">
<голова>
<заголовок>Vue-приложениезаголовок>
<сценарийисточник=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
голова>
<тело>
<дивидентификатор="приложение">
<h1 @нажмите="обратное сообщение" >{{ текст }}h1>
див>
<сценарий>
константа приложение = Vue.createApp({
// шаблон: '
Добро пожаловать в ваше приложение Vue
',
 данные() {
возвращаться {
 текст: «Это ваше приложение Vue»
 };
 },
 методы: {
 обратное сообщение () {
этот.текст = этот.текст.разделить('').Обратный().Присоединиться('')
 }
 }
 });
приложение.устанавливать("#приложение");
сценарий>
тело>
HTML>

Эта программа изображает базовое приложение Vue, которое отображает текст «Это ваше приложение Vue» с использованием текстовой интерполяции и позволяет пользователям щелкнуть по нему, чтобы изменить сообщение.

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

При запуске этой программы созданное приложение Vue будет выглядеть так:

Щелчок по тексту перевернет его.

Обратите внимание, что программа закомментировала свойство шаблона, чтобы позволить отображать содержимое в приложении Vue. Если оставить без комментариев, это приложение Vue покажет только свойство шаблона:

Есть и другие свойства, такие как реквизит и вычисленный, который вы также можете использовать для создания мощных и гибких приложений Vue при настройке объекта параметров.

Интерполяция текста в Vue

Интерполяция текста в Vue — это функция, позволяющая динамически привязывать данные к элементам HTML. Другими словами, это позволит вам напрямую выводить значение свойств данных экземпляра Vue в HTML.

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

Например:

HTML>
<HTMLязык="ан">
<голова>
<заголовок>Vue-приложениезаголовок>
<сценарийисточник=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
голова>
<тело>
<дивидентификатор="приложение">
<h1>{{ сообщение }}h1>
<п>Добро пожаловать {{имя}}п>
див>
<сценарий>
 константное приложение = Vue.createApp({
 данные() {
 возвращаться {
 сообщение: «Это ваше приложение Vue.»,
 название: «Благородный»,
 };
 },
 });
 app.mount("#приложение");
сценарий>
тело>
HTML>

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

Вы также можете отобразить результат вызова метода или выполнить основные операции JavaScript в двойных фигурных скобках:

HTML>
<HTMLязык="ан">
<голова>
<заголовок>Vue-приложениезаголовок>
<сценарийисточник=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
голова>
<тело>
<дивидентификатор="приложение">
<h1>{{ сообщение }}h1>
<h3>Добро пожаловать {{ name.toUpperCase() }}h3>
<п>В вашем имени есть {{ nameLength() }} букв.п>
див>
<п>не здесьп>
<сценарий>
 константное приложение = Vue.createApp({
 данные() {
 возвращаться {
 сообщение: «Это ваше приложение Vue»,
 название: "Благородный Окафор",
 };
 },
 методы: {
 имядлина() {
 вернуть это.имя.длина - 1;
 },
 },
 });
 app.mount("#приложение");
сценарий>
тело>
HTML>

В этом примере приложение Vue имеет данные объект, содержащий два свойства: сообщение и имя.

Внутри приложения Vue три HTML-элемента отображают данные с использованием экземпляра Vue. h1 элемент отображает значение сообщение имущество, в то время как h3 элемент отображает значение имя собственность с toUpperCase() применяемый к нему метод.

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

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

Это приложение Vue демонстрирует, как привязывать данные к элементам HTML с помощью интерполяции текста, а также как определять и вызывать методы в экземпляре Vue.

Создайте свой интерфейс с помощью Vue

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