最近フロントエンドにも強くなるため、Vue.jsの勉強を始めました。
備忘録的な意味も込めてこのブログに書いていこうかと思います！
今回は初心者の方にもわかりやすいように、「Vue.jsはどのように表示されているのか」について解説していきます！
Vue.jsはどのように表示されているか
以下のコードを見てください。これがVue.jsの一番シンプルなテンプレです。
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16"></script>var app = new Vue({
el: '#app'
})このid=”app”の部分にVue.jsのvar appの内容が表示されます。
この基本形を覚えておけばとりあえずVue.jsを表示することができます！
データバインディング
<div id="app">
<p>
{{ message }}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16"></script>var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})結果は「Hello Vue.js!」と表示されます。
ポイント
- {{ message }}の{{}}が口髭に似ていることから「マスタッシュ構文」といいます。
- Vue.js側の’Hello Vue.js!’をHTMLのマスタッシュ構文内に表示することを「データバインディング」といいます。
まとめ
以上がVue.jsの基本となります。
しっかり頭に入れて次のレッスンに備えましょう♪
コメントを残す