ссылка на ссылку
jquery упрощает процесс манипулирования DOM программистами
Преимущество Vue: MVVM Во vue программисту не нужно манипулировать DOM. Просто нужно сохранить данные! (представление на основе данных)
Вывод: В проекте vue настоятельно не рекомендуется устанавливать и использовать jQuery! ! !
1. Что такое референс
-
ref используется, чтобы помочь разработчикам получить ссылки на элементы или компоненты DOM , не полагаясь на jQuery .
-
Каждый экземпляр компонента vue содержит объект $refs , в котором хранится ссылка на соответствующий элемент или компонент DOM.
-
По умолчанию $refs компонента указывают на один
空对象.
Следующий код предназначен только для получения экземпляра объекта компонента, чтобы проиллюстрировать, что $refs по умолчанию указывает на пустой объект.
Все, что начинается с $, является встроенным членом vue.
2. Используйте ref для ссылки на элементы DOM
Если вы хотите использовать ref для ссылки на элемент DOM на странице , вы можете сделать это следующим образом:
3. Используйте ref для ссылки на экземпляр компонента
Если вы хотите использовать ref для ссылки на экземпляр компонента на странице , вы можете сделать это следующим образом:
my-counterТаким образом, вы можете вызвать метод add() в компоненте , получив экземпляр компонента
При именовании ссылки рекомендуется добавлять Ref в конце, чтобы облегчить распознавание ссылки.
4. Ниже приведен реф-каштан: управление переключением текстовых полей и кнопок по требованию.
Используйте логическое значение inputVisible для управления переключением по запросу текстового поля и кнопки в компоненте. Пример кода выглядит следующим образом:
5. Позвольте текстовому полю автоматически получить фокус
После отображения текстового поля, если вы хотите, чтобы оно сразу же получило фокус, вы можете добавить к нему ссылку и вызвать метод .focus() собственного объекта DOM . Пример кода выглядит следующим образом:
Будет сообщено о следующей ошибке:
Эта ошибка часто возникает во внешнем интерфейсе, что означает, что «фокус» не неопределен, а не определен перед вызовом свойства или метода.
В настоящее время он не действует, потому что, когда выполнение будет завершено this.inputVisible = true, this.$refs.ipt.focus()страница будет выполнена и отображена немедленно, поэтому this.$refs.ipt не определено.
6. метод this. $nextTick (cb)
Метод компонента $nextTick(cb) отложит выполнение обратного вызова cb до следующего цикла обновления DOM. Популярное понимание таково: дождитесь завершения обновления DOM компонента, а затем выполните функцию обратного вызова cb. Это гарантирует, что функция обратного вызова cb может работать с последним элементом DOM .
Причина отказа от использования обновленной функции жизненного цикла заключается в том, что при переключении ввода на кнопку обновление все равно будет запущено.В это время ввода нет, поэтому ни один «ipt» не сообщит об ошибке.