vue js document getElementById shorthand

Question

Does vue js have a shorthand for document getElementById   id   like JQuery s     id      If so  where is the reference for this in the docs so I can locate other information

User · Answer

You can use the directive v-el to save an element and then use it later   https   vuejs org api  vm-els   lt div v-el my-div gt  lt  div gt   lt  -- this  els myDiv --- gt    Edit  This is deprecated in Vue 2  see     answer

User · Answer

If you re attempting to get an element you can use Vue util query which is really just a wrapper around document querySelector but 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   There isn t any official documentation on Vue util  but this is the entire source of the function   function query el      if  typeof el      string         var selector   el      el   document querySelector el       if   el               NODE ENV      production   amp  amp  warn  Cannot find element      selector               return el      Repo link  Vue util query

User · Answer

you can find your answer in the combination of these two pages in  the API    REF      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    vm  refs      An object that holds child components that have ref registered

User · Answer

Theres no shorthand way in vue 2   Jeff s method seems already deprecated in vue 2   Heres another way u can achieve your goal    x000D   x000D   var app   new Vue   x000D      el   app   x000D      methods        x000D          showMyDiv     x000D             console log this  refs myDiv   x000D            x000D        x000D       x000D         x000D   lt script src  https   cdn jsdelivr net npm vue 2 5 16 dist vue js  gt  lt  script gt  x000D   lt div id  app  gt  x000D      lt div id  myDiv  ref  myDiv  gt  lt  div gt  x000D      lt button v-on click  showMyDiv   gt Show My Div lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · 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

[jquery] vue.js 'document.getElementById' shorthand

Examples related to jquery

Examples related to getelementbyid

Examples related to vue.js