【Vue.js】基本中の基本！Vue.jsの仕組みを知識ゼロの人に説明してみる

最近フロントエンドにも強くなるため、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の基本となります。

しっかり頭に入れて次のレッスンに備えましょう♪