vue.js 'document.getElementById' shorthand
Theres no shorthand way in vue 2.
Jeff's method seems already deprecated in 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/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>
You can use the directive v-el
to save an element and then use it later.
<div v-el:my-div></div><!-- this.$els.myDiv --->
Edit: This is deprecated in Vue 2, see ่กไบ้ answer
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.
This will give you more control over the manipulation, also you will be able to manage functionalities in the modular format.