Vue.js

evazukaLeave a comment

Директива v-bind указывает к какому атрибуту мы привязываем (to bind) данные. Например,  в данных  указан источник изображения:

var app = new Vue({
el: '#app',
data: {
product: 'Socks',
image: 'vmSocks-green-onWhite.jpg'
}
})

Чтобы привязать этот источник изображения к src в html коде, необходимо написать следующее:

<img v-bind:src="image" >

Условия

Условия, чтобы управлять элементами, задаются директивами:

  • v-if
  • v-else-if
  • v-if
  • v-show

Если значения атрибутов, подающихся директиве true, то с элементом будут производится какие-то действия. Например:

<span v-if="onSale">On sale!</span>

<span> элемент будет отображаться только если его значение равно true.

var app = new Vue({
el: '#app',
data: {
product: 'Socks',
image: 'vmSocks-green-onWhite.jpg',
inStock: true,
inventory: 100,
onSale: true
}
})

Используя директиву v-show, элемент не удаляется из DOM, а меняется лишь его свойство видимости.

<span style="display: none;">On sale!</span>

Отображение массивов в виде списков

Имея массив данных:

sizes: ["UK 7", "UK 8", "UK 9"]

Можно вывести его в виде списка с помощью директивы v-for, которая переберёт (to loop over) каждый элемент списка и выведет его отдельным пунктом.

<ul>
<li v-for="size in sizes">{{ size }}</li>
</ul>

Если же имеется массив объектов:

variants: [
{
variantId: 2234,
variantColor: "green"
},
{
variantId: 2235,
variantColor: "blue"
}
]

То для их корректного отображения в виде списка, необходимо указать так же ключ (variantId):

Так же, элементы массива можно проиндексировать и подавать непосредственно индекс:

Обработка событий

Для того, чтобы обрабатывать события, необходимо использовать директиву v-on.

Например, для того, чтобы вызвать метод после нажатия на кнопку, необходимо указать директиву и событие\действие:

v-on:click="addToCart">Add to Cart

Директиву v-on можно заменить на @.

Add to Cart

Помимо данных, в экземпляре Vue можно указывать методы.

methods: {
addToCart(){
this.cart += 1
},
updateProduct(variantImage){
this.image = variantImage
},
removeFromCart(){
this.cart -= 1
}
}

Ключевое слово this указывает на то, что мы изменяем значение переменной экземпляра Vue, с которым мы сейчас работаем.

Также директива v-on может обрабатывать событие, когда пользователь наводит курсор – @mouseover.

iv v-for=”variant in variants” :key=”variant.variantId”>

@mouseover=“updateProduct(variant.variantImage)”> {{variant.variantColor}}


В данном случае, при наведении курсора, мы подаем функции updateProduct значение переменной variant.variantImage.

В браузерах, которые поддерживают ES6 нет необходимости прописывать слово “function”:

addToCart: function (){
this.cart += 1
}

И можно обойтись таким вариантом:

addToCart(){
this.cart += 1
}

Работа со стилями

С помощью директивы v-bind:style можно динамически изменять стили. Например, работая с div, можно указать цвет фона для него, беря за значение цвета – значение переменной.

<div v-for="variant in variants" :key="variant.variantId"
class="color-box"
:style="{ backgroundColor: variant.variantColor}" @mouseover="updateProduct(variant.variantImage)"> </div>

Работа с классами

С помощью директивы v-bind:class можно привязывать классы. Например, в css файле прописан стиль класса disabledButton. Для того, чтобы применить его к кнопке, когда значение InStock является false, необходимо написать следующее:

<button v-on:click="addToCart" :disabled="!inStock"
:class="{disabledButton: !inStock }">Add to Cart</button>

Вычисляемые свойства

Для того, чтобы вычислить значение, вместо того, чтобы его хранить (например, конкатенация двух строчек), в экземпляре Vue, помимо методов и данных, необходимо указать computed property:

computed: {
title(){
return this.brand + ' ' + this.product
}
}

Теперь значение title можно использовать в html в кудрявых скобках:

<h1>{{ title }}</h1>

Title можно было прописать и в обычных методах. Но отличие вычисляемых свойств – кэширование. Значение title будет браться из кэша и не будет вычисляться заново, пока не изменится значение brand или product. В случае с обычными методами, они будут вызываться заново каждый раз при отрисовке.