ログイン
問題6

コンポーネントを読み込んでみよう!

アイコン画像

問題6:コンポーネントを読み込んでみよう!

Vueコンポーネントを読み込んでみよう。
templeteに'

This is NinjaCode Component!

'を持つvueファイルを
コンポーネントとして読み込み、画面に出力してほしい。

エディターのアイコンあらかじめエディタに書くコード

                --- App.vue
<template>
  <div id="app">
    <ninjacode>
  </ninjacode></div>
</template>
¥Vue¥
              
                --- NinjaCode.vue
<template>
  <div>
    <h1>This is NinjaCode Component!</h1>
  </div>
</template>
¥Vue¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <script>
  import NinjaCode from "@/components/NinjaCode.vue"
  export default {
    components: {
      NinjaCode,
    }
  }
</script>
¥Vue¥
            

コメントのアイコン解説

まずは'import'と'components'用いてvueファイルをコンポーネントとして読み込もう。
''とすればコンポーネントを画面に出力することができるぞ。
ログインして解答を見る
Vueを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる