Vue element: Page not found · GitHub Pages

Код шаблона почти такой же, как в примере кнопки:

  <компонент
  : is = "элемент"
 
>
   Нет элементов в списке! 
  

Обратите внимание на содержимое по умолчанию внутри элемента слота, я к нему скоро вернусь.

Существует свойство для типа используемого списка, по умолчанию

:

  реквизит: {
  listType: {
    тип: String,
    по умолчанию: 'ul'
  }
}  

Опять же, есть вычисляемый метод с именем element :

  element () {
  if (this.  $ slots.default) {
    return this.listType;
  } еще {
    вернуть 'div';
  }
}  

В этом случае мы проверяем, существует ли слот по умолчанию, то есть у него есть контент для рендеринга.Если это так, то используется тип списка, переданный через свойство listType . В противном случае элемент станет

, который покажет «Нет элементов списка!» сообщение внутри элемента слота. Таким образом, если элементов списка нет, то HTML не будет отображаться как список с одним элементом, в котором говорится, что элементов нет. Последний аспект зависит от вас, хотя неплохо рассмотреть семантику списка без очевидных допустимых элементов. Еще одна вещь, которую следует учитывать, — это потенциальная путаница с инструментами доступности, предполагающая, что это список с одним элементом, в котором просто указано, что элементов нет.
Как и в примере с кнопкой выше, вы можете стилизовать каждый список по-разному. Это может быть основано на селекторах, нацеленных на элемент с именем класса ul. my-list . Другой вариант — динамически изменять имя класса в зависимости от выбранного элемента.
Этот пример следует структуре именования классов, подобной БЭМ:
  <компонент
  : is = "элемент"
 
  : class = "` мой-список __ $ {элемент} `"
>
   Нет элементов в списке! 
  
Использование так же просто, как и в предыдущем примере кнопки:
  <мой- список>
  
 элемент списка 1 



  
 элемент списка 1 



  
 Пункт 1 
  
 Это первый пункт.


   
Каждый экземпляр отображает указанный элемент списка. Однако последний из них приводит к
, в которой нет элементов списка, потому что, ну, нет никакого списка для отображения!
Может возникнуть вопрос, зачем создавать компонент, который переключается между разными типами списков, если это может быть простой HTML. Хотя сохранение списков, содержащихся в компоненте, может иметь преимущества по причинам стилизации и удобства обслуживания, можно рассмотреть и другие причины.Возьмем, например, если некоторые формы функциональности были привязаны к разным типам списков? Может быть, рассмотрите возможность сортировки списка
, который переключается на
, чтобы показать порядок сортировки, а затем вернуться обратно, когда это будет сделано?

Теперь мы управляем элементами

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

на

на основе некоторых критериев.

Если вам нужно использовать троичные решения для управления вещами, выходящими за рамки нескольких атрибутов, я бы посоветовал придерживаться v-if . Необходимость писать больше кода для обработки атрибутов, классов и свойств просто усложняет код больше, чем v-if . В этих случаях v-if упрощает код в долгосрочной перспективе, а более простой код легче читать и поддерживать.

При создании компонента и простого v-if для переключения между элементами рассмотрите этот небольшой аспект основной функции Vue.

Расширяя идею, гибкая карточная система

Рассмотрите все, что мы рассмотрели до сих пор, и примените это в гибком компоненте карты. Этот пример компонента карточки позволяет размещать карточки трех разных типов в определенных частях макета статьи:

• Карта героя: Предполагается, что эта карта будет использоваться вверху страницы и привлечет больше внимания, чем другие карты.
• Карточка с призывом к действию: Используется как строка действий пользователя до или внутри статьи.
• Информационная карточка: Предназначена для котировок.

Считайте, что каждый из них следует системе дизайна, и компонент управляет семантикой и стилем HTML.

В приведенном выше примере вы можете увидеть карточку героя вверху, затем строку с карточками с призывом к действию, а затем — немного прокрутив вниз — вы увидите информационную карточку с правой стороны.

Вот шаблонный код для компонента карты:

  
  
    
       
    
  
  

     
  
  <нижний колонтитул>
    
       
    
  
  

В карточке есть три «составных» элемента.Каждый из них представляет определенный элемент внутри карты, но будет изменен в зависимости от типа карты. Каждый компонент вызывает метод elements () с параметром, определяющим, какой раздел карты выполняет вызов.

Метод elements () :

  элементов (которые) {
  const tags = {
    герой: {корень: 'раздел', заголовок: 'h2', нижний колонтитул: 'дата'},
    cta: {корень: 'раздел', заголовок: 'h3', нижний колонтитул: 'div'},
    информация: {корень: 'в сторону', заголовок: 'h4', нижний колонтитул: 'маленький'}
  }
  вернуть теги [this.тип] [который];
}  

Вероятно, есть несколько способов справиться с этим, но вам придется пойти в том направлении, которое соответствует требованиям вашего компонента. В этом случае есть объект, который отслеживает теги HTML-элементов для каждого раздела в каждом типе карточек. Затем метод возвращает необходимый HTML-элемент на основе текущего типа карты и переданного параметра.

Для стилей я вставил класс в корневой элемент карты в зависимости от типа карты. Это позволяет достаточно легко создать CSS для каждого типа карты в соответствии с требованиями.Вы также можете создать CSS на основе самих HTML-элементов, но я предпочитаю классы. Будущие изменения в компоненте карты могут изменить структуру HTML и с меньшей вероятностью внести изменения в логику создания класса.

Карта также поддерживает фоновое изображение в заголовке карты героя. Это делается с помощью простого вычисления, помещенного в элемент заголовка: bg . Вычислено:

  bg () {
  вернуть этот фон? `background-image: url ($ {this.background}) `: null;
}  

Если URL-адрес изображения указан в опоре background , то вычисленное значение возвращает строку для встроенного стиля, который применяет изображение как фоновое изображение. Довольно простое решение, которое можно легко сделать более надежным. Например, он может поддерживать настраиваемые цвета, градиенты или цвета по умолчанию в случае отсутствия изображения. В его примере нет большого количества возможностей, потому что каждый тип карты потенциально может иметь свои собственные дополнительные свойства, которые разработчики могут использовать.

Вот карта героя из этой демонстрации:

  
  
  <шаблон v-slot: content> Lorem ipsum ... 
  
  

Вы увидите, что каждая секция карточки имеет собственный слот для содержания. И, чтобы не усложнять, текст — это единственное, что ожидается в слотах.Компонент карты обрабатывает необходимый элемент HTML исключительно на основе типа карты. Наличие в компоненте только ожидаемого текста делает использование компонента довольно упрощенным. Это заменяет необходимость принятия решений по структуре HTML, и, в свою очередь, карта просто реализуется.

Для сравнения, вот два других типа, которые используются в демонстрации:

  
  
  
  <шаблон v-slot: footer> нижний колонтитул 



  
  
  
  

Опять же, обратите внимание, что каждый слот ожидает только текст, поскольку каждый тип карты генерирует свои собственные элементы HTML, как определено методом elements () .Если в будущем будет решено использовать другой HTML-элемент, достаточно просто обновить компонент. Встраивание функций для обеспечения доступности — еще одно возможное обновление в будущем. Даже функции взаимодействия могут быть расширены в зависимости от типов карт.

Питание находится в компоненте, который находится в компоненте

Элемент со странным названием в компонентах Vue был предназначен для одной цели, но, как это часто бывает, имеет небольшой побочный эффект, который делает его весьма полезным в других отношениях. Элемент был предназначен для динамического переключения компонентов Vue внутри другого компонента по запросу. Основной идеей этого может быть система вкладок для переключения между компонентами, действующими как страницы; что фактически демонстрируется в документации Vue. Тем не менее, он поддерживает то же самое с элементами HTML.

Это пример новой техники, которой поделился друг, которая стала на удивление полезным инструментом в ряду функций Vue, которые я использовал. Я надеюсь, что эта статья развивает идеи и информацию об этой небольшой функции, чтобы вы могли изучить, как вы можете использовать ее в своих собственных проектах Vue.

Пакет — vue-element-admin

Английский |简体 中文

Введение

vue-element-admin — это интерфейсное решение для фоновой интеграции управления. Он основан на vue и использует элемент UI Toolkit.

Это волшебный администратор vue, основанный на новейшем стеке разработки vue, встроенном решении i18n, типичных шаблонах для корпоративных приложений и множестве потрясающих функций. Это помогает вам создавать большие сложные одностраничные приложения.Я верю, что какими бы ни были ваши потребности, этот проект вам поможет.

Данный проект позиционируется как решение для фоновой интеграции и не подходит для вторичной разработки в качестве базового шаблона.

Этот проект не поддерживает браузеры с более ранними версиями (например, IE). Пожалуйста, добавьте полифиллы самостоятельно, если они вам нужны.

Примечание. В этом проекте используется версия [email protected]+, поэтому минимально совместимая версия [email protected]+

Начать использовать webpack4 из v3.8.0 . Если вы все еще хотите продолжать использовать webpack3 , используйте эту ветку webpack3

Препарат

Вам необходимо установить node и git локально. Проект основан на ES2015 +, vue, vuex, vue-router, axios и element-ui, все данные запроса моделируются с помощью Mock. js. Понимание и изучение этих знаний заранее очень поможет в использовании этого проекта.

---

Характеристики

  - Вход / Выход

- Разрешение аутентификации
  - Разрешение страницы
  - Директивное разрешение
  - Двухэтапный вход

- Сборка с несколькими средами
  - разработчик сидит на сцене

- Глобальные функции
  - I18n
  - Несколько динамических тем
  - Динамическая боковая панель (поддерживает многоуровневую маршрутизацию)
  - Динамическая хлебная крошка
  - Просмотр тегов (вкладка поддерживает операцию щелчка правой кнопкой мыши)
  - Svg Sprite
  - фиктивные данные
  - Полный экран
  - Адаптивная боковая панель

- Редактор
  - Редактор Rich Text
  - Редактор Markdown
  - Редактор JSON

- Excel
  - Экспорт в Excel
  - Экспортный zip
  - Загрузить Excel
  - Визуализация Excel

- Стол
  - Динамический стол
  - Таблица перетаскивания
  - Древесный стол
  - Встроенная таблица редактирования

- Страница ошибки
  - 401
  - 404

- Составные части
  - Загрузка аватара
  - Вернуться к началу
  - Диалог перетаскивания
  - Перетащить Выбрать
  - Перетащить Канбан
  - Перетащить список
  - SplitPane
  - Зона сброса
  - липкий
  - Считать до

- Расширенный пример
- Журнал ошибок
- Приборная панель
- Страница руководства
- ECharts
- Буфер обмена
- Уценка до HTML
  

Начало работы

  # клонировать проект
git clone https: // github. com / PanJiaChen / vue-element-admin.git

# установить зависимость
npm install

# развивать
npm запустить dev
  

Это автоматически откроет http: // localhost: 9527.

сборка

  # build для тестовой среды
npm run build: сидеть

# сборка для производственной среды
npm запустить сборку: prod
  

Продвинутый

  # - отчет о сборке с аналитикой размера пакета
npm run build: prod --report

# - генерировать аналитику размера пакета.по умолчанию: bundle-report.html
npm run build: prod --generate_report

# --preview для запуска локального сервера для предварительного просмотра
npm run build: prod --preview

# код линта
npm run lint

# автоисправление
npm run lint - --fix
  

Дополнительные сведения см. В документации

История изменений

Подробные изменения для каждого выпуска задокументированы в примечаниях к выпуску.

Онлайн-демонстрация

Предварительный просмотр

Пожертвовать

Если вы сочтете этот проект полезным, можете купить автору стакан сока: tropical_drink:

Paypal Me

Купи мне кофе

Поддержка браузеров

Современные браузеры и Internet Explorer 10+.

IE / Edge	Firefox	Хром	Safari
IE10, IE11, Edge	последние 2 версии	последние 2 версии	последние 2 версии

Лицензия

MIT

Copyright (c) 2017-настоящее время PanJiaChen

Текущие теги

• 3.9.3 … последняя (2 года назад)

1 Версии

• 3.9.3 … 2 года назад

Создание нашего первого компонента Vue — Изучение веб-разработки

Теперь пора глубже погрузиться в Vue и создать наш собственный пользовательский компонент — мы начнем с создания компонента для представления каждого элемента в списке задач. Попутно мы узнаем о нескольких важных концепциях, таких как вызов компонентов внутри других компонентов, передача им данных через свойства и сохранение состояния данных.

Предварительные требования:

Знакомство с основными языками HTML, CSS и JavaScript, знание терминала / командной строки. Компоненты Vue написаны как комбинация объектов JavaScript, управляющих данными приложения, и синтаксиса шаблона на основе HTML, который сопоставляется с базовой структурой DOM. Для установки и использования некоторых из более продвинутых функций Vue (например, однофайловых компонентов или функций рендеринга) вам понадобится терминал с установленным node + npm.

Цель:

Чтобы узнать, как создать компонент Vue, отобразить его внутри другого компонента, передать в него данные с помощью свойств и сохранить его состояние.

Давайте создадим наш первый компонент, который будет отображать один элемент списка задач. Мы будем использовать это, чтобы составить наш список задач.

1. В каталоге moz-todo-vue / src / components создайте новый файл с именем ToDoItem. vue . Откройте файл в редакторе кода.
2. Создайте раздел шаблона компонента, добавив в начало файла.
3. Создайте раздел под разделом вашего шаблона. Внутри тегов

   Теперь мы можем начать добавлять фактический контент в наш ToDoItem .В шаблонах Vue в настоящее время разрешен только один корневой элемент - один элемент должен обернуть все внутри раздела шаблона (это изменится, когда выйдет Vue 3). Мы будем использовать

   для этого корневого элемента.

   1. Добавьте теперь пустой

      внутри вашего шаблона компонента.

   2. Внутри этого

      давайте добавим флажок и соответствующую метку. Добавьте id к флажку и для атрибута , сопоставляющего флажок с меткой, как показано ниже.

        <шаблон>
        
      
          
           Мой предмет Todo 
        
        

   Использование TodoItem в нашем приложении

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

   1. Снова откройте App.vue .

   2. Вверху тега

      Использование зарегистрированных свойств

      Теперь, когда эти свойства определены внутри объекта компонента, мы можем использовать эти значения переменных внутри нашего шаблона. Начнем с добавления label prop в шаблон компонента.

      В вашем

      Вернитесь в свой браузер, и вы увидите элемент задачи, отображаемый как раньше, но без метки (о нет!). Зайдите в DevTools вашего браузера, и вы увидите предупреждение в следующих строках в консоли:

       [Vue warn]: отсутствует требуемая опора: "label"
      
      нашел в
      
      --->  в src / components / ToDoItem. vue
              в src / App.vue
               <Корень>
       

      Это потому, что мы отметили метку как обязательную опору, но мы никогда не давали компоненту эту опору - мы определили, где внутри шаблона мы хотим, чтобы он использовался, но мы не передали его в компонент при его вызове . Давай исправим это.

      Внутри файла App.vue добавьте label prop к компоненту , как обычный атрибут HTML:

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

      Итак, это в двух словах. Далее мы перейдем к тому, как Vue сохраняет состояние данных.

      Если вы измените значение label prop, переданное в вызов в вашем компоненте App, вы должны увидеть его обновление. Это здорово. У нас есть флажок с обновляемой меткой. Однако в настоящее время мы ничего не делаем с опорой «done» - мы можем установить флажки в пользовательском интерфейсе, но нигде в приложении мы не записываем, действительно ли выполнено задание.

      Чтобы добиться этого, мы хотим связать свойство done компонента с атрибутом checked в элементе , чтобы он мог служить в качестве записи о том, установлен ли флажок или нет. Однако важно, чтобы свойства служили односторонней привязкой данных - компонент никогда не должен изменять значение своих собственных свойств. Для этого есть много причин. Отчасти редактирование свойств компонентов может затруднить отладку. Если значение передается нескольким дочерним элементам, может быть трудно отследить, откуда исходили изменения этого значения.Кроме того, изменение свойств может привести к повторному рендерингу компонентов. Таким образом, изменение свойств в компоненте вызовет повторную визуализацию компонента, что, в свою очередь, может снова вызвать мутацию.

      Чтобы обойти это, мы можем управлять состоянием done с помощью свойства data Vue. Свойство data - это то место, где вы можете управлять локальным состоянием в компоненте, оно находится внутри объекта компонента вместе со свойством props и имеет следующую структуру:

        data () {
        возвращаться {
          ключ: значение
        }
      }  

      Вы заметите, что свойство data является функцией.Это сделано для того, чтобы значения данных были уникальными для каждого экземпляра компонента во время выполнения - функция вызывается отдельно для каждого экземпляра компонента. Если вы объявили данные как просто объект, все экземпляры этого компонента будут иметь одни и те же значения. Это побочный эффект того, как Vue регистрирует компоненты, и то, что вам не нужно.

      Вы используете и для доступа к свойствам компонента и другим свойствам из внутренних данных, как и следовало ожидать. Вскоре мы увидим пример этого.

      Примечание : из-за того, как и работают в стрелочных функциях (привязка к родительскому контексту), вы не сможете получить доступ к каким-либо необходимым атрибутам изнутри данных , если бы вы использовали стрелочную функцию. Поэтому не используйте функцию стрелки для свойства data .

      Итак, давайте добавим свойство data к нашему компоненту ToDoItem . Это вернет объект, содержащий единственное свойство, которое мы назовем isDone , значение которого равно this.сделано .

      Обновите объект компонента следующим образом:

        экспорт по умолчанию {
        props: {
          label: {required: true, type: String},
          done: {default: false, type: Boolean}
        },
        данные() {
          возвращаться {
            isDone: this.done
          };
        }
      };  

      Vue делает здесь небольшое волшебство - он связывает все ваши свойства напрямую с экземпляром компонента, поэтому нам не нужно вызывать this. props.done . Он также связывает другие атрибуты (данные , , которые вы уже видели, и другие, такие как методы , , , вычисленные, и т. Д.)) прямо к экземпляру. Частично это сделано для того, чтобы сделать их доступными для вашего шаблона. Обратной стороной этого является то, что вам необходимо сохранить уникальность ключей для всех этих атрибутов. Вот почему мы назвали наши данные атрибутом isDone вместо done .

      Итак, теперь нам нужно прикрепить свойство isDone к нашему компоненту. Подобно тому, как Vue использует выражения {{}} для отображения выражений JavaScript внутри шаблонов, Vue имеет специальный синтаксис для привязки выражений JavaScript к элементам и компонентам HTML: v-bind .Выражение v-bind выглядит так:

       v-bind: attribute = "выражение" 

      Другими словами, вы добавляете префикс v-bind к любому атрибуту / опоре, к которой вы хотите привязаться: . В большинстве случаев вы можете использовать сокращение для свойства v-bind , которое состоит в том, чтобы просто префикс атрибута / prop двоеточием. Итак, : attribute = "expression" работает так же, как v-bind: attribute = "expression" .

      Итак, в случае флажка в нашем компоненте ToDoItem мы можем использовать v-bind для сопоставления свойства isDone с атрибутом checked в элементе .Оба следующих эквивалента:

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

      Итак, давайте сделаем это. Обновите элемент сейчас, чтобы заменить checked = "false" на : checked = "isDone" .

      Проверьте свой компонент, передав : done = "true" вызову ToDoItem в App.vue . Обратите внимание, что вам нужно использовать синтаксис v-bind , потому что в противном случае true передается как строка. Отображаемый флажок должен быть отмечен.

        <шаблон>
        
      
          
       Мой список дел 
          
      
            
      
               
            
          
        
      
        

      Попробуйте изменить true на false и обратно, перезагружая приложение между ними, чтобы увидеть, как меняется состояние.

      Отлично! Теперь у нас есть рабочий флажок, в котором мы можем программно установить состояние. Однако в настоящее время мы можем добавить на страницу только один компонент ToDoList , поскольку идентификатор id жестко запрограммирован. Это приведет к ошибкам при использовании вспомогательных технологий, поскольку id необходим для правильного сопоставления надписей с их флажками. Чтобы исправить это, мы можем программно установить id в данных компонента.

      Мы можем использовать метод uniqueid () пакета lodash, чтобы обеспечить уникальность индекса.Этот пакет экспортирует функцию, которая принимает строку и добавляет уникальное целое число в конец префикса. Этого будет достаточно для сохранения уникальности идентификатора компонента .

      Давайте добавим пакет в наш проект с помощью npm; остановите сервер и введите в терминал следующую команду:

        npm install --save lodash.uniqueid  

      Примечание : Если вы предпочитаете пряжу, вы можете вместо нее использовать пряжу , добавить lodash.uniqueid .

      Теперь мы можем импортировать этот пакет в наш компонент ToDoItem .Добавьте следующую строку вверху элемента ToDoItem.vue

      Теперь запустите это на своем сервере разработки с помощью команды:

       npm run serve 

      Vue

      $ реф.

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

      Очень важно, чтобы вы правильно поняли синтаксис, потому что это означает, что Vue не считает это ошибкой, но это так.Согласно тому, что мы уже знаем о ссылках Vue, они возвращают объект, но, судя по неопределенному ответу, что-то не так.

      Скопируйте приведенный ниже код в файл test. vue :

       <шаблон>
        
      
          
       Привет, это судья! 
          
       Вы насчитали {{this.counter}} раз 
          
           Добавить 1 в счетчик 
        
      
      <сценарий>
      экспорт по умолчанию {
        имя: 'Тест',
        данные(){
          возвращаться {
            счетчик: 0
          }
        },
        методы: {
          Разместить(){
            это.счетчик ++;
            console.log (this. $ refs)
          }
        }
      }
       

      Когда вы запустите это и проверите, вы заметите, что теперь он возвращает объект:

      Беглый взгляд на блок кода покажет правильный синтаксис: внутри шаблона он называется ref , но когда мы ссылаемся на него в экземпляре Vue, он называется $ refs . Это очень важно отметить, чтобы не вернуть undefined. Вы можете получить доступ ко всем возможным свойствам элемента, на который имеется ссылка, включая элемент в том виде, в котором он находится в шаблоне.

      Получение элементов DOM в Vue.

      js

      Давайте попробуем зарегистрировать некоторые свойства, которые могут нас заинтересовать. Ваш файл test.vue должен быть:

       <шаблон>
        
      
          
       Привет, это судья! 
          
       Вы насчитали {{this.counter}} раз 
          
           Добавить 1 в счетчик 
        
      
      <сценарий>
      экспорт по умолчанию {
        имя: 'Тест',
        данные(){
          возвращаться {
            счетчик: 0
          }
        },
        методы: {
          Разместить(){
            это.счетчик ++;
            console.log (this. $ refs)
          }
        }
      }
      
      <область действия стиля>
      p, input, button {
        размер шрифта: 30 пикселей;
      }
      input, button {
        размер шрифта: 20 пикселей;
      }
      ul {
        тип-стиль-список: нет;
        отступ: 0;
      }
      li {
        дисплей: встроенный блок;
        маржа: 0 10 пикселей;
      }
      a {
        цвет: # 42b983;
      }
       

      Приложение в вашем браузере должно выглядеть так:

      Отображение HTML-элементов в Vue.js

      Чтобы отобразить элемент HTML, как он есть в DOM, перейдите в метод отправки и измените код методов на следующий:

       методов: {
          Разместить(){
            это. счетчик ++;
            console.log (this. $ refs.input)
          }
        } 

      Здесь вводится ссылочное имя, которое вы ранее создали внутри элемента ( ref = "input" ). Это может быть любое имя по вашему выбору.

      Отображение входного значения HTML

      Чтобы отобразить входное значение элемента HTML - строку, введенную в текстовое поле в пользовательском интерфейсе - перейдите в метод submit и измените код на:

       методов: {
          Разместить(){
            this.counter ++;
            консоль.журнал (this. $ refs.input.value)
          }
        } 

      Здесь отображается именно та строка, которую вы вводите, что показывает сходство с выбором запроса, которого также могут достичь ванильный JavaScript и jQuery.

      Отображение URL-адреса элемента Vue

      Веб-страница, на которой можно найти элемент, также является одной из многих вещей, которые можно отобразить с помощью Vue ref. Перейдите в метод submit и измените код на этот:

       методов: {
          Разместить(){
            this. counter ++;
            консоль.журнал (this. $ refs.input.baseURI)
       }
      } 

      Есть много других вещей, к которым вы можете получить доступ и войти с помощью ссылки только на основе информации о возвращенном объекте.

      Обработка условных выражений в Vue.js

      Vue.js refs также можно использовать внутри элементов, которые выводят более одного элемента в DOM, например условные операторы, в которых используются директивы v-for . Вместо объектов refs при вызове возвращают массив элементов. Чтобы проиллюстрировать это, создайте простой список вроде этого:

       <шаблон>
        
      
          
       Я номер машины {{car}} 
           Просмотреть ссылки 
        
      
      <сценарий>
      экспорт по умолчанию {
        имя: 'Тест',
        данные(){
          возвращаться {
          }
        },
        методы: {
          Разместить(){
            консоль.журнал (this. $ refs)
          }
        }
      }
       

      Когда вы снова запустите его на сервере разработки, он будет выглядеть так:

      Вы можете найти полный код этого руководства на GitHub здесь.

      Посмотрите на DOM в приложениях Vue точно так, как это делает пользователь.

      Отладка приложений Vue.js может быть трудной, особенно когда за сеанс пользователя происходят десятки, если не сотни мутаций. Если вы заинтересованы в мониторинге и отслеживании мутаций Vue для всех ваших пользователей в рабочей среде, попробуйте LogRocket.https://logrocket.com/signup/

      LogRocket похож на цифровой видеорегистратор для веб-приложений, записывающий буквально все, что происходит на вашем сайте. Вместо того, чтобы гадать, почему возникают проблемы, вы можете агрегировать и сообщать о том, в каком состоянии находилось ваше приложение, когда возникла проблема.

      Плагин LogRocket Vuex регистрирует мутации Vuex в консоли LogRocket, давая вам контекст о том, что привело к ошибке и в каком состоянии было приложение, когда возникла проблема.

      Модернизируйте отладку приложений Vue - начните мониторинг бесплатно.

      Заключение

      В этом посте вы можете ссылаться на HTML-элементы в вашей DOM в Vue. js. Теперь вы можете получать доступ к этому элементу и регистрировать его по всем свойствам элементов, таким как значение, дочерний узел, атрибуты данных и даже базовый URL-адрес, в котором он находится.

      Вам также рассказали о способах достижения этой цели. Важно отметить, что ссылки заполняются после инициализации экземпляра Vue и рендеринга компонента, поэтому использование ссылок в вычисленных свойствах не рекомендуется, поскольку у него есть возможность напрямую управлять дочерними узлами.Удачного взлома!

      .

      No related posts.

   Share :