ここでは、Vue に関する 20 の質問とその回答とコード例を示します。
1.Vueとは何ですか?
Vue は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。Vue は、ボトムアップのレイヤーごとのアプリケーション設計を採用しています。Vue のコア ライブラリはビュー レイヤーのみに焦点を当てており、学習が非常に簡単で軽量で、他のライブラリや既存のプロジェクトと統合するのも簡単です。
2. Vue の 2 つの中心的な概念は何ですか?
Vue の 2 つの中心的な概念は、データ駆動型とコンポーネント化です。
3. Vue の利点は何ですか?
Vue には次のような利点があります。
- 学びやすく使いやすい
- 必要に応じてより多くの機能を段階的に導入する進歩的なフレームワーク
- レンダリングの高速化とファイル サイズの縮小
- Vue Devtools や Vue CLI などの便利なツールやプラグインを提供します。
- 他のライブラリや既存のプロジェクトと簡単に統合できます
4. Vue にはどのようなライフサイクルフック機能がありますか?
Vue には、次の 8 つのライフサイクル フック関数があります。
- 作成前
- 作成した
- マウント前
- 取り付けられた
- 更新前
- 更新しました
- 前に破壊する
- 破壊されました
5. Vue のテンプレート構文とは何ですか?
Vue のテンプレート構文は、テンプレート内のデータをページにレンダリングする方法を記述するために使用される HTML ベースの構文です。Vue のテンプレート構文には、補間式、ディレクティブ、イベント バインディングなどが含まれます。
6. Vue の補間式について説明します。
Vue の補間式は、{ { message }}のように二重中括弧で表されます 。補間式は、式の値を、それを含む要素のテキスト コンテンツに挿入します。
7. Vue のコマンドは何ですか?
Vue ディレクティブは、v- で始まる特別な HTML 属性で、テンプレートに応答性の高い動作を追加するために使用されます。Vue の命令には、v-if、v-for、v-bind、v-on などが含まれます。
8. Vue の計算プロパティとは何ですか?
Vue の計算プロパティは、他のプロパティに基づいて計算されるキャッシュされたプロパティです。計算されたプロパティは、依存するプロパティが変更された場合にのみ再計算されます。
// 计算属性的示例
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
9. Vue メソッドとは何ですか?
Vue メソッドは、イベント、計算されたプロパティなどを処理する関数です。Vue のメソッドは、テンプレート内のディレクティブを通じて呼び出すことができます。
// 方法的示例
methods: {
greet: function (event) {
// 事件处理逻辑
}
}
10. Vue のフィルターとは何ですか?
Vue のフィルターは、テンプレート内のテキストの書式設定を処理する関数です。Vue のフィルターを使用して、日付、金額などの書式を設定できます。
// 过滤器的示例
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
11. Vue の親コンポーネントと子コンポーネントの間で通信するにはどうすればよいですか?
Vue の親子コンポーネントは、props および Emit を通じて通信できます。親コンポーネントは props を通じて子コンポーネントにデータを渡し、子コンポーネントは Emit を通じて通信します。親コンポーネントは props を通じて子コンポーネントにデータを渡し、子コンポーネントは通信のために送信されます。親コンポーネントはpropsを通じて子コンポーネントにデータを渡し、子コンポーネントはEmit Triggerイベントを通じて親コンポーネントにデータを渡します。
// 父组件向子组件传递数据的示例
<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. Vue コンポーネントはどのように相互に通信しますか?
Vue コンポーネントは、イベント バス、Vuex、provide/inject などを介して通信できます。その中でもよく使われるのがイベントバスとVuexです。
// 通过事件总线进行组件通信的示例
// 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. Vue のルーティングとは何ですか?
Routing for Vue は、ページ間の遷移を管理するためのプラグインです。Vue のルーティングにより、単一ページのアプリケーションがより使いやすく、管理しやすくなります。
// 路由的示例
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. Vue の単一ファイル コンポーネントとは何ですか?
Vue の単一ファイル コンポーネントは、テンプレート、スタイル、ロジックを 1 つのファイルにカプセル化するコンポーネントです。Vue の単一ファイル コンポーネントにより、コンポーネントがより明確になり、保守が容易になります。
// 单文件组件的示例
<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. Vue ミックスインとは何ですか?
Vue のミックスインは、コンポーネント コードを再利用する方法です。Vue のミックスインはコンポーネント内の同じコードを抽出できるため、コンポーネント開発がより効率的になります。
// 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. Vue の非同期コンポーネントとは何ですか?
Vue の非同期コンポーネントは、オンデマンドでロードできるコンポーネントです。Vue の非同期コンポーネントにより、アプリケーションのパフォーマンスが向上し、初期ロード時間が短縮されます。
// 异步组件的示例
Vue.component('async-component', function (resolve, reject) {
setTimeout(() => {
resolve({
template: '<div>Hello from async component</div>'
})
}, 1000)
})
17. VueのnextTickメソッドとは何ですか?
Vue の nextTick メソッドは、DOM が更新された後にコールバック関数を実行する方法です。Vue の nextTick メソッドを使用して、DOM 関連の操作を処理できます。
// nextTick方法的示例
methods: {
handleClick () {
this.message = 'Hello'
this.$nextTick(() => {
// DOM更新后的回调
})
}
}
18. Vueのコマンドフック機能とは何ですか？
Vue の命令フック関数は、命令のライフサイクルを処理するフック関数です。Vue のコマンド フック関数には、bind、insert、update、componentUpdated、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. Vue のトランジション効果とは何ですか?
Vue のトランジションは、要素が挿入、更新、または削除されたときに要素をアニメーション化する方法です。Vue のトランジション効果を使用すると、ページをより生き生きとした興味深いものにすることができます。
// 过渡效果的示例
<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. Vue の応答原理とは何ですか?
Vue の応答原理は、データをビューにバインドする方法です。Vue の応答性の原則では、Object.defineProperty メソッドによるデータ ハイジャックが実装されており、データが変更されると、ビューが自動的に更新されます。