v-bind Vue. Связь шаблона с данными.

Как связать Vue компонент с уровнем данных

Давайте представим себе такую ситуацию, что у нас есть некий Vue-компонент.

<template>

   <div>

       <input type="text">

   </div>

</template>




<script>

export default {

 name: "mainVue",

 data() {

   return {

     text: 'тест'

   }

 }

}

</script>

В этом Vue-компоненте есть какой-то элемент для текстового поля ввода, и у нас есть уровень данных текст, который содержит текстовое значение, которое должно выводиться в этом элементе input. 

Каким образом мы можем подставить это значение text из уровня данных внутрь нашего Vue-компонента?

Мы с вами знаем, что когда мы с вами пишем какое-то значение value, мы можем прописать здесь какое-то значение для нашего элемента. 

<input type="text" value="sdf">

Итого, мы получаем с вами наше текстовое поле ввода с каким-то текстом.

Но, каким же образом мы можем взять и теперь подставить значение тест из уровня данных text внутрь value для нашего input? 

Если мы попробуем и напишем так:

<input type="text" value="text">

Результат будет выведен не как значение из уровня данных, а это будет выведено как обычный текст. Он не воспринимается компилятором Vue как элемент с уровня данных. 

Директива v-bind

То есть, наша задача - организовать связь между шаблоном и уровнем данных. Для организации этой связи есть специальная директива, которая называется v-bind (v-bind:value). И как только мы к нашему атрибуту добавили эту директиву (v-bind:), у нас организовалась связь с уровнем данных нашего компонента. 

<input type="text" v-bind:value="text">

И теперь мы можем с вами пользоваться этой связью. Как только мы с вами воспользовались директивой v-bind, у нас с вами появилась связь между уровнем данных и нашим шаблоном. 

Теперь здесь будет выведен не просто текст, а будет выведено значение из ключа text уровня данных. 

Как вы видите, у нас здесь вывелся теперь тест, то значение, которое находится у нас на уровне данных. 

bind переводится с английского как "связь", то есть благодаря этому мы с вами организуем эту связь между различными уровнями нашего приложения.

Также, как для директивы v-on для директивы v-bind, есть сокращённая форма записи, и заключается она просто в форме записи в виде двоеточия

<input type="text" v-bind:value="text">

 и это тоже у нас будет работать. 

Чаще всего в рабочих компонентах вы будете видеть такую сокращенную форму записи. 

Где это может еще использоваться? 

v-bind часто может использоваться для картинок. Мы получили по API ссылки, какие-то на какие-то страницы, на какие-то изображения, которые будут у нас в нашем компоненте. Они находятся у нас на уровне данных, и нам нужно вывести их на уровне нашего компонента. 

Здесь мы точно также сможем использовать директиву v-bind либо её сокращённую форму записи, и просто сослаться на нужный нам нужный ключ на уровне данных. 

<img :src="imageUrl">

Точно также для ссылок это может работать. 

<a :href="url">

По сути, директива v-bind - это директива для атрибутов, для атрибутов нашего приложения. 

Общий синтаксис у неё такой: v-bind либо просто знак двоеточия, далее указывается какой-то атрибут того элемента, к которому он будет приниматься. 

Его какие-то vue data, vue уровень данных. 

Но, нужно иметь в виду, что этот v-bind не только позволяет обращаться к уровню данных. Он дает нам возможность даже вызывать какие-то JavaScript конструкции здесь.

Но, есть различные варианты, где эта связь может организовываться с какими-то другими служебными конструкциями Vue. Например, со стилями CSS. 

Благодаря этой связи v-bind, мы можем прописать какие-то дополнительные стили CSS для наших элементов. 

<div v-bind:style="{fontSize: size}">

Ну, это уже мы посмотрим позже, когда будем работать со стилями CSS.

Не обязательно эта связь будет с уровнем данных, эта связь может быть с какими-то другими конструкциями, которые могут использоваться в наших Vue приложениях. Например, стилями CSS. 

Грубо говоря, можно сказать, что конструкция v-bind как бы включает нам режим кода, режим кода, чтобы значения, которое там было, которые там находились, не воспринимались как строковое значение, а воспринимались как какой-то код, который, а который нужно компилятору Vue и каким-то образом обработать. 

Вот такая полезная директива, которую вы можете встретить а в различных Vue приложениях, и работать каким-то образом. Надеюсь, теперь стало более понятно, для чего она нужна и как её использовать.