Рубрика: Vue компонент.script.data

Объект компонента Vue
описывает данные, которые лежат в экземпляре Vue и которые используются внутри элемента (которые мы можем выводить)

содержит переменные
поля со системными значениями  или без значения

вывод в теге как ключи
{{ПолеДаты}}

Рубрики
Vue директива v-bind Vue компонент.script.data Vue компонент.script Vue компонент.script.props

Передаём переменную data дочерней компоненте Vue

  • Автор записи Автор: bo52
  • Дата записи 19.04.2022
  • Родительская компонента содержит переменную в data
<template>
<comp v-bind:ИмяПропса="ИмяОбъекта">
</template>

<script>
export default{
data(){
 return {
  ИмяОбъекта: Значение
 }
}
}
</script>
  • Дочерняя компонента comp
    пропсы нельзя изменять
<script>
export default{
props:{
ИмяПропса:{
 type:Array,
 requered:true,
}
}
}
</script>
Рубрики
Vue компонент.script.data

data в компоненте

создание функции внутри default
пример data

  • Свойство data в компоненте всегда должна быть функцией, которая возвращает объект.

функция data возвращает объект
внутри возвращаемого объекта описываются все поля или модели

Интерполяция
синтаксис
{{Модель}}

  • встраивание поля в шаблон и
    регистрация поля data в компонент
    src\App.vue 
<template>
<div>
<div>Кол-во лайков: <strong>{{ likes }}</strong></div>
<div>Кол-во дизлайков: <strong>{{ deslikes }}</strong></div>
</div>
</template>

<script>
export default{

data(){
return {likes: 0,dislikes: 5}
}
}
</script>

<style>
</style>
data в компоненте во Vue.js
Vue.js
Рубрики
Vue.js Vue компонент.script.data Vue вызов в компоненте Vue компонент.template

Интерполяция в компоненте Vue

  • Вывод динамически изменяемых или реактивных данных в компоненте
    переменных data
<template>
{{ Значение }}
</template>