vue.js'document.getElementById'的简写

Question

vue.js是否有document.getElementById('#id')类似JQuery的速记$('#id')？

如果是这样,在文档中对此的引用在哪里,以便我可以找到其他信息？

Answer 1

在vue 2中没有速记方式.

Jeff的方法似乎已在第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>

Answer 2

您可以使用该指令v-el保存元素,然后再使用它.

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

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

编辑:这在Vue 2中已弃用,请参阅胡亚雄答案

Answer 3

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

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

Answer 4

如果您尝试获取一个元素，则可以使用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

Answer 5

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

• REF

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

• VM.$裁判

保存已注册ref的子组件的对象.