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

@marisa 

В Vue.js для работы с реактивными переменными используются комбинации следующих методов и свойств:

1. data(): объявление реактивных переменных в блоке data().

2.{{}}:привязка реактивных переменных к шаблону через интерполяцию.

1. v-model:двусторонняя привязка значений реактивных переменных к элементам форм.
2. computed: определение вычисляемых свойств на основе реактивных переменных.
3. watch:реакция на изменения реактивных переменных.
4. methods: модификация реактивных переменных в методах.

Пример:

 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
28
29
30
31
32

<template>
<div>
    <input v-model="name" />
    <p>{{greeting}}</p>
</div>
</template>

<script>
export default {
    data() {
        return {
            name: '',
            greeting: ''
        }
    },
    computed: {
        greeting() {
            return 'Hello, ' + this.name + '!'
        }
    },
    watch: {
        name(newName) {
            this.greeting = 'Hello, ' + newName + '!'
        }
    },
    methods: {
        updateName() {
            this.name = 'John'
        }
    }
}
</script>

В этом примере мы объявляем две реактивные переменные: name и greeting. Значение name связано с входным полем через v-model, значение greeting вычисляется с помощью computed. Мы также определяем watch, чтобы реагировать на изменение name и обновить значение greeting. Метод updateName также изменяет значение переменной name.

@marisa 

Для чего используется директива v-on во Vue.js?