jquery - change - vue selector

vue js ''document.getElementById'' taquigrafía

Question

¿Tiene vue js una abreviatura de document.getElementById(''#id'') como $(''#id'') JQuery?

Si es así, ¿dónde está la referencia para esto en los documentos para que pueda encontrar otra información?

Answer 1

No hay forma abreviada en vue 2.

El método de Jeff parece ya obsoleto en la vue 2.

Heres otra forma u puede lograr su objetivo.

 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>

Answer 2

Puede usar la directiva v-el para guardar un elemento y luego usarlo más tarde.

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

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

Edición : Esto está en desuso en Vue 2 , vea 胡亚雄 respuesta

Answer 3

Puedes encontrar tu respuesta en la combinación de estas dos páginas en la API :

• REF

ref se utiliza para registrar una referencia a un elemento o un componente secundario. La referencia se registrará en el objeto $ refs del componente principal. Si se usa en un elemento DOM plano, la referencia será ese elemento

• vm.$refs

Un objeto que contiene componentes secundarios que se han registrado ref.

Answer 4

Si está intentando obtener un elemento, puede usar Vue.util.query que es solo una envoltura alrededor de document.querySelector pero con 14 caracteres frente a 22 caracteres (respectivamente) es técnicamente más corto. También tiene algún manejo de errores en caso de que el elemento que está buscando no exista.

No hay ninguna documentación oficial en Vue.util , pero esta es la fuente completa de la función:

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

Enlace de Vue.util.query : Vue.util.query

Answer 5

Trate de no manipular el DOM refiriéndolo directamente, tendrá muchos problemas de rendimiento, y el manejo de eventos se volverá más complicado cuando intentamos acceder directamente al DOM, en lugar de eso usamos datos y directivas para manipularlo.

Esto le dará más control sobre la manipulación, y también podrá administrar las funcionalidades en el formato modular.