ログイン
問題2

Hello NinjaCode!

アイコン画像

問題2:Hello NinjaCode!

今度はVue使って{{ message }}に見本のような文字列を表示させてみよう。
Vueを使うためには[CDN]というものをhtmlファイルに読み込ませなければならないから
注意してほしい。

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

                <div id="app">
  {{ message }}
</div>
<style>
  #app {
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    margin: 30% auto;
    color: #41BA83;
  }
</style>
¥Vue¥
              

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

解答の見本画像

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

              <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      message: "Hello 忍者Code!",
    },
  });
</script>
¥Vue¥
            

コメントのアイコン解説

Vueは "new Vue" でVueインスタンスが生成できるぞ。'el:'でターゲットを決めて、そのターゲットに
'data:' の 'message' の値を出力しているという流れだ。
Vueインスタンスの値は '{{ 値 }}' としなければ表示することができないことを覚えていてほしい。
ログインして解答を見る
Vueを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる