Как реализовать простую программу смены названия с помощью Vue.js

1656511691 kak realizovat prostuyu programmu smeny nazvaniya s pomoshhyu vuejs

автор Ануб Бава

ngzdijfJdisPUgTNa4owuJucvvHxJ0-6eHI9
авторское право vuejs.org

Vue.js – это прогрессивный фреймворк JavaScript. Он имеет множество функций, включая компоненты, визуализацию и маршрутизацию. Аргумент Vue против React носит конкурентный характер. Они оба имеют как плюсы, так и минусы в своей области.

Я создал простую JavaScript в Vue с помощью CDN (сети доставки содержимого). Программа имеет название, которое преобразуется в верхний регистр по нажатию кнопки. Я знаю, что это простая программа. Но благодаря этому мы можем научиться многим простым вещам, например:

  • CDN для Vue
  • Объекты Vue
  • связывание атрибута с объектом Vue
  • определение свойства данных
  • определение метода с помощью Vue
  • вызов метода Vue с помощью слушателей

Ладно, испачкаем руки!

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

  1. Создайте файл HTML и свяжите Vue через CDN.
  2. Создайте объект Vue.
  3. Связать шаблон HTML с объектом Vue.
  4. Создайте свойство данных.
  5. Создайте способ в объекте Vue.
  6. Измените данные при нажатии кнопки.

Сначала создайте файл под названием index.html. Это наш главный игрок. Файл index.html содержит как часть шаблона HTML, так и объект Vue.

Я использую код Visual Studio здесь.

Vne3w5FAeTV7vb9-Vs4IKCNltCqYeirJ-LDP

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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. Создайте объект Vue

Теперь нам нужно создать объект Vue в файле index.html. Он создается под тегом script .

Его можно создать с помощью:

new Vue();

Полный синтаксис приведен ниже:

<script>new Vue({el: ,
data: {
},
methods: {
}
});</script>

new Vue является экземпляром Vue. Мы можем получить доступ к свойствам, таким как el, data, методы и т.д., чтобы быть с Vue. Свойства будут объяснены ниже.

Как мы знаем, Vue обладает свойством под названием «el». Это свойство связывает шаблон HTML с объектом Vue. Для этого все шаблоны HTML должны находиться под одним div с идентификатором. Для этой демонстрации мы можем использовать идентификатор app. Мы добавили следующее в файл index.html:

<div id='app'>
<h3> Welcome to title changer</h3>
</div>

Теперь добавьте идентификатор программы к объекту Vue.

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

Поэтому ссылка будет успешной.

4. Создайте свойство данных

Теперь мы не хотим, чтобы заголовок «Добро пожаловать в смену заголовков» был статическим текстом. Нам нужно иметь возможность отобразить значение свойства данных Vue. Для этого Vue обладает встроенным свойством под названием «data». Нам нужно зарегистрировать это здесь и использовать имя в HTML, как показано ниже:

new Vue({
el: '#app',
data: {
tile: 'Welcome to title changer'
},
});

Теперь у <Тег h3> можно обновить с помощью двойных фигурных скобок, как интерполяция в Ruby. Значение будет:

{{title}}
SG2hAWsjA7L39a56BTzsmt6c7NM7vCowW-i9

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 ключевое слово. Таким образом, к значению, объявленному в свойстве данных, можно получить доступ с помощью this в способах.

6. Измените данные при нажатии кнопки

Теперь мы просто вызываем метод при нажатии кнопки. Просто как это.

Для этого нам нужно создать кнопочный тег.

<button>click to change to upcase</button>

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

Вот синтаксис:

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

Мы можем комбинировать с:

<button v-on:click="changeTitle">click to change to upcase</button>

Или мы можем использовать короткий синтаксис, как показано ниже:

<button @click="changeTitle">click to change to upcase</button>

Это оно. Готово

Прежде чем нажать кнопку, ниже приведен заголовок HTML:

wrxsJfTfPdMx7khAWwAdvtJHj98kOvXbnGv6

После нажатия он преобразуется в верхний регистр.

l7mtoWPLJJdMNRTxP9yBGwJVTp7zBFJQeTfA

Это все. Прокомментируйте, если у вас возникли проблемы или вопросы. Я добавил детали репо ниже.

ссылку на github. На следующих уроках я обновлю некоторые расширенные функции Vue.

Добавить комментарий

Ваш адрес email не будет опубликован.