vue.js '的document.getElementById' 速记

Question

是否vue.js有像jQuery的document.getElementById('#id') $('#id')速记？

如果是这样，这里是此在的文档，所以我可以找到其他信息的参考？

Answer 1

即使世界在VUE 2没有简便方法。

杰夫的方法似乎已经弃用VUE 2。

下面有另一种方式u能实现自己的目标。

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 --->

编辑：这是deprecated in Vue 2，看到胡亚雄答案

Answer 3

尽量不要直接参照的DOM做DOM操作，就会有很多的性能问题，也当我们试图直接访问DOM，而是使用的数据和指令操作DOM事件处理变得更加棘手。

这会给你更多的控制权操纵，你也将能够以模块化形式进行管理的功能。

Answer 4

如果你试图让你可以使用Vue.util.query这实际只是document.querySelector，但在14个字符VS 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

裁判用于注册到一个元件或子组件的引用。在父组件的$裁判对象的引用将被注册。如果一个普通的DOM元素上所使用的，参照将是元件

• vm.$refs

保存已注册的裁判子组件的对象。