Как использовать переменные в Vue.js?

@sylvester 

В Vue.js можно использовать переменные в шаблоне и скрипте компонента. Чтобы объявить переменную в компоненте, нужно использовать синтаксис объекта data, например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

Здесь переменная message объявлена в блоке data объекта компонента и используется в шаблоне с помощью двойных фигурных скобок {{ }}.

Также можно использовать переменные в вычисляемых свойствах и методах компонента. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<template>
  <div>
    <p>{{ fullName }}</p>
    <button @click="greet">Say hello</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  methods: {
    greet() {
      alert('Hello, ' + this.fullName + '!')
    }
  }
}
</script>

Здесь переменные firstName и lastName объявлены в блоке data компонента, а свойство fullName вычисляется на их основе в блоке computed. Метод greet использует свойство fullName для вывода приветствия.

@sylvester 

Для объявления переменных в Vue.js можно использовать блок данных (data) компонента, свойства (props), переменные в методах, вычисляемых свойствах (computed) и refs. Давайте рассмотрим каждый из них:

1. Блок данных (data):

1
2
3
4
5
6
7

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}

Эти переменные можно использовать в шаблоне компонента:

1
2
3

<template>
  <div>{{ message }}</div>
</template>

1. Свойства (props): Передача переменной из родительского компонента в дочерний:

1

<child-component :propName="parentData"></child-component>

В дочернем компоненте свойство доступно как prop:

1
2
3

export default {
  props: ['propName']
}

1. Переменные в методах:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

export default {
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    increment() {
      this.counter++
    }
  }
}

Здесь метод increment использует переменную counter.

1. Вычисляемые свойства (computed):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}

При изменении переменных firstName и lastName, поле fullName будет автоматически обновляться.

1. Refs: Ссылки на элементы или компоненты в шаблоне:

1

<input ref="input" v-model="message">

Использование в методах:

1

this.$refs.input.focus()

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