ホームページ  >  記事  >  ウェブフロントエンド  >  初心者のための VueJs VueJs パート コンポーネントの作成、インポート、および使用

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

DDD
DDDオリジナル
2024-09-26 12:33:22907ブラウズ

VueJs for Beginner VueJs Part  Create, Import, and Use Component

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


コンポーネントとは何ですか?
コンポーネントは、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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。