jQuery vue.js 'document.getElementById' 简写
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36970062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vue.js 'document.getElementById' shorthand
提问by Mike Thrussell
Does vue.js have a shorthand for document.getElementById('#id')like JQuery's $('#id')?
vue.js 有document.getElementById('#id')像 JQuery 那样的简写$('#id')吗？
If so, where is the reference for this in the docs so I can locate other information?
如果是这样，文档中对此的参考在哪里，以便我可以找到其他信息？
回答by u6176355
Theres no shorthand way in vue 2.
vue 2 中没有速记方式。
Jeff's method seems already deprecated in vue 2.
Jeff 的方法在 vue 2 中似乎已经被弃用了。
Heres another way u can achieve your goal.
这是您实现目标的另一种方式。
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>回答by Jeff
You can use the directive v-elto save an element and then use it later.
您可以使用该指令v-el来保存元素，然后在以后使用它。
<div v-el:my-div></div>
<!-- this.$els.myDiv --->
Edit: This is deprecated in Vue 2, see 胡亚雄 answer
编辑：这在 Vue 2 中已弃用，请参阅胡亚雄的回答
回答by Vishal
Try not to do DOM manipulation by referring the DOM directly, it will have lot of performance issue, also event handling becomes more tricky when we try to access DOM directly, instead use data and directives to manipulate the DOM.
尽量不要通过直接引用 DOM 来进行 DOM 操作，它会有很多性能问题，而且当我们尝试直接访问 DOM 时，事件处理变得更加棘手，而是使用数据和指令来操作 DOM。
This will give you more control over the manipulation, also you will be able to manage functionalities in the modular format.
这将使您更好地控制操作，您也将能够以模块化格式管理功能。
回答by Taylor Glaeser
If you're attempting to get an element you can use Vue.util.querywhich is really just a wrapper around document.querySelectorbut at 14 characters vs 22 characters (respectively) it is technically shorter. It also has some error handling in case the element you're searching for doesn't exist.
如果您尝试获取一个元素，您可以使用Vue.util.query它实际上只是一个包装器，document.querySelector但在 14 个字符和 22 个字符（分别）时，它在技术上更短。如果您要搜索的元素不存在，它还有一些错误处理。
There isn't any official documentation on Vue.util, but this is the entire source of the function:
没有关于 的任何官方文档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;
}
Repo link: Vue.util.query
回购链接：Vue.util.query
回答by Soorena
you can find your answer in the combination of these two pages in the API:
您可以在API的这两个页面的组合中找到答案：
ref is used to register a reference to an element or a child component. The reference will be registered under the parent component's $refs object. If used on a plain DOM element, the reference will be that element
ref 用于注册对元素或子组件的引用。该引用将注册在父组件的 $refs 对象下。如果在普通 DOM 元素上使用，则引用将是该元素
An object that holds child components that have ref registered.
一个包含已注册 ref 的子组件的对象。
