title: getElementsByClassName in context of vue
body: <p>In the context of vue.js, how does getElementsByClassName work?</p>
  <p>I have the following snippet of code below - the goal is to click a button and change the color of the h1 tag to green using vue.js methods:</p>
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js&quot;&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id=&quot;app&quot;&gt;
          &lt;h1 class=&quot;main-header&quot;&gt;{{ message }}&lt;/h1&gt;
          &lt;button v-on:click=&quot;colorChange&quot;&gt;Click me&lt;/button&gt;
      &lt;/div&gt;
      &lt;script&gt;
          var app = new Vue({
          el: '#app',
              data: {
                  message: 'Hello Vue!'
              },
              methods: {
                  colorChange: function() {
                      // what do I do here...?
                  }
              }
          })
      &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>It's to my understanding that Vue is like React with a virtual DOM and you don't modify it directly.</p>
  <p>Obviously in vanilla JS you just do <code>document.getElementsByClassName('main-header')[0].style.backgroundColor=&quot;green&quot;;</code> but that seems counterintuitive in Vue.</p>
  <p>Am I overcomplicating this and is this in fact how it works? Or does Vue have a specific way of handling this? I've been looking at <a href="https://v2.vuejs.org/v2/guide/class-and-style.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/class-and-style.html</a> but it just explains how to bind classes. I'm also reading through <a href="https://v2.vuejs.org/v2/guide/events.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/events.html</a> but I'm having a hard time finding what I need in regards to targeting an element/modifying it in some way...</p>
  <p>How do you select and/or modify an element in the context of Vue?</p>