Vue.js中的'document.getElementById'简写形式

Question

Vue.js有没有像JQuery的$('#id')一样缩写为document.getElementById('#id')的简写方式？

如果有，文档中在哪里可以找到此类信息和其他相关资料？

- Mike Thrussell

Answer 1

Vue 2中没有简便的方法。

Jeff的方法在Vue 2中似乎已经过时了。

这里是另一种实现目标的方法。

 var app = new Vue({
    el:'#app',
    methods: {    
        showMyDiv() {
           console.log(this.$refs.myDiv);
        }
    }
    
   });

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id='app'>
   <div id="myDiv" ref="myDiv"></div>
   <button v-on:click="showMyDiv" >Show My Div</button>
</div>

- 胡亚雄

---

我曾经在一个输入框上尝试过这个。我认为id="something"和rel="something"都是必需的，还需要一些额外的工作来提取输入的值。也许有更好的方法来做到这一点，但当你得到对象返回并且需要输入值时，这将起作用。let searchTerm = this.$refs["search_input"].$el.value; alert(searchTerm); - William Hammock

@WilliamHammock：当通过ref引用元素时，无需使用id。 - GullerYA

Answer 2

您可以使用指令v-el来保存一个元素，然后在以后使用它。

https://vuejs.org/api/#vm-els

<div v-el:my-div></div>
<!-- this.$els.myDiv --->

编辑：这在Vue 2中已经被废弃，请参见胡亚雄的答案。

- Jeff

---

这已经被废弃，请勿在Vue.js 2中使用。 - David

请阅读 https://github.com/vuejs/vue/issues/2873 了解哪些已被弃用，哪些没有。 - ytbryan

Answer 3

在API中的这两个页面组合中，您可以找到答案：

• REF

ref用于注册对元素或子组件的引用。该引用将在父组件的$refs对象下注册。如果在普通DOM元素上使用，则引用将是该元素。

• vm.$refs

一个包含已注册引用的子组件的对象。

- Soorena

Answer 4

尽量不要通过直接引用DOM来进行DOM操作，这样会有很多性能问题，而且当我们尝试直接访问DOM时，事件处理变得更加棘手。相反，使用数据和指令来操作DOM。

这将使您对操作有更多的控制，也能够以模块化格式管理功能。

- Vishal

---

不总是可行的。请参见：HTML5画布。 - Victorio Berra

Answer 5

如果您想获取一个元素，可以使用Vue.util.query。它实际上只是document.querySelector的封装，但长度只有14个字符，比后者的22个字符要短，技术上更短。此外，它还具有一些错误处理功能，以防要查找的元素不存在。

没有关于Vue.util的官方文档，但这是函数的整个源代码：

function query(el) {
  if (typeof el === 'string') {
    var selector = el;
    el = document.querySelector(el);
    if (!el) {
      ({}).NODE_ENV !== 'production' && warn('Cannot find element: ' + selector);
    }
  }
  return el;
}

代码库链接: Vue.util.query

- Taylor Glaeser

Answer 6

Vue v3 的更新。现在有一个名为 Template Ref 的功能 (docs link)。在 script 部分创建 ref，将 ref 属性添加到要访问的元素上，两者将连接起来。

<script setup>
  import { ref, onMounted } from 'vue'

  // declare a ref to hold the element reference
  // the name must match template ref value
  const input = ref(null)

  onMounted(() => {
    input.value.focus()
  })
</script>

<template>
  <input ref="input" />
</template>

- Luke Climenhage