web-dev-qa-db-fra.com

vue.js 'document.getElementById' raccourci

Est-ce que vue.js a un raccourci pour document.getElementById('#id') comme le $('#id') de JQuery?

Si tel est le cas, où se trouve la référence à cela dans la documentation afin que je puisse localiser d'autres informations?

jquerygetelementbyidvue.js
35
Mike Thrussell

Il n'y a pas de raccourci dans vue 2.

La méthode de Jeff semble déjà obsolète dans vue 2.

Voici une autre façon de réaliser votre objectif.

 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>
70
胡亚雄

Vous pouvez utiliser la directive v-el pour enregistrer un élément, puis l’utiliser plus tard.

https://vuejs.org/api/#vm-els

<div v-el:my-div></div>
<!-- this.$els.myDiv --->

Edit : C'est obsolète dans Vue 2 , voir 胡亚雄 answer

11
Jeff

Essayez de ne pas manipuler le DOM en référant directement le DOM, cela posera de nombreux problèmes de performances. La gestion des événements devient plus délicate lorsque nous essayons d’accéder directement au DOM. Nous utilisons plutôt des données et des directives pour manipuler le DOM.

Cela vous donnera plus de contrôle sur la manipulation, vous pourrez également gérer les fonctionnalités au format modulaire.

5
Vishal

vous pouvez trouver votre réponse dans la combinaison de ces deux pages dans le [~ # ~] api [~ # ~] :

ref est utilisé pour enregistrer une référence à un élément ou à un composant enfant. La référence sera enregistrée dans l’objet $ refs du composant parent. Si utilisé sur un élément DOM simple, la référence sera cet élément

Un objet qui contient les composants enfants qui ont été référencés.

5
Soorena

Si vous essayez d’obtenir un élément, vous pouvez utiliser Vue.util.query qui n’est en réalité qu’un simple wrapper autour de document.querySelector mais à 14 caractères contre 22 caractères (respectivement), il est techniquement plus court. Il y a aussi un traitement d'erreur au cas où l'élément que vous recherchez n'existe pas.

Il n'y a pas de documentation officielle sur Vue.util, mais c'est la source entière de la fonction:

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;
}

Lien Repo: Vue.util.query

5
Taylor Glaeser