初心者のための VueJs VueJs パート コンポーネントの作成、インポート、および使用

最初のコンポーネントの作成

コンポーネントとは何ですか?
コンポーネントは、Vue アプリケーションの構成要素です。各コンポーネントには独自の機能とビューがあり、コンポーネントはアプリケーション全体で再利用できます。コンポーネントの一例は、さまざまなページからアクセスできるナビゲーションバーです。

基本コンポーネントの作成

• コンポーネント フォルダーに HelloWorld.vue という名前の新しいコンポーネント ファイルを作成します (必要に応じてファイル名は変更できます) (コンポーネント フォルダーがまだ存在しない場合は、新しいコンポーネント フォルダーを作成します)。

• HelloWorld コンポーネント:
  

<template>
  <div>
    <h1>Hello, World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

• App.vue で HelloWord コンポーネントをインポートして使用する

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'; //adjust according to the path to your component

export default {
  components: {
    HelloWorld
  }
}
</script>

これで、App.vue コンポーネントでレンダリングされた HelloWorld コンポーネントが表示されるはずです。

以上が初心者のための VueJs VueJs パート コンポーネントの作成、インポート、および使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。