javascriptもままならないままですが、Vueに手を出し始めました。
しばらくはVueの記事ばかりになると思います。
今回は、Vueを読み込んでHelloWorldを表示したいと思います。
環境
エディター：jsFiddle
※ブラウザー上で挙動を確認したりコードをシェアできたりするツールです。
FW：Vue.js 2.6.11
Vue.jsの公式サイトからFWをインストールする
公式サイトのインストールページはこちら→ https://jp.vuejs.org/v2/guide/installation.html
今回は、簡単なHelloWorldの表示だけなのでCDNを使用しました。
CDNもいくつか用意されておりますが、常に最新バージョンが使用できる、下記CDNを使用しました。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
（参考）特定のバージョンをインストールする事ができるCDNはこちら。
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
jsFiddle でHTMLを記述
ブラウザーで「 jsFiddle 」と検索し、HTMLにCDNを貼り付け。
HelloWorldを表示させるダグを記述していく。
<!-- CDNの貼り付け --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- messageの表示 --> <div id="hello"> <p>ここにメッセージが入るよ</p> </div>
表示する<p>を<div>で囲ってidを付与します。
「ここにメッセージが入るよ」の部分にVue.jsのdataを挿入していきます。
Vueを書く
jsFiddle のjsにVueを記載していきます。
Vueを使用する時は、宣言が必要になります。
new Vue({
})
このnew Vueでインスタンスが生成されて、Vueが使えるようになりました！
続いて、どのエリア（idやclass）にスコープするかを「el」プロパティを使って宣言していきます。
elで設定した部分がVueの適用範囲となります。
elプロパティは element の略だそうです。
new Vue({
el:'#hello'
})
HTMLのid=”hello”にスコープさせました。
Vueインスタンスはdataを持つことができます。elの続きにdataを作成します。
new Vue({
el:'#hello',
data:{
message:'hello world'
}
})
表示させたいメッセージを作ったらHTMLの<p>タグ内を修正します。
<!-- CDNの貼り付け -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- messageの表示 -->
<div id="hello">
<p>{{message}}</p>
</div>
<p>タグ内にVueで作ったメッセージを適用させたい時は、{{}}で囲みます。
以上でRunすると、ブラウザー上に[hello world]が表示されました。
次回は、v-onを使ってボタンがクリックされたらHello WorldからGoodByeにテキスト変更をする。を実装します。
