Vue.js入門第2回。Vue.jsでHello Worldを表示する実装と解説をまとめます。
Vue.jsでHelloWorld
まずはファーストステップのお決まりHelloWorldを実装してみます。
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js" />new Vue({
el: '#app',
data: {
message: 'hello world',
}
})jsfiddleを載せておきます。
解説
簡単にですが解説も載せておきます。
Vue.jsの読み込み
まずCDNからvue.jsを読み込みます。
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js" />Vueを適用する要素の作成
Vueを適用する要素を作成し、Vue.jsに認識させるためにidを指定します。慣例的にはid属性でappと指定することが多いようです。
<div id="app">・・・</div>Vueインスタンスの作成
Vueインスタンスを生成します。elキーで先ほど作成したid属性appを指定します。これでこの要素の配下でVueを利用することが出来ます。
dataプロパティにはVueで扱うデータを設定します。messageプロパティを作成し、初期値として「Hello World」を設定しています。
new Vue({
el: '#app',
data: {
message: 'Hello World',
}
})HTMLへ出力
このdataプロパティで定義されているデータは「{{ }}」（マスタッシュ構文）でHTMLに出力することができます。
「message」がdataプロパティ内のmessageキーと対応しています。
{{ message }}えず
東京でフリーランスのWebエンジニアやっています。 今はPHPとGoをメインに、プライベートでは広く浅くをモットーにフロント〜インフラまで学習しています。 当面の目標はDevOps寄りのオールラウンダー。
