VueJS - Связывание: Путеводитель для начинающих

Здравствуйте, будущий супергерой Vue.js! Я рад быть вашим проводником в этом захватывающем путешествии в мир связывания Vue.js. Как кто-то, кто преподавал программирование на протяжении многих лет, я могу сказать, что связывание - это как секретный соус, который делает Vue.js таким вкусным. Так что натянем рукава и окунемся в это!

Что такое связывание в Vue.js?

Прежде чем мы углубимся в детали, давайте поймем, что такое связывание. В Vue.js связывание - это способ, с помощью которого мы подключаем наши данные к DOM (Модель объекта документа). Это как создание магической связи между вашим кодом JavaScript и тем, что отображается на экране. Круто, правда?

Связывание HTML классов

Представьте, что вы одеваетесь на вечеринку. Вы можете выбрать разные наряды в зависимости от случая, верно? Так вот, связывание HTML классов в Vue.js работает аналогично. Мы можем динамически изменять的外观 наших элементов на основе наших данных.

Основное связывание классов

Давайте начнем с простого примера:

<div id="app">
<p :class="{ active: isActive }">Am I active?</p>
</div>

<script>
new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>

В этом примере мы связываем класс 'active' с нашим абзацем на основе свойства данных isActive. Если isActive是真, абзац будет иметь класс 'active'. Если это false, он не будет.

Множественные классы

Но что, если мы хотим жонглировать множеством классов? Нет проблем! Vue.js насغطывает:

<div id="app">
<p :class="{ active: isActive, 'text-danger': hasError }">
Multi-class binding
</p>
</div>

<script>
new Vue({
el: '#app',
data: {
isActive: true,
hasError: false
}
})
</script>

Здесь мы связываем два класса: 'active' и 'text-danger'. Абзац будет иметь класс 'active', но не 'text-danger',除非 мы изменим hasError на true.

Синтаксис массива

Мы также можем использовать массив для связывания классов. Это как иметь гардероб классов на выбор:

<div id="app">
<p :class="[activeClass, errorClass]">Array syntax is cool!</p>
</div>

<script>
new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>

В этом случае к абзацу будут применены оба класса 'active' и 'text-danger'.

Связывание линейных стилей

Теперь давайте поговорим о линейных стилях. Это как сделать вашей элементам макияж на ходу!

Синтаксис объекта

Мы можем связывать линейные стили, используя объект:

<div id="app">
<p :style="{ color: textColor, fontSize: fontSize + 'px' }">
Style me up!
</p>
</div>

<script>
new Vue({
el: '#app',
data: {
textColor: 'red',
fontSize: 20
}
})
</script>

Это установит цвет в красный и размер шрифта в 20px. Обратите внимание, что мы можем использовать camelCase (fontSize) или kebab-case ('font-size') для свойств стиля.

Синтаксис массива

Мы также можем использовать массив объектов стилей:

<div id="app">
<p :style="[baseStyles, overridingStyles]">Array of styles</p>
</div>

<script>
new Vue({
el: '#app',
data: {
baseStyles: {
color: 'blue',
fontSize: '20px'
},
overridingStyles: {
fontWeight: 'bold'
}
}
})
</script>

Это позволяет нам применять несколько объектов стилей, с тем что более поздние объекты в массиве перезаписывают более ранние, если есть конфликты.

Связывание ввода форм

Связывание ввода форм - это то, где Vue.js действительно сияет. Это как иметь прямую телефонную линию между вашими вводами форм и вашими данными!

Ввод текста

Давайте начнем с простого ввода текста:

<div id="app">
<input v-model="message" placeholder="Edit me">
<p>Message is: {{ message }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>

Директива v-model создает двустороннюю связь между вводом и свойством данных message. Любые изменения во вводе немедленно обновят message, и vice versa.

Флажок

Флажки resemble маленькие включатели/выключатели. Вот как их связать:

<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>

<script>
new Vue({
el: '#app',
data: {
checked: false
}
})
</script>

Свойство checked будет истинно, когда флажок选中, и ложно, когда он не选中.

Радиокнопки

Радиокнопки resemble вопросы с множественным выбором. Только одна может быть选中 в одно время:

<div id="app">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>

<script>
new Vue({
el: '#app',
data: {
picked: ''
}
})
</script>

Свойство picked будет установлено в значение选中 радиокнопки.

Выпадающий список

Наконец, давайте посмотрим на выпадающие списки:

<div id="app">
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>

<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>

Свойство selected будет установлено в значение выбранного элемента.

Обзор методов связывания

Вот quick reference таблица методов связывания, которые мы рассмотрели:

Тип связывания	Синтаксис	Описание
Класс (Объект)	:class="{ className: condition }"	Применяет класс на основе условия
Класс (Массив)	:class="[class1, class2]"	Применяет несколько классов
Стиль (Объект)	:style="{ property: value }"	Применяет линейные стили
Стиль (Массив)	:style="[styleObject1, styleObject2]"	Применяет несколько объектов стилей
Ввод формы	v-model="dataProperty"	Двусторонняя связь для ввода форм

И вот и все! Вы только что сделали свои первые шаги в чудесный мир связывания Vue.js. Помните, что практика делает perfect, так что не бойтесь экспериментировать с этими концепциями. Before you know it, you'll be binding data like a pro! Happy coding!

Credits: Image by storyset