Автор оригинала: FreeCodeCamp Community Member.
Anoob Bava
Vue.js – это прогрессивная структура JavaScript. Он имеет много функций, включая компоненты, рендеринг и маршрутизацию. Аргумент Vue VS React конкурентоспособна в природе. У них есть плюсы и минусы в их поле.
Я создал простое приложение JavaScript в Vue, используя CDN (сеть доставки контента). Приложение имеет заголовок, который преобразует в верхний регистр на кнопке нажатия. Я знаю, что это простое приложение. Но мы можем узнать много простых вещей через нее, как:
- CDN для Vue.
- Vue объекты
- Связывание атрибута к объекту Vue
- Определение свойства данных
- Определение метода с использованием Vue
- Вызов метода Vue через слушателей
Хорошо, давайте грязным руками!
Я большой поклонник дайвинга метода кусками, поэтому мы будем следовать тому же подходу здесь.
- Создайте HTML-файл и ссылку Vue через CDN.
- Создайте Vue объект.
- Ссылка HTML шаблон к объекту Vue.
- Создайте свойство данных.
- Создайте метод в объекте Vue.
- Измените данные при нажатии кнопки.
1. Создайте HTML-файл и ссылку Vue через CDN
Изначально создать файл под названием index.html. Это наш основной игрок. Файл index.html содержит как часть шаблона HTML, так и объект Vue.
Я использую код Visual Studio здесь.
Теперь добавьте CDN к Index.html. Мы можем использовать либо версию разработки или производства. Но будет хорошо использовать версию разработки для предупреждения и ошибок. Запись для версии разработки CDN в настоящее время:
2. Создайте Vue объект
Теперь, что нам нужно создать, – это Vue-объект внутри файла index.html. Он создан под тегом сценария .
Это может быть создано:
new Vue();
Весь синтаксис ниже:
Новый Vue является примером Vue. Мы можем получить доступ к свойствам, такими как EL, данные, методы и т. Д., чтобы быть с Vue. Свойства будут объяснены ниже.
3. Свяжите шаблон HTML к объекту Vue
Как мы знаем, Vue есть собственность под названием «EL». Это свойство ссылает на шаблон HTML к объекту Vue. Чтобы сделать это, все HTML-шаблоны должны быть под одним div с идентификатором. Для этой демонстрации мы можем использовать идентификатор приложение Отказ Мы добавили следующее в файл index.html:
Welcome to title changer
Теперь добавьте идентификатор приложения в объект VUE.
new Vue({el: '#app',
});
Так что ссылка будет успешным.
4. Создайте свойство данных
Теперь мы не хотим, чтобы заголовок «Добро пожаловать в Чейрежем заголовка» быть статическим текстом. Нам нужно иметь возможность отображать значение из свойства Vuue Data. Для этого Vue имеет встроенное свойство под названием «Данные». Нам нужно зарегистрировать это здесь и использовать имя в HTML, как показано ниже:
new Vue({el: '#app',
data: {tile: 'Welcome to title changer'
},
});
Сейчас в < H3> Тег может быть обновлен двойными фигурными брекетами, такими как интерполяция в Ruby. Значение будет:
{{title}}5. Создайте метод в Vue объекте
Vue имеет встроенное свойство, называемое «методами». Это свойство будет поддерживать методы, которые будут объявлены внутри объектов Vue.
Мы можем также использовать синтаксис ES6. Позвольте мне объяснить их обоих здесь.
methods: { changeTitle: function() {this.title = this.title.toUpperCase();
return this.title;
}
}
Формат ES6:
methods: { changeTitle() {this.title = this.title.toUpperCase();
return this.title;
}
}
ToupPercase () это просто метод JavaScript, который преобразует строку в заглавные буквы. Здесь можно отметить важный момент, мы можем получить доступ к свойству данных, используя это ключевое слово. Таким образом, значение, которое объявлено в свойстве данных, можно получить доступ с использованием это в методах.
6. Измените данные при нажатии кнопки
Теперь, что мы делаем, просто вызовите метод на нажатии кнопки. Просто как тот.
Для этого нам нужно создать тег кнопки.
Чтобы связать кнопку к способу, нам нужно использовать обработчик событий при нажатии кнопки. Vue предоставляет встроенный слушатель под названием V-на Отказ
Вот синтаксис:
v-on:click="call Action or Method"
Мы можем комбинировать с:
Или Мы можем использовать краткий синтаксис, как ниже:
Вот и все. Все сделано
Перед нажатием кнопки заголовок HTML ниже:
После нажатия он преобразуется в верхний регистр.
Вот и все. Комментарий Если у вас есть какие-либо проблемы или вопросы. Я приложил детали репо ниже.
Github Link Отказ Я буду обновлять с некоторыми расширенными функциями в Vue в предстоящих уроках.