Как работает getElementsByClassName в контексте vue.js?
У меня есть следующий фрагмент кода ниже - цель состоит в том, чтобы нажать кнопку и изменить цвет тега h1 на зеленый, используя методы vue.js:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 class="main-header">{{ message }}</h1>
<button v-on:click="colorChange">Click me</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
colorChange: function() {
// what do I do here...?
}
}
})
</script>
</body>
</html>
Насколько я понимаю, Vue похож на React с виртуальным DOM, и вы не изменяете его напрямую.
Очевидно, что в vanilla JS вы просто делаете document.getElementsByClassName('main-header')[0].style.backgroundColor="green";, но в Vue это кажется нелогичным.
Я слишком усложняю это и на самом деле это работает? Или у Vue есть особый способ справиться с этим? Я смотрел на https://vuejs.org/v2/guide/class-and-style.html, но он просто объясняет, как связывать классы. Я также читаю https://vuejs.org/v2/guide/events.html, но мне трудно найти то, что мне нужно для нацеливания на элемент / его модификации каким-либо образом ...
Как вы выбираете и / или изменяете элемент в контексте Vue?