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

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. Измените данные при нажатии кнопки.

1. Создайте файл HTML и свяжите Vue через CDN

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

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

Теперь добавьте 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. Свойства будут объяснены ниже.

3. Свяжите шаблон HTML с объектом 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}}

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:

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

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

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