Vue
LINEでログイン
Googleでログイン
Twitterでログイン
問題2：Hello NinjaCode!
今度はVue使って{{ message }}に見本のような文字列を表示させてみよう。
Vueを使うためには[CDN]というものをhtmlファイルに読み込ませなければならないから
注意してほしい。
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¥
完了にする！
活動記録をTweetする
'data:' の 'message' の値を出力しているという流れだ。
Vueインスタンスの値は '{{ 値 }}' としなければ表示することができないことを覚えていてほしい。