Javascript vue上下文中的getElementsByClassName_Javascript_Vue.js_Vuejs2

Javascript vue上下文中的getElementsByClassName

javascript vue.js vuejs2

Javascript vue上下文中的getElementsByClassName,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,在vue.js的上下文中，getElementsByClassName是如何工作的我有以下代码片段-目标是单击按钮并使用vue.js方法将h1标记的颜色更改为绿色： <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> &

在vue.js的上下文中，getElementsByClassName是如何工作的

我有以下代码片段-目标是单击按钮并使用vue.js方法将h1标记的颜色更改为绿色：

<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就像是对虚拟DOM进行反应，而不是直接修改它

显然，在vanilla JS中，您只需执行document.getElementsByClassName'main-header'[0].style.backgroundColor=green；但这在Vue中似乎违反了直觉

我是不是把它复杂化了，事实上它是这样工作的？或者Vue是否有具体的处理方法？我已经看过了，但它只是解释了如何绑定类。我也在通读，但我很难找到我需要的关于目标元素/以某种方式修改它的内容

如何在Vue的上下文中选择和/或修改元素？

您是正确的。在Vue中，直接与DOM交互是违反直觉的

幸运的是，有一个指令允许您通过绑定到数据属性直接应用样式更改。请记住，您也可以对类执行类似的操作

<h1 class="main-header" v-bind:style="{ color: activeColor}">{{ message }}</h1>
<button v-on:click="colorChange">Click me</button>

对不起，我应该澄清一下-我如何瞄准h1？你是什么意思？Vue将根据应用于h1元素的v-bind:样式处理目标。在基于组件的库中，您不必担心直接针对元素，因为属性的定位将告诉框架如何代表您处理元素；我正试图摆脱这一点，做Vue风格的工作，这就是我所说的目标，但这是有意义的。完全可以理解，而且你的想法完全正确，这与你所习惯的完全不同。在Vue/React/Angular等中，有一个基本的思维方式转变，即手动将样式更改应用于DOM，并让框架对数据更改做出反应，并代表您更新DOM。如果您希望与组件内的元素交互，则始终可以使用REF，

data: {
    message: 'Hello Vue!',
    activeColor: 'red'
},
methods: {
    colorChange: function() {
        this.activeColor = 'green'
    }
}