Question

vue.js是否像JQuery的document.getElementById('#id')一样有$('#id')的简写？

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

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>

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

您可以在API：

中的这两个页面的组合中找到答案

的 REF

ref用于注册对元素或子元素的引用   零件。该参考将在父母下注册   component的$ refs对象。如果在普通的DOM元素上使用，那么   引用将是该元素

的 vm.$refs


包含已注册ref的子组件的对象。

Answer 4

尝试不直接引用DOM来进行DOM操作，它会产生很多性能问题，当我们尝试直接访问DOM时，事件处理变得更加棘手，而是使用数据和指令来操作DOM。

这将使您可以更好地控制操作，您还可以以模块化格式管理功能。

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

vue.js'document.getElementById'的简写

5 个答案: