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 в настоящее время:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2. Создайте объект Vue.
Теперь нам нужно создать объект Vue внутри файла index.html. Он создается под тегом скрипта ‹script› ‹/script›.
Его можно создать:
new Vue();
Полный синтаксис ниже:
<script>
new Vue({
el: ,
data: {
},
methods: {
}
});
</script>
new Vue - это экземпляр Vue. Мы можем получить доступ к таким свойствам, как el, данные, методы и т. Д., Чтобы быть с 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 есть встроенное свойство под названием «данные». Нам нужно зарегистрировать это здесь и использовать имя в 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, который преобразует строку в заглавные буквы. Здесь следует отметить важный момент: мы можем получить доступ к свойству data с помощью ключевого слова this. Таким образом, к значению, объявленному в свойстве data, можно получить доступ, используя 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 в следующих уроках.
