Эта структура использует «высокую развязку», что позволяет разработчикам постепенно создавать пользовательские интерфейсы (UI).
Почему именно Vue.js?
Модуляризация библиотек с использованием фреймворка - обычное дело при разработке интерфейса. И React, и Angular имеют модуляризацию. Но то, что отличает Vue.js от других альтернатив, - это его «высокая степень развязки», то, как легко расширять функциональные возможности, и насколько хорошо все части работают после включения дополнительных модулей. Например, если мы хотим организовать и отобразить небольшие визуальные компоненты, все, что нам нужно, это «основная» библиотека Vue.js; нет необходимости включать дополнительные библиотеки. По мере роста приложения у нас появляются библиотеки для управления маршрутами, такие как «vue-router», библиотеки для управления глобальным состоянием, такие как «vuex», или библиотеки для создания отзывчивых веб-приложений, таких как «bootstrap-vue». Кроме того, если наше приложение требует оптимизации или хорошего SEO, мы можем включить библиотеку vue-server-rendering. На следующем рисунке
Если вы ищите Front-end программистов со знанием Vue.js, то это 10 быстрых вопросов, которые следует задать ит специалисту на собеседовании.
1. Что такое Vue.js?
Vue.js - это внешний интерфейс JavaScript для создания пользовательских интерфейсов с упором на одностраничные приложения. Он способствует «высокой развязке», что упрощает разработчикам создание пользовательских интерфейсов и быстрое прототипирование.
2. Каковы преимущества Vue.js?
Vue js легкий и, следовательно, высокопроизводительный. Он удобен для разработчиков, поэтому его легко освоить. Он очень гибкий и имеет отличные инструменты.
3. Что такое экземпляр Vue?
Экземпляр Vue, который часто называют vm приложением Vue, - это ViewModel шаблона MVVM, которому следует Vue. Экземпляр Vue является корнем приложения Vue.
новый Vue ({
render: h => h (App),
}). $ mount ('# app')
Создается новый экземпляр Vue и монтируется к элементу HTML, содержащему идентификатор #app.
4. В чем разница между v-if и v-show?
v-iv не будет отображать элемент в DOM, если выражение оценивается как false. В случае v-show, он будет отображать элемент в DOM несмотря ни на что, но будет скрыт, если false. v-if поддерживает v-else v-else-if может использоваться внутри <template>элемента, v-show не поддерживает это.
5. Что такое компоненты Vue?
Компоненты Vue - это многократно используемые экземпляры Vue, у которых есть имя. Они поддерживают те же свойства, что и корневой экземпляр Vue, такие как данные, методы, вычисленные, часы, миксины, а также методы жизненного цикла (небольшие вариации того, как это написано в компоненте). Ниже приведен пример компонента Vue.
<template>
<div>
<p> {{name}} </p>
</div>
</template>
<script>
экспорт по умолчанию {
name: '10 вопросов на собеседовании Quick-Fire Vue '
}
</script>
<область действия стиля>
p {
padding: 10px;
размер шрифта: 30 пикселей;
}
</style>
6. В чем разница между локальной и глобальной регистрацией компонента?
Глобальная регистрация компонента позволяет [повторно] использовать его во всем приложении, даже в других компонентах. Локальные компоненты могут использоваться только в том компоненте, в котором они были зарегистрированы.
Вы можете зарегистрировать компонент глобально, используя Vue.component(name, component Data)и зарегистрировать компонент локально, добавив его к components свойству компонента, к которому вы хотите его добавить.
7. Что такое реквизит?
Свойства - это настраиваемые атрибуты, которые можно зарегистрировать для компонента. При передаче из другого компонента или корневого экземпляра Vue свойство становится свойством компонента, которому вы его передали. Вы можете указать несколько свойств, а также определить их тип.
Vue.component ('myComponent', {props
: ['name'],
// ИЛИ
// props: {name: String},
template: '<div> Hello {{name}} </div>'
})
<my-component name = "Джузеппе Кампанелли"> </my-component>
8. Как реализовать двустороннюю привязку?
Вы можете добиться двусторонней привязки, указав v-model свойство в элементе ввода. Это гарантирует, что при изменении значения элемента изменится и свойство данных Vue. И если свойство данных изменится, изменится и значение в поле ввода.
<input type = "text" v-model = "firstName">
<p> Здравствуйте, {{firstName}} </p>
В этом примере, если firstName он изменен с помощью ввода или метода, изменение будет отражено в обоих.
9. Что такое миксины?
Миксины - это гибкий способ, позволяющий распределять функции между компонентами. Примесь может содержать любую опцию компонента. Когда компонент ссылается на один или несколько миксинов, параметры миксина будут «смешаны» с компонентом.
В случае конфликта данных свойство данных компонентов будет иметь приоритет. То же самое и с методами, компонентами, директивами. Что касается одноименных хуков жизненного цикла, оба будут объединены в массив, в котором хук миксина будет вызываться перед хук компонентом.
var mixin = {
data: function () {
return {
message: 'hello from mixin'
}
},
created: function () {
console.log ('миксин-крючок вызван')
}
}
новый Vue ({
mixins: [mixin],
data: function () {
return {
message: 'hello from component'
}
},
created: function () {
console.log ('component hook called')
}
})
В этом примере свойство данных сообщения из компонента будет иметь приоритет и использоваться над свойством в миксине. В случае created ловушки жизненного цикла первым будет вызываться тот, который находится в миксине, а затем - в компоненте.
Примечание: глобальное применение миксина повлияет на каждый экземпляр Vue.
10. Что такое Vue Router?
Vue Router - официальный маршрутизатор Vue.js для создания страниц с разными маршрутами. Он поддерживает вложенную маршрутизацию, отображение представления и легко настраивается; параметры маршрута, запросы, подстановочные знаки.
11. Каковы особенности и возможности vue-router?
- Вложенное сопоставление маршрута / представления
- Модульная конфигурация маршрутизатора на основе компонентов
- Параметры маршрута, запрос, подстановочные знаки
- Просмотр эффектов перехода на основе системы перехода Vue.js
- Детальное управление навигацией
- Ссылки с автоматическими активными классами CSS
- Режим истории HTML5 или режим хеширования с автоматическим откатом в IE9
- Настраиваемое поведение прокрутки