Vue js 'document.getElementById' стенография

Ответ 1

Не существует сокращенного пути в vue 2.

Метод Jeff кажется уже устаревшим в vue 2.

Иными словами, вы можете достичь своей цели.

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

methods: {

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

Ответ 2

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

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

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

Изменить: это устарело в Vue 2, см. 胡亚雄 answer

Ответ 3

Если вы пытаетесь получить элемент, вы можете использовать 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;
}

Ссылка репо: Vue.util.query

Ответ 4

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

• REF

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

• vm. $refs

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

Ответ 5

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

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