VUE this.$el 获取节点

在 Vue 中，this.$el 可以用来获取当前组件实例所对应的 DOM 元素节点。例如：

<template>
  <div>
    Hello World!
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$el); // 打印出当前组件实例所对应的 DOM 元素节点
  }
}
</script>

在上面的代码中，当组件挂载完成后，我们使用 console.log 打印出 this.$el，它会输出当前组件的根 DOM 元素节点，也就是 `<div>Hello World!</div>`。

相关问题

VUE this.$el如何获取某一个节点

如果你想获取当前组件实例中的某一个具体的 DOM 元素节点，可以使用原生的 DOM API 或者 Vue 提供的 $refs 来获取。

1. 使用原生的 DOM API

在组件中使用原生的 DOM API 来获取某一个具体的 DOM 元素节点，可以使用 this.$el.querySelector() 或者 this.$el.querySelectorAll() 方法。例如：

<template>
  <div>
    <span ref="span">Hello World!</span>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$el.querySelector('span')); // 获取 <span> 元素节点
  }
}
</script>

在上面的代码中，我们在组件中使用了一个 ref 属性来标记一个 span 元素，然后在 mounted 钩子函数中使用 this.$el.querySelector('span') 方法获取该元素节点。

2. 使用 Vue 提供的 $refs

在组件中使用 Vue 提供的 $refs 来获取某一个具体的 DOM 元素节点，可以在模板中使用 ref 属性来标记需要获取的元素，然后在组件中通过 this.$refs.xxx 来获取该元素。例如：

<template>
  <div>
    <span ref="span">Hello World!</span>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.span); // 获取 <span> 元素节点
  }
}
</script>

在上面的代码中，我们在组件中使用了一个 ref 属性来标记一个 span 元素，然后在 mounted 钩子函数中使用 this.$refs.span 来获取该元素节点。

this.$refs.input.$el获取里面的input

在Vue.js中，使用`this.$refs.input.$el`可以获取到`<input>`元素的DOM节点。请注意，使用`$refs`引用DOM节点时，需要在`mounted()`生命周期钩子函数中使用，这是因为在组件渲染完成之后，才能保证`$refs`引用到正确的DOM节点。以下是一个示例代码：

<template>
  <div>
    <input ref="input" type="text" />
    <button @click="handleClick">获取input的值</button>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.input.$el)
  },
  methods: {
    handleClick() {
      const value = this.$refs.input.$el.value
      console.log(value)
    }
  }
}
</script>