Hier sind 20 Fragen zu Vue mit Antworten und Codebeispielen.
1. Was ist Vue?
Vue ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen. Vue verwendet ein Bottom-up-Schicht-für-Schicht-Anwendungsdesign. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene, die sehr einfach zu erlernen, leichtgewichtig und leicht in andere Bibliotheken oder bestehende Projekte zu integrieren ist.
2. Was sind die beiden Kernkonzepte von Vue?
Zwei Kernkonzepte von Vue sind datengesteuert und komponentenorientiert .
3. Was sind die Vorteile von Vue?
Zu den Vorteilen von Vue gehören:
- einfach zu erlernen und anzuwenden
- Progressives Framework, das nach Bedarf nach und nach weitere Funktionen einführt
- Schnelleres Rendern und kleinere Dateigrößen
- Bietet einige praktische Tools und Plugins wie Vue Devtools und Vue CLI usw.
- Lässt sich problemlos in andere Bibliotheken und bestehende Projekte integrieren
4. Welche Lebenszyklus-Hook-Funktionen hat Vue?
Vue verfügt über 8 Lebenszyklus-Hook-Funktionen, nämlich:
- beforeCreate
- erstellt
- beforeMount
- montiert
- vorUpdate
- Aktualisiert
- vor Zerstören
- zerstört
5. Wie lautet die Vorlagensyntax von Vue?
Die Vorlagensyntax von Vue ist eine HTML-basierte Syntax, mit der beschrieben wird, wie die Daten in der Vorlage auf der Seite gerendert werden. Die Vorlagensyntax von Vue umfasst Interpolationsausdrücke, Anweisungen, Ereignisbindungen und mehr.
6. Beschreiben Sie die Interpolationsausdrücke von Vue.
Die Interpolationsausdrücke von Vue werden durch doppelte geschweifte Klammern dargestellt, z. B. { { message }}. Ein Interpolationsausdruck fügt den Wert des Ausdrucks in den Textinhalt des enthaltenden Elements ein.
7. Was ist der Befehl von Vue?
Vue-Anweisungen sind spezielle HTML-Attribute, die mit v- beginnen und zum Hinzufügen von Reaktionsverhalten in Vorlagen verwendet werden. Zu den Anweisungen von Vue gehören v-if, v-for, v-bind, v-on usw.
8. Was ist eine berechnete Eigenschaft in Vue?
Die berechnete Eigenschaft von Vue ist eine zwischengespeicherte Eigenschaft, die auf der Grundlage anderer Eigenschaften berechnet wird. Berechnete Eigenschaften werden nur dann neu berechnet, wenn sich die Eigenschaften, von denen sie abhängen, ändern.
// 计算属性的示例
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
9. Was sind Vue-Methoden?
Eine Vue-Methode ist eine Funktion, die Ereignisse, berechnete Eigenschaften usw. verarbeitet. Die Methoden von Vue können über Direktiven in Vorlagen aufgerufen werden.
// 方法的示例
methods: {
greet: function (event) {
// 事件处理逻辑
}
}
10. Was ist ein Filter in Vue?
Die Filter von Vue sind Funktionen, die die Formatierung von Text in Vorlagen verwalten. Die Filter von Vue können zum Formatieren von Daten, Beträgen usw. verwendet werden.
// 过滤器的示例
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
11. Wie kommuniziert man zwischen übergeordneten und untergeordneten Komponenten von Vue?
Die Eltern-Kind-Komponenten von Vue können über Requisiten und Emission kommunizieren. Übergeordnete Komponenten geben Daten über Requisiten an untergeordnete Komponenten weiter, und untergeordnete Komponenten kommunizieren über Emit. Die übergeordnete Komponente übergibt Daten über Requisiten an die untergeordnete Komponente, und die untergeordnete Komponente übergibt sieEmit für Kommunikation . Die übergeordnete Komponente übergibt Daten über props an die untergeordnete Komponente , und die untergeordnete Komponente übergibt Daten über das Emit- Triggerereignis an die übergeordnete Komponente .
// 父组件向子组件传递数据的示例
<template>
<child-component :message="parentMessage"></child-component>
</template>
<script>
export default {
data () {
return {
parentMessage: 'Hello from parent'
}
}
}
</script>
// 子组件接收父组件传递数据的示例
<template>
<div>{
{
message }}</div>
</template>
<script>
export default {
props: ['message']
}
</script>
12. Wie kommunizieren Vue-Komponenten miteinander?
Vue-Komponenten können über Event Bus, Vuex, Bereitstellung/Injektion usw. kommunizieren. Unter diesen sind Event Bus und Vuex häufig verwendete Methoden.
// 通过事件总线进行组件通信的示例
// EventBus.js
import Vue from 'vue'
export default new Vue()
// ComponentA.vue
import EventBus from './EventBus.js'
export default {
methods: {
handleClick () {
EventBus.$emit('event', data)
}
}
}
// ComponentB.vue
import EventBus from './EventBus.js'
export default {
created () {
EventBus.$on('event', data => {
// 处理事件
})
}
}
// 通过Vuex进行组件通信的示例
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
message: 'Hello from store'
},
mutations: {
updateMessage (state, payload) {
state.message = payload.message
}
}
})
// ComponentA.vue
export default {
methods: {
handleClick () {
this.$store.commit('updateMessage', {
message: 'Hello from ComponentA' })
}
}
}
// ComponentB.vue
export default {
computed: {
message () {
return this.$store.state.message
}
}
}
13. Was ist Routing in Vue?
Routing for Vue ist ein Plugin zum Verwalten von Übergängen zwischen Seiten. Das Routing von Vue kann Single-Page-Anwendungen benutzerfreundlicher und verwaltbarer machen.
// 路由的示例
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/', component: Home },
{
path: '/about', component: About }
]
export default new VueRouter({
routes
})
14. Was ist die Einzeldateikomponente von Vue?
Die Einzeldateikomponente von Vue ist eine Komponente, die Vorlagen, Stile und Logik in einer einzigen Datei kapselt. Die Einzeldateikomponenten von Vue können Komponenten klarer und einfacher zu warten machen.
// 单文件组件的示例
<template>
<div class="message">
{
{
message }}
</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello from component'
}
}
}
</script>
<style>
.message {
font-size: 24px;
color: #333;
}
</style>
15. Was sind Vue-Mixins?
Die Mixins von Vue sind eine Möglichkeit, Komponentencode wiederzuverwenden. Die Mixins von Vue können denselben Code in Komponenten extrahieren, wodurch die Komponentenentwicklung effizienter wird.
// mixins的示例
// mixin.js
export default {
data () {
return {
message: 'Hello from mixin'
}
},
methods: {
greet () {
console.log('Hello from mixin')
}
}
}
// Component.vue
import Mixin from './mixin.js'
export default {
mixins: [Mixin],
created () {
console.log(this.message) // 'Hello from mixin'
this.greet() // 'Hello from mixin'
}
}
16. Was sind die asynchronen Komponenten von Vue?
Die asynchrone Komponente von Vue ist eine Komponente, die bei Bedarf geladen werden kann. Die asynchronen Komponenten von Vue können die Leistung der Anwendung verbessern und die anfängliche Ladezeit verkürzen.
// 异步组件的示例
Vue.component('async-component', function (resolve, reject) {
setTimeout(() => {
resolve({
template: '<div>Hello from async component</div>'
})
}, 1000)
})
17. Was ist die nextTick-Methode von Vue?
Die nextTick-Methode von Vue ist eine Möglichkeit, eine Rückruffunktion auszuführen, nachdem das DOM aktualisiert wurde. Die nextTick-Methode von Vue kann zur Abwicklung von DOM-bezogenen Vorgängen verwendet werden.
// nextTick方法的示例
methods: {
handleClick () {
this.message = 'Hello'
this.$nextTick(() => {
// DOM更新后的回调
})
}
}
18. Was ist die Befehls-Hook-Funktion von Vue?
Die Anweisungs-Hook-Funktion von Vue ist eine Hook-Funktion, die den Lebenszyklus von Anweisungen verwaltet. Zu den Befehls-Hook-Funktionen von Vue gehören „binden“, „eingefügt“, „aktualisieren“, „componentUpdated“ und „unbind“.
// 指令钩子函数的示例
Vue.directive('my-directive', {
bind: function (el, binding) {
// 指令绑定时的逻辑
},
inserted: function (el, binding) {
// 指令插入到DOM时的逻辑
},
update: function (el, binding) {
// 指令所在组件更新时的逻辑
},
componentUpdated: function (el, binding) {
// 指令所在组件及其子组件更新时的逻辑
},
unbind: function (el, binding) {
// 指令解绑时的逻辑
}
})
19. Was sind die Übergangseffekte in Vue?
Die Übergänge von Vue sind eine Möglichkeit, Elemente zu animieren, wenn sie eingefügt, aktualisiert oder entfernt werden. Die Übergangseffekte von Vue können die Seite lebendiger und interessanter machen.
// 过渡效果的示例
<template>
<transition name="fade">
<div v-if="show">{
{
message }}</div>
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-active {
opacity: 0;
}
</style>
20. Was ist das Responsive-Prinzip von Vue?
Das Responsive-Prinzip von Vue ist eine Möglichkeit, Daten an Ansichten zu binden. Das Reaktionsprinzip von Vue implementiert die Datenentführung über die Object.defineProperty-Methode. Wenn sich die Daten ändern, wird die Ansicht automatisch aktualisiert.