vue.js获取dom的方法

Vue.js是一个开源的JavaScript框架，它是构建用户界面的前端框架。Vue.js可以轻松地集成到现有的项目中，同时也可以完全作为独立的应用程序使用。 接下来，我将介绍一些在Vue.js中获取DOM元素的方法。

1. 通过 ref 属性

ref属性可以用于在组件或元素上分配一个 的ID，以便在JavaScript中使用它。例如：

<template>
  <div>
    <input type="text" ref="input" />
    <button @click="logInput">获取输入</button>
  </div>
</template>

<script>
export default {
  methods: {
    logInput() {
      console.log(this.$refs.input.value);
    },
  },
};
</script>

在这个例子中，我们有一个输入框和一个按钮。我们为输入框分配了一个 的ref属性名 "input"。然后，在方法logInput中，我们可以使用 this.$refs.input 来访问这个输入框并获取它的值。

2. 通过 $el 属性

在Vue组件中，我们可以访问原始DOM元素的 $el 属性。具体地说，$el属性返回Vue组件的根元素。例如：

<template>
  <div class="my-component">
    <h1>这是我的组件</h1>
    <p>这是一段文本</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$el);
  },
};
</script>

在这个例子中，当该组件被挂载到DOM时，mounted钩子被调用，并且我们打印出this.$el。这将输出组件的根元素，即<div class="my-component">。

3. 通过 $refs 属性

除了通过ref属性获取单个DOM元素之外，$refs属性还可以用于访问Vue组件中的多个DOM元素。例如：

<template>
  <div>
    <input type="text" ref="input1" />
    <input type="text" ref="input2" />
    <button @click="logInputs">获取所有输入</button>
  </div>
</template>

<script>
export default {
  methods: {
    logInputs() {
      console.log(this.$refs);
      console.log(this.$refs.input1.value);
      console.log(this.$refs.input2.value);
    },
  },
};
</script>

在这个例子中，我们创建了两个输入框并分配了 的ref属性名。当我们点击按钮时，logInputs方法将打印整个 $refs 对象和每个输入框的值。

4. 使用选择器

Vue.js还允许我们使用选择器来访问DOM元素，这类似于jQuery。例如：

<template>
  <div>
    <input type="text" id="input1" />
    <input type="text" class="input2" />
    <button @click="logInputs">获取所有输入</button>
  </div>
</template>

<script>
export default {
  methods: {
    logInputs() {
      const input1 = document.querySelector("#input1");
      const input2 = document.querySelector(".input2");
      console.log(input1.value);
      console.log(input2.value);
    },
  },
};
</script>

在这个例子中，我们使用ID选择器和类选择器访问输入框，并打印它们的值。

总结：

以上是几种在Vue.js中获取DOM元素的方法。使用这些方法，您可以轻松地访问和操纵DOM元素。在应用程序中，Vue.js提供了一种更高效，更优雅的方法来管理DOM和数据。