Vuejs-это фреймворк JavaScript в основном для создания пользовательских интерфейсов и одностраничных приложений. Это позволяет добавлять логику в HTML -код и позволяет легко связывать данные JavaScript с HTML -контентом. В этом уроке мы увидим основные функции, чтобы вы начали создавать прохладные веб -приложения. Если вы открываете Vue в первый раз, я призываю вас попробовать примеры, представленные в этой статье. Единственный способ учиться – практиковать для себя!
Чтобы включить VUE в свой проект, просто добавьте следующий тег сценария в раздел головы вашего документа.
Затем добавьте div с идентификатором приложение В разделе тела это будет содержать все ваше веб -приложение.
Затем добавьте еще один тег сценария, где будет ваш код JavaScript. Мы создадим приложение переменная для настройки VUE.
Любые данные, которые вы хотите использовать с Vue, должны быть в данные объект, как Сообщение Свойство стоимости 'Привет, Vue!' .
И это все, чтобы настроить Vue! Теперь мы посмотрим на ключевые функции Vue. Помните, что VUE можно использовать только в указанном вами элементе, который в моем случае является div с приложение i d.
Включая переменные в HTML
Следующий фрагмент кода добавит значение Сообщение переменная в дивизион . Если значение изменяется, HTML автоматически обновляется.
{{ message }}
Обновить Сообщение Переменная, вы должны называть это как app.message , так как это свойство приложение объект.
Условия в HTML
Чтобы отобразить HTML, если выполнено определенное условие, вы можете использовать V-if директива.
data: {
displayMessage: false
}
This message will only be shown if displayMessage is true!
Для петли в HTML
Допустим, у вас есть FruitNames массив, как так:
data: {
fruitNames: ["Apple", "Pear", "Banana"]
}
Вы можете создать HTML -список этого массива очень легко, используя Vue:
- {{ fruit }}
Этот код выведет следующий список HTML:
- Яблоко
- Груша
- Банан
И опять же, если массив изменен, список HTML будет обновляться соответственно.
Вы также можете получить доступ к индексу в Vue для петли, например, так:
- {{ index }}: {{ fruit }}
Приведенный выше код выведет этот список:
- 0: Яблоко
- 1: Груша
- 2: банан
Кроме того, вы можете зацикливаться на диапазоне числа, например, так:
- {{ index }}
Этот пример создаст этот список:
- 1
- 2
- 3
- 4
- 5
Связывание HTML -атрибутов
Так же, как вы можете связывать текст внутри элементов HTML с переменными JavaScript, вы можете связывать атрибуты элементов HTML с использованием переменных. Вот пример. Допустим, у вас есть для приложения для чата и захотите связать его атрибут заполнителя с именем получателя. Вот как бы вы сделали это с помощью Vue:
data: {
recipient: "John"
}
Если получатель Изменения, заполнитель ввода обновит! Самое приятное, что вы можете сделать это для любого атрибута HTML, например заглавие или класс Анкет И потому что v-bind является одним из наиболее используемых директив VUE, его можно сократить до одного : Анкет Что означает, что это будет : Заполнитель вместо V-Bind: Placeholder в примере выше.
Исключение с V-on
Связывать "ON" HTML -атрибуты, такие как по щелчку или по изменению , вы не должны использовать v-bind Директива, вместо этого V-on Директива, как так:
Этот пример создаст 10 кнопок, и каждый вызовет Dosomestuff с их индексом прошел как параметр.
Снова V-on очень часто используется директива, так что у нее есть свои сокращения: @click так же, как V-on: нажмите Анкет
Привязка ввода
При программировании веб -страниц вы часто обнаружите, что хотите связать значение HTML -ввода с переменной JavaScript. Vue делает это очень легко, с V-модель директива. Вот как вы его используете:
data {
name: 'John'
}
{{name}}
Этот пример будет инициализировать имя свойство со значением по умолчанию 'John' , а затем создайте HTML -вход, который автоматически изменяет это свойство всякий раз, когда ввод изменяется.
Вывод
Как мы уже видели, Vue действительно изменяет игру, когда дело доходит до подключения HTML DOM с JavaScript, поскольку он предоставляет различные логические элементы для HTML. Такие проблемы, как условное рендеринг и управление государством, легко решаются при использовании VUE.
Оригинал: “https://dev.to/oskarcodes/vuejs-basics-1e0o”