Резюме в одном предложении: с идеей привязки данных Vue может просто написать одну страницу, большую интерфейсную систему или интерфейс для мобильного приложения.
1. Что такое Vue.js?
прогрессивная рамка
Инкрементальная разработка «снизу вверх»
легко учить
Легко интегрируется
Vue.js (произносится как /vjuː/, похоже на view) — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от других тяжеловесных фреймворков, Vue использует инкрементальную разработку снизу вверх. Основная библиотека Vue ориентирована только на уровень представления, и ее очень легко изучить и интегрировать с другими библиотеками или существующими проектами. С другой стороны, Vue полностью способен управлять сложными одностраничными приложениями, разработанными с использованием однофайловых компонентов и библиотек, поддерживаемых экосистемой Vue.
2. Для какого типа интерфейса подходит vue.js?
А. Есть много элементов формы
Б. Контент должен быть изменен в соответствии с действиями пользователя.
Vue.js — это веб-приложение, которое используется для создания веб-приложения со многими элементами формы, аналогичными веб-версии Zhihu, и содержимое необходимо изменять в соответствии с действиями пользователя.
3. Что такое одностраничное приложение (SPA)?
Страница — это приложение (суб-приложение)
Как следует из названия, одностраничное приложение обычно относится к странице, которая является приложением, конечно, оно также может быть подприложением, например, страница Zhihu может рассматриваться как подприложение. Как правило, в одностраничном приложении выполняется много операций взаимодействия, и содержимое страницы должно динамически изменяться в соответствии с действиями пользователя.
4. Я также могу использовать JQuery для написания упомянутой ранее веб-версии Zhihu Зачем использовать Vue.js?
А. Продукт абсолютно необходимо неоднократно пересматривать
б) Модификация может привести к изменению ассоциации и уровня вложенности DOM, что делает код, связанный со структурой jquery, чрезвычайно сложным.
c, vue.js может решить эту проблему
Вы все еще помните, что когда вы писали JQuery, вы писали ('#xxx').parent().parent().parent()? Когда пишешь в первый раз думаешь что элементов на странице не так много.Не ищет ли просто отца отца этого элемента?Мне важно четко написать отец отца этого элемента в комментарии. Но если руководитель вашей проектной группы или менеджер по продукту через несколько дней вдруг сделает запрос на модификацию вашей веб-страницы, этот запрос на модификацию повлияет на структуру страницы, то есть изменится ассоциация и уровень вложенности DOM. Тогда ('#xxx').parent().parent().parent() может стать $('#xxx').parent().parent().parent().parent().parent() up.
В этом нет ничего страшного, в дальнейшем итерация продукта будет становиться все быстрее и быстрее, а модификаций будет все больше и больше, а похожих связанных и вложенных DOM-элементов на странице не один, так что будет очень трудоемко модифицировать. Кроме того, селектор JQuery для поиска элементов страницы и сама операция DOM также имеют потери в производительности, он может все больше и больше зависать при открытии страницы, и у вас нет возможности запуститься.
На данный момент, если вы изучили Vue.js, этих жалоб больше не будет.
5. Какой слой представления часто упоминается во внешнем интерфейсе?
Мы можем отделить DOM в HTML от других частей и разделить его на слой, который называется слоем представления.
Основная библиотека Vue фокусируется только на слое представления.
6. Процесс использования jquery для разработки полной страницы?
а, структура письма html
б. украшение css
c. js-взаимодействие
Когда дело доходит до JQuery, мы должны говорить о манипулировании DOM в JavaScript. Если вы используете JQuery для разработки Zhihu, вам нужно использовать различные методы манипулирования DOM в JQuery, чтобы манипулировать структурой DOM HTML.
Теперь давайте абстрагируем приложение веб-страницы, тогда DOM в HTML на самом деле является представлением, а веб-страница формирует самую базовую структуру представления за счет комбинации и вложения DOM, а затем с помощью оформления CSS в базовой структуре представления «Макияж». чтобы они выглядели лучше. Наконец, когда дело доходит до интерактивной части, вам нужно использовать JavaScript, чтобы принять интерактивный запрос пользователя и ответить на интерактивную операцию пользователя через механизм событий, а также изменить различные данные в функции обработки событий, например, изменить определенный DOM. , Часть innerHTML или innerText файла .
7. Почему Vue.js делает разработку клиентских веб-приложений такой удобной?
а) декларативный
б. Отзывчивая привязка данных
в. Компонентная разработка
г. Виртуальный дом
Потому что Vue.js имеет декларативную, гибкую привязку данных и разработку на основе компонентов, а также использует Virtual DOM, технологию, которая кажется технологией высокого уровня.
8. Что такое динамическая привязка данных, часто упоминаемая в vue.js?
То есть vue.js будет автоматически реагировать на изменения данных, и в соответствии с отношениями привязки, предварительно прописанными пользователем в коде, все связанные данные и содержимое представления будут изменены. И эта связь привязки объявлена в атрибуте v-model тега input на диаграмме, поэтому вы также можете увидеть, как кто-то грубо называет vue.js механизмом шаблонов декларативного рендеринга в другом месте.
9. Почему компонентная разработка во фронтенде?
А. Некомпонентный код разработки и рабочая нагрузка очень велики.
б) лучше умереть, чем модифицировать
Но сейчас мы делаем одностраничное приложение, взаимодействие и структура страницы очень сложны, на странице нужно написать много модулей, и часто объем кода и нагрузка на модуль очень велики, если вы все еще следите оригинальный метод разработки, то это будет утомительно. Кроме того, вносить изменения при изменении требований к продукту в будущем также очень хлопотно, я боюсь, что после перемещения одного из div лавиной последуют остальные, и вся страница будет перепутана, либо из-за механизм всплытия событий JavaScript, некоторые внутренние события DOM будут изменены.После обработки функции появились различные необъяснимые и странные ошибки.
10. Как осуществлять разработку компонентов во фронтенде?
А. Модульная идея заимствованного бэкенда объектно-ориентированного (разбить некоторые большие функции на множество функций, а затем поручить их разработку разным людям)
б. Разделить различные модули в одностраничном приложении на отдельные компоненты. Нам нужно только сначала написать различные теги компонентов (занимающие отверстия) в родительском приложении, а затем прописать теги компонентов. Лучше передать параметры компонента (так же, как и передача параметров в функцию, этот параметр называется атрибутом компонента), а затем написать реализацию различных компонентов отдельно (заполнить пробел)
В объектно-ориентированном программировании мы можем использовать объектно-ориентированное мышление для упаковки различных модулей в классы или разделения большого бизнес-модуля на более мелкие классы. В процедурном программировании мы также можем разделить некоторые большие функции на множество функций, а затем поручить их разработку разным людям.
Можем ли мы инкапсулировать модули во внешних приложениях, как программирование? Это вводит идею компонентного развития.
Vue.js разбивает различные модули в одностраничном приложении на отдельные компоненты (компоненты) через компоненты.Нам нужно только сначала написать различные метки компонентов (занимающие ямы) в родительском приложении, а в поле Записать параметры, которые будут переданы в компонента в метке компонента (так же, как и передача параметров в функцию, этот параметр называется атрибутом компонента), а затем написать реализацию различных компонентов отдельно (заполнить дыру), и тогда все приложение готово. .
11. Зачем нужна технология Virtual DOM?
а. проблема
Сейчас скорость интернета становится все быстрее и быстрее, у многих людей в домах десятки, а то и сотни мегабит оптического волокна, а их мобильные телефоны тоже начинают с 4G. Браузер сам будет кешировать много файлов ресурсов, так почему же все еще кажется очень медленным открытие страницы, которая была открыта ранее и уже была закеширована десятками М-волокнов?
б) причина
(1) У самого браузера также есть узкое место в производительности при обработке DOM.
(2) При использовании функций манипулирования DOM JQuery или собственного JavaScript для частого управления DOM браузер должен постоянно отображать новые деревья DOM.
Это связано с тем, что у самого браузера есть узкое место в производительности при обработке DOM.Особенно при традиционной разработке, когда DOM часто манипулируют с помощью JQuery или собственных функций манипулирования DOM JavaScript, браузер должен продолжать отображать новые деревья DOM.Заставляет страницу выглядеть очень застрял.
12. Как реализован виртуальный DOM?
А. Предварительно вычислить различные операции dom и отобразить последний результат (уменьшить количество рендерингов dom)
Виртуальный DOM - это виртуальный DOM на английском языке. Короче говоря, это своего рода расчет, который может быть выполнен заранее с помощью JavaScript, а окончательная операция DOM может быть рассчитана и оптимизирована. Поскольку эта операция DOM является операцией предварительной обработки, существует нет реальных манипуляций с DOM, поэтому он называется виртуальным DOM. Наконец, после завершения расчета операция DOM фактически отправляется, и изменения операции DOM отражаются в дереве DOM.
13. Как использовать Vue.js для разработки одностраничных приложений?
На самом деле, вы можете напрямую посмотреть обучающее видео и начать работать, оно должно быть лучшим.
А. Введение - Основная часть официальной документации vue.js трудно читается.
Я предлагаю внимательно изучить введение — основы официальной документации vue.js. Помимо того факта, что в разделе компонентов используется много неясных терминов, первые несколько глав посвящены использованию Vue.js в качестве механизма шаблонов.
б. Базовое использование ECMAScript6, Webpack, NPM и Vue-Cli, лучше всего иметь представление о Node.js
Затем начните изучать основы использования ECMAScript6, Webpack, NPM и Vue-Cli, желательно с пониманием Node.js.
в) Посмотрите различные практические видеоролики и статьи в Интернете, а также другой открытый исходный код.
В конце давайте в общих чертах посмотрим на компонентную часть, чтобы понять концепции в компонентах, а затем приступим к просмотру различных практических видео и статей в Интернете, а также другого открытого исходного кода.
14. Что такое ECMAScript?
Связь между ECMAScript и JavaScript заключается в том, что первый является спецификацией второго, а второй — реализацией первого (другие диалекты ECMAScript включают Jscript и ActionScript). В повседневных ситуациях эти два слова взаимозаменяемы.
А ECMAScript6 — это новое поколение языка JavaScript.
15. Что такое Webpack?
A. Передние инструменты упаковки
Webpack — это интерфейсный инструмент для упаковки и сборки. Если вы раньше писали HTML, CSS и JavaScript и импортировали CSS в свои файлы HTML через тег link и внешние сценарии JS через атрибут src тега Script, то вы определенно не знакомы с этим инструментом. Не беда, давайте сначала разберемся, зачем используется Webpack, а потом изучим его с причинами.
16. Зачем использовать Webpack?
А. Удобно управлять различными материалами
б. Упаковано, чтобы уменьшить количество посещений браузера
Как упоминалось ранее, сделать одностраничное приложение само по себе достаточно сложно, и при его создании обязательно будет использоваться много материалов и других сторонних библиотек, как мы справляемся с этими вещами?
Также упоминалось ранее, что Webpack — это интерфейсный инструмент упаковки, почему внешний код должен быть упакован? Поскольку в одностраничном приложении используется много материалов, если каждый материал представлен атрибутом src или ссылкой в HTML, то при запросе страницы браузер может сделать более десяти запросов, и они часто запрашиваются. все ресурсы представляют собой коды скриптов или маленькие картинки.Сами эти ресурсы весят всего несколько килограммов, а загрузка не занимает и 1 секунды.Однако, поскольку HTTP является протоколом прикладного уровня, то его нижним уровнем является протокол транспортного уровня TCP, а TCP рукопожатие и волна Процесс может занять больше времени, чем загрузка самого ресурса, поэтому необходимо упаковать все эти небольшие файлы в один файл, чтобы только один процесс TCP рукопожатия и волны загрузит несколько ресурсов, а будет загружено несколько ресурсов из-за того, что все они совместно используют HTTP-запрос, поэтому голова и другие части также являются общими, что эквивалентно формированию эффекта масштаба, что ускоряет отображение веб-страницы и улучшает взаимодействие с пользователем.
17. Что такое NPM и Node.js? Как они связаны?
А. Node.js — это серверная среда выполнения JavaScript.
Node.js – это серверная среда выполнения JavaScript. Благодаря Node.js вы можете писать независимые программы на JavaScript.
б) Node.js может писать независимые программы (Webpack написан Node.js)
Как мы упоминали ранее, Webpack написан на Node.js, поэтому, как разработчик интерфейса, даже если вам не нужно писать независимые программы с Node.js, вы должны иметь среду выполнения Node.js. многие интерфейсные инструменты написаны с его использованием.
c, NPM — это менеджер пакетов node.js (похожий на maven в java (управление зависимостями пакетов), аналогичный есть и в php).
NPM — это менеджер пакетов для node.js. Когда мы были в традиционной разработке, большая часть JQuery.js была поиском Baidu, а затем загружалась с официального сайта или напрямую импортировала ресурсы CDN, этот метод был слишком хлопотным. Если в будущем мы столкнемся с другими пакетами, код этого пакета также может вызывать другие пакеты (так же называется этот пакет имеет зависимости с другими пакетами), то нам придется внедрять пакет в собственный проект, который будет очень сложно изменить. Теперь, когда у нас есть NPM, менеджер пакетов, мы можем напрямую передать
npm установить имя пакета xxx
способ представить его, например
npm install vue
18. Что такое Vue-CLi?
Это инструмент для создания каркасов для vue.js. Грубо говоря, это инструмент, который автоматически создает для вас каталог проекта, настраивает Webpack и различные зависимые пакеты.
npm install vue-cli -g
Способ установки, последний -g означает глобальную установку, что означает, что вы можете вызвать ее напрямую через команду vue после открытия командной строки.
19. Что такое Vuex и Vue-route
Vuex — это менеджер состояний для vue. Используется для централизованного управления различными состояниями в одностраничном приложении.
Vue-маршрут - это интерфейс маршрутизатора для Vue. Этот маршрутизатор не является маршрутизатором, который у нас есть в Интернете, но входная запись по управлению и сопоставлением страницы. Это позволяет заменять страницу частичную, чтобы пользователь почувствовал, что страница включена.
Четко говорите об этих двух вещах, вам нужно потратить много места, поэтому здесь просто краткое упоминание, сначала изучите сам vue.js, это самое важное.