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

Пользователь

от sylvester , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от buster , год назад

@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 для вывода приветствия.

Пользователь

от rebekah , месяц назад

@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 есть множество способов использования переменных, и каждый из них предназначен для разных случаев.