vue js 'document.getElementById' стенограмма

Question

Есть ли у vue js стенография для document.getElementById('#id'), как у JQuery's $('#id')?

Если да, то где ссылка на это в документах, чтобы я мог найти другую информацию?

Answer 1

Вы можете использовать директиву v-el, чтобы сохранить элемент, а затем использовать его позже.

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

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

Edit: Это не рекомендуется в Vue 2 см 胡亚雄 ответ

Answer 2

Если вы пытаетесь получить элемент, который вы можете использовать Vue.util.query, который действительно просто оберткой document.querySelector но при 14 символах против 22 символов (соответственно) это технически короче. Он также имеет некоторую обработку ошибок, если элемент, который вы ищете, не существует.

Существует нет официальной документации по Vue.util, но это весь источник функции:

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

Repo ссылка: Vue.util.query

Answer 3

Там нет стенографии способа вю 2.

Метод Джеффа уже устарел в vue 2.

Heres другой способ u может достичь вашей цели.

<div id="myDiv" ref="myDiv"> 
</div> 

methods: { 

    showMyDiv() { 
     console.log(this.$refs.myDiv); 
    } 
} 

Answer 4

вы можете найти ответ на свой вопрос в комбинации этих двух страниц в API:

• REF

исх используется для регистрации ссылка на элемент или ребенка . Ссылка будет зарегистрирована под родительским объектом $ refs компонента . При использовании на простом DOM элемента, то ссылка будет что элемент

• vm.$refs

Объект, который содержит дочерние элементы, которые исх зарегистрированы.

Answer 5

Старайтесь не делать манипуляции DOM со ссылкой на DOM напрямую, она будет иметь много проблем с производительностью, а также обработка событий становится более сложной, когда мы пытаемся получить доступ к DOM напрямую, вместо того, чтобы использовать данные и директивы для манипулирования DOM.

Это даст вам больше контроля над манипуляциями, также вы сможете управлять функциональными возможностями в модульном формате.