Як реалізувати простий додаток для зміни заголовка за допомогою Vue.js

Vue.js - це прогресивна структура JavaScript. Він має безліч функцій, включаючи компоненти, візуалізацію та маршрутизацію. Аргумент Vue проти React має конкурентний характер. У них обох є плюси і мінуси у своїй галузі.

Я створив просту програму JavaScript у Vue за допомогою CDN (мережа доставки вмісту). Додаток має заголовок, який перетворюється у верхній регістр після натискання кнопки. Я знаю, що це простий додаток. Але ми можемо навчитися багатьом простим речам, наприклад:

  • CDN для Vue
  • Об'єкти Vue
  • пов'язуючи атрибут з Vue Object
  • визначення властивості даних
  • визначення методу за допомогою Vue
  • виклик методу Vue через слухачі

Гаразд, давайте забруднимо руки!

Я великий шанувальник занурення методу в шматки, тому ми будемо дотримуватися того самого підходу і тут.

  1. Створіть файл HTML і зв’яжіть Vue через CDN.
  2. Створіть об'єкт Vue.
  3. Пов’яжіть шаблон HTML з об’єктом Vue.
  4. Створіть властивість даних.
  5. Створіть метод в об'єкті Vue.
  6. Змінюйте дані, натискаючи кнопку.

1. Створіть файл HTML і зв’яжіть Vue через CDN

Спочатку створіть файл з назвою index.html. Це наш основний гравець. Файл index.html містить як частину шаблону HTML, так і об'єкт Vue.

Тут я використовую код Visual Studio.

Тепер додайте CDN до index.html. Ми можемо використовувати або розробницьку, або виробничу версію. Але непогано буде використовувати версію розробника для попередження та помилок. Наразі для версії CDN для розробки є:

2. Створіть об’єкт Vue

Тепер нам потрібно створити об’єкт Vue всередині файлу index.html. Він створюється під тегом скрипта.

Його можна створити:

new Vue();

Весь синтаксис наведено нижче:

new Vue({el: ,
data: {
},
methods: {
}
});

new Vueє екземпляром Vue. Ми можемо отримати доступ до таких властивостей, як el, дані, методи тощо, щоб бути з Vue. Властивості будуть пояснені нижче.

3. Пов’яжіть шаблон HTML з об’єктом Vue

Як ми знаємо, Vue має властивість під назвою "el". Ця властивість пов'язує шаблон HTML з об'єктом Vue. Для цього всі шаблони HTML повинні знаходитися в одному div з ідентифікатором. Для цієї демонстрації ми можемо використовувати ідентифікатор app. До файлу index.html ми додали наступне:

Welcome to title changer

Тепер додайте ідентифікатор програми до об’єкта Vue.

new Vue({
el: '#app',
});

Тож посилання матиме успіх.

4. Створіть властивість даних

Тепер ми не хочемо, щоб заголовок “Ласкаво просимо до зміни заголовка” був статичним текстом. Ми повинні мати можливість відобразити значення з властивості даних Vue. Для цього у 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, який перетворює рядок на великі літери. Важливим моментом тут є те, що ми можемо отримати доступ до властивості даних за допомогою thisключового слова. Отже, значення, яке оголошено у властивості data, можна отримати за thisдопомогою методів.

6. Змінюйте дані, натискаючи кнопку

Тепер ми просто викликаємо метод натисканням кнопки. Просто як це.

Для цього нам потрібно створити тег кнопки.

click to change to upcase

Щоб прив'язати кнопку до методу, нам потрібно використовувати обробник подій, коли натискаємо кнопку. Vue надає вбудований прослуховувач з назвою v-on.

Ось синтаксис:

v-on:click="call Action or Method"

Ми можемо поєднувати з:

click to change to upcase

Або ми можемо використовувати короткий синтаксис, як показано нижче:

click to change to upcase

Це воно. Все зроблено

Перш ніж натиснути кнопку, заголовок HTML знаходиться нижче:

Після натискання він перетворюється у верхній регістр.

Це все. Коментуйте, якщо у вас є якісь проблеми чи запитання. Я додав деталі репо нижче.

посилання на github. У найближчі уроки я оновлю деякі додаткові функції Vue.