jquery - change - vue selector
vue js ''document.getElementById'' taquigrafía (5)
¿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?
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>
Puede usar la directiva v-el para guardar un elemento y luego usarlo más tarde.
<div v-el:my-div></div>
<!-- this.$els.myDiv --->
Edición : Esto está en desuso en Vue 2 , vea 胡亚雄 respuesta
Puedes encontrar tu respuesta en la combinación de estas dos páginas en la API :
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
Un objeto que contiene componentes secundarios que se han registrado ref.
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
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.