Перевод: сумасшедший технический ботаник
оригинал:Уууу.
Копирование без разрешения строго запрещено
1. Почему Vue, известный как «постепенные рамки»?
Использование прогрессивной платформы требует небольших затрат, что упрощает внедрение и миграцию существующих проектов (проектов, созданных с использованием других технологий) на новую платформу. Vue.js — это прогрессивный фреймворк, потому что вы можете постепенно внедрять его в существующее приложение без необходимости переписывать всю программу с нуля.
Самая основная и основная часть Vue включает слой «представление», поэтому вы можете начать свое путешествие, постепенно внедряя Vue в свою программу и заменяя реализацию «представления».
Из-за своего развивающегося характера Vue очень хорошо работает с другими библиотеками, и с ним очень легко начать работу. Это отличается от таких фреймворков, как Angular.js, которые требуют полного рефакторинга и реализации существующих программ в этом фреймворке.
2. Что такое декларативный рендеринг в Vue.js?
Vue.js упрощает визуализацию данных и скрывает внутреннюю реализацию. Например следующий код:
HTML
<div id=”app”></div>
JavaScript
const greeting = “Hello there!”;
const appDiv = document.getElementById(“app”);
appDiv.innerText = greeting;
Приведенный выше сегмент кода отобразят фразу «Привет!» В Div «Приложение» DIV. Код содержит все шаги, необходимые для реализации результатов. Сначала выберите элемент DOM ID «App», затем вручную установите содержимое DIV с свойством Innerntext.
Теперь давайте посмотрим, как это делается в Vue.
Template
<div id=”app”>{{ greeting }}</div>
App
new Vue({
data: {
greeting: ‘Hello There!’
},
el: ‘#app’
});
Мы создали свойство данных под названием «приветствие» в программе Vue, но просто набрали «приветствие» в div, используя синтаксис усов, и не заботились о внутренней реализации. Мы объявляем переменную «приветствие», а Vue делает все остальное. Так выглядит декларативный рендеринг. Vue скрывает и управляет внутренней информацией.
3. Какую инструкцию вы используете для перебора свойств объекта?
Чтобы перебрать объект или массив, вы можете использоватьv-forинструкция. Ниже приведен пример:
Template
<div id="app">
<ul>
<li v-for="(value, key) in card">{{ key }} - {{ value }}</li> </ul>
</div>
App
new Vue({
el: '#app',
data: {
card: {
name: 'John Doe',
age: 25,
city: 'New York',
country: 'US'
}
}
});
выход
- name - John Doe
- age - 25
- city - New York
- country - US
4. Дайте шаблон, описывающий вывод программы Vue.
шаблон:
{{title}}
App:
new Vue({
el: '#app',
data: {
title: 'Vue.js'
}
})
Приведенный выше код выведет строку в div<h1 style="color: green;">Vue.js</h1>. Причина, по которой весь тег отображается в виде строки, связана с тегом шаблона усов.{{title}}Обрабатывайте входящие данные как строку, не преобразовывая ее в исполняемый код. Это также помогает смягчить проблемы, связанные с XSS, которые внедряют вредоносный код на страницы. Это похоже на использование в JavaScriptelementSelector.innerText = textутверждение.
5. Как реализовать двустороннюю привязку данных между полем ввода и свойством данных?
Для реализации двусторонней привязки данных можно использовать директиву v-model. Директива v-model в основном представляет собой синтаксический сахар:
<input type="text" :value="nameInput" @keyup="nameInput = $event.target.value">
В приведенном выше выражении всякий раз, когда наблюдается событие «keyup», свойство данных с именем «nameInput» устанавливается равным значению поля ввода. Кроме того, привяжите свойство value поля ввода к свойству данных «nameInput». Это устанавливает двустороннюю связь данных между полем формы и атрибутом данных.
v-model может это сделать, и это более эффективно, чем установка вручную. Чтобы воспроизвести описанный выше эффект с помощью v-model, снова введите следующее в то же поле ввода:
<input type="text" v-model="nameInput">
Важно отметить, что при реализации двусторонней привязки данных используемое свойство данных считается источником де-факто. Любые изменения, внесенные в атрибут данных, будут иметь приоритет над событиями пользовательского ввода в полях формы.
6. Как вы регистрируете события кликов по элементам?
можно использоватьv-on:clickДиректива фиксирует событие Click. Эту команду также можно использовать с сокращениями.@clickВыражать. Вот пример:
V-on: нажмите Символ
<a v-on:click=”clickHandler”>Launch!</a>
символ @щелчка
<a @click=”clickHandler”>Launch!</a>
7. Что такое динамическая опора?
Когда свойству присваивается значение как функция, связанная со свойством с помощью директивы v-bind, оно называется динамическим свойством. Например, следующие компонентыtweetСвойство привязано к свойству данных с именем tweetText. Это противоположно статическим жестко заданным значениям. Эта привязка всегда односторонняя, то есть данные могут передаваться от родителя к дочернему элементу, а не наоборот.
<TweetBox :tweet=”tweetText”>
8. Что такое директивы в Vue.js?
Директивы — это ряд специальных атрибутов, которым можно придать особую адаптивную функциональность, добавив их в HTML-теги шаблона. Директивы позволяют элементам в шаблоне реагировать на изменения в соответствии с определенной логикой, используя атрибуты данных, методы, вычисляемые или наблюдаемые свойства и встроенные выражения. Например, в следующем коде директива v-on используется для реализации прослушивателя событий щелчка в компоненте.
<SignUpButton v-on:click=”doSignup” />
или
<SignUpButton @click=”doSignup” />
В этом примере мы используем директиву v-if для отображения или удаления элементов и компонентов на основе свойства данных, называемого showButton. команда сv-для указания специфичных для Vue свойств. Исключением из этого правила является сокращение для v-on и v-bind.
<SignUpButton v-if=”showButton” />
Vue также позволяет определять ваши собственные пользовательские директивы.
9. Каково назначение команды v-show?
Директива v-show позволяет отображать элементы условно. В приведенном ниже коде, только еслиisDisplayedАтрибут данныхtrueКогда элемент появится.
<TweetBox v-show=”isDisplayed”>
При использовании директивы v-show вы можете использовать CSSdisplayАтрибут переключает видимость элемента.
10. В чем разница между директивами v-show и v-if?
И v-show, и v-if используются для условного отображения элементов, а последний обеспечивает реальную реализацию условного рендеринга. v-show просто переключает CSSdisplayАтрибуты показывают или скрывают элементы, а директивы v-if создают или уничтожают компоненты. Стоимость обычно увеличивается каждый раз, когда изменяется состояние отображения.
С другой стороны, v-show дешевле, потому что он переключает только свойства отображения CSS элемента. Поэтому, если вам приходится часто переключать элементы, v-show дает лучшие и более оптимизированные результаты, чем v-if .
Что касается начальной стоимости рендеринга загрузки элемента, v-if не отображает узел изначально скрытого элемента, а v-show отображает его CSS.displayсвойство установлено наnoneЭлементы.
11. Для поля комментария, реализованного как элемент, мы хотим, чтобы пользователь мог нажать клавишу Enter на клавиатуре, чтобы отправить содержимое методу с именем «storeComment». Продемонстрируйте это в коде.
Слушатели событий могут быть реализованы на любом элементе с помощью директивы v-on. Кроме того, v-on позволяет нам использовать ключевые модификаторы для общих клавиш, таких как «enter», «tab», «esc», «пробел» и т. д. Вот пример:
шаблон
<textarea @keyup.enter="storeComment"></textarea>
App
new Vue({
el: '#app',
methods: {
storeComment(event) {
// access the value of the textarea box using event.target.value or use v-model to bind to a data property
}
}
});
12. Как реализовать маршрутизацию в одностраничном приложении Vue (SPA)?
Маршрутизация в SPA, созданных с помощью Vue, возможна через официальную библиотеку vue-router. Библиотека предоставляет полный набор функций, который включает в себя такие функции, как вложенные маршруты, параметры маршрута и подстановочные знаки, переходы, история HTML5 и хэш-шаблоны, а также настраиваемое поведение прокрутки. Vue также поддерживает некоторые сторонние пакеты маршрутизаторов.
13. Как лучше всего вызвать event.preventDefault() при использовании Vue?
Вызывается прослушивателем событийevent.preventDefault()Лучший способ - поставить.preventмодификатор сv-onинструкции используются вместе. Вот пример:
<a @click.prevent=”doSomethingWhenClicked”>Do Something</a>
14. Что такое фильтр?
Фильтры — это очень простой способ реализации пользовательского форматирования текста в программе Vue. Они похожи на операторы, которые можно передать (используя символ вертикальной черты) в выражении для получения результата. Вот пример фильтра, который переворачивает текстовую строку:
шаблон
<div id="app">{{ title | reverseText }}</div>
App
new Vue({
el: '#app',
data: {
title: 'This is a title'
},
filters: {
reverseText(text) {
return text.split('').reverse().join('');
}
}
});
выход
eltit a si sihT
В приведенном выше примере мы создали фильтр reverseText, который переворачивает текстовую строку и возвращает ее. Это простая функция, которая принимает ввод и возвращает обработанный вывод. Он становится фильтром, который можно использовать в шаблонах, объявив его под фильтром.
В шаблоне мы просто подключаем фильтр reverseText к переменной данных, которую хотим отобразить в теге усов. Это позволяет соединить несколько фильтровальных трубок вместе. Таким образом, фильтры обеспечивают очень элегантный способ работы с текстом.
15. Как динамически переключать классы CSS для элемента?
Vue позволяет нам привязываться к свойствам класса. В приведенном ниже примере мы привязываем атрибут класса к объекту, что позволяет переключать классы с помощью атрибута данных.
шаблон
<div :class=”{ divStyle : showDiv }”></div>
App
new Vue({
el: '#app',
data: {
showDiv: true
}
});
В приведенном выше коде, пока атрибут данныхshowDivдляtrue, имя классаdivStyleбудет применяться к div.
16. Как связать классы HTML при связывании классов? Предположим, есть один элемент: процесс. Мы просто хотим динамически переключать класс btnActive, используя свойство данных с именем «isActive».
Этого можно добиться с помощью Array при привязке класса. Вот как это сделать:
шаблон
<Button :class=”[‘btn’, ‘btnRed’, { btnActive : isActive }]”>Process</button>
App
new Vue({
el: '#app',
data: {
isActive: true
}
});
В приведенном выше фрагменте массивы различных классов объединены и основаны наisActiveЗначение свойства данных оценивается в соответствии с выражением в объекте.
17. Что такое вычисляемое свойство?
Вычисляемые свойства являются результатом работы специального класса функций, которые автоматически вычисляются при изменении зависимого свойства. Их использование вместо встроенных выражений может лучше выразить сложную логику, которую нельзя комбинировать как встроенные выражения в шаблонах.
Каждый метод расчета доступен как свойство в разделе шаблона. Вычисляемый метод будет автоматически вычислять и кэшировать результат при изменении зависимого свойства, что лучше, чем использование обычного метода. Метод всегда будет пересчитываться при доступе к нему, тогда как вычисляемые свойства не будут пересчитываться, если свойства, используемые в методе, не изменились с момента последней фазы вычисления и кэширования.
Важно отметить, что изменения зависимостей учитываются только в том случае, если свойства, используемые в методе, являются реактивными (например, свойства данных).
Вот простой пример, демонстрирующий вычисляемые свойства:
шаблон
<div id="app">
<input type="text" v-model="email" :class="{ invalid : isInvalid }">
</div>
App
const emailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
new Vue({
el: '#app',
data: {
email: ''
},
computed: {
isInvalid() {
return !emailRegEx.test(this.email);
}
}
});
В приведенном выше примере кода, если проверка регулярного выражения не проходит через поле ввода электронной почты, тоisValidВычисленное свойство вернетtrue. Если валидатор электронной почты посчитает введенное значение недействительным, вы увидите красное текстовое поле (необходимо создать.invalidкласс и установите для свойства background-color значение красного цвета). По мере ввода пользователем вычисляемый метод выполняется повторно, и после проверки формата недопустимые классы удаляются динамически.
18. Как я могу гарантировать, что стили CSS, определенные в однофайловом компоненте, применяются только к этому компоненту, а не к другим компонентам?
Это можно сделать с помощью тега стиляscopedсвойства для достижения. Внутри Vue использует плагин PostCSS для назначения уникальных свойств данных всем стилизованным элементам, а затем делает стили нацеленными на эти уникальные элементы. Например:
<template>
<div class=”title”>This is a title</div>
</template>
<style scoped>
.title {
font-family: sans-serif;
font-size: 20px;
</style>
19. Как передать данные из родительского компонента в дочерний?
Вы можете использовать реквизиты в качестве односторонних точек входа в компоненты для передачи данных дочерним компонентам. Вот пример:
<template>
<div>
<contact-list-item v-for=”contact in contacts” :contact=”contact” />
</div>
</template>
<script>
import ContactListItem from ‘./ContactListItem’;
export default {
name: ‘address-book’,
data: function() {
return {
contacts: [.....]
}
},
components: {
ContactListItem
}
}
</script>
contact-list-itemСвязанный реквизит «контакт» — это запись для получения данных от родительского компонента, используемого в качестве дочернего. существуетcontact-list-itemВ компоненте:
<template>
<div>
<span>{{ contact.name }}</span>
<span>{{ contact.email }}</span>
</div>
</template>
<script>
export default {
name: ‘contact-list-item’,
props: [‘contact’]
}
</script>
Здесь объявлен реквизит с именем «контакт» для ввода данных, которые затем можно отобразить непосредственно в разделе шаблона.
20. Что такое компонент?
Компоненты — это, по сути, экземпляры Vue, которые инкапсулируют шаблоны, логику и необязательные собственные свойства реактивных данных, способные предоставлять многократно используемые настраиваемые элементы сборки. Возможность повторного использования лежит в основе строительных компонентов.
При создании приложения с однофайловыми компонентами компоненты определяются в файлах с расширением .vue. Однофайловый компонент состоит из трех частей: части шаблона, определяющей HTML-разметку компонента, части сценария, определяющей данные, свойства и логические единицы (например, методы) и экспортирующей содержимое в виде компонента Vue, и части сценария. часть styles, определяющая таблицу стилей компонента. Однофайловые компоненты компилируются с помощью сборщика модулей, такого как Webpack.
21. Что такое крючок жизненного цикла? Перечислите некоторые крючки жизненного цикла.
Экземпляр Vue (компонент) проходит жизненный цикл от инициализации до уничтожения и удаления. На протяжении всего процесса Vue позволяет разработчикам запускать несколько этапов пользовательских функций. Эти функции называются хуками жизненного цикла. Вот список некоторых хуков жизненного цикла:
- created
- mounted
- updated
- destroyed
22. Что такое слот?
Слоты позволяют вам определять элементы, которые могут быть упакованы и получать элементы под-DOM. Шаблон компонента<slot> </ slot>Элемент действует как выход для всех элементов DOM, захваченных через теги компонентов. Вот пример:
Post.vue | Компонент, реализующий слот
<template>
<div class="hello">
<h3 class="title">{{title}}</h3>
<div class="content">
<slot></slot>
</div>
</div>
</template>
App.vue | Компонент приложения, использующий компонент Post
<template>
<div id="app">
<Post title="Hello from Vue!">
Vue 是用于构建用户界面的渐进框架。与其他框架不同，Vue从头开始设计以逐渐采用。核心库仅集中在视图层，并且很容易与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，Vue也完全能够为复杂的单页应用程序提供支持。
</Post>
</div>
</template>
В приведенном выше примере выделенный курсивом текст отображается в компоненте Post, отмеченном значком<slot>в пределах области элемента.
23. Что такое наблюдатель?
Наблюдатели позволяют нам наблюдать за изменением определенных свойств и выполнять пользовательские действия, определенные как функции. Хотя варианты их использования пересекаются с вычисляемыми свойствами, иногда от наблюдателей требуется выполнять настраиваемые действия или выполнять дорогостоящие операции при изменении определенных свойств данных.
как создать пользовательское событие из дочернего компонента?
Можно использовать$emit('event-name', eventPayload)Выдавать пользовательские события. Затем его можно перехватить в родительском компоненте с помощью директивы v-on, как и любое другое событие.
25. Разработчики часто используют буквы «vm» в качестве имен переменных для объявления корневого экземпляра Vue. Например, const vm = новый Vue(). Что означает «vm» в этом контексте?
Хотя это не является соглашением, разработчики часто используют имя переменной «vm» для имени корневого экземпляра Vue, что означает «ViewModel», поскольку Vue по существу отвечает за уровень представления и частично вдохновлен шаблоном MVVM (Model- Вид-Вид-Модель). Однако вовсе не обязательно называть корневой экземпляр «vm».