VueJs не показывает исходный код компонента

Question

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

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

просмотр в браузере Chrome

просмотр в IDE

просмотр в Chrome Исходный код

Как видите, тега <button> нетв исходном коде Chrome

Как сделать так, чтобы при использовании компонентов я хотел полностью отобразить HTML, например, здесь:

исходный код моего jQuery DataTable

Еще один вопрос, связанный с темой.Имеет ли значение, что компоненты сокращают весь HTML до «одной строки» для поиска в браузерах?

Answer 1

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

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

Если вам нужны дополнительные средства отладки, вы можете проверить расширение Vue devtools Chrome.

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