Vue.jsでHello worldをやってみた

お疲れ様です。最近だんだんと寒くなってきました。

私は毎日、某アプリで日本語の問題を一日一問アップロードしているのですが、フォロワーが1200人になりました。

もちろん、対象者は海外の人で、JLPT（日本語能力試験）の1級(一番難しいやつ) を出題しています。

これが、日本人の私でも以外と難しい問題もあったりして、勉強になります。

さて、本題です。

本日はVue.jsでブラウザにHello worldを表示させてみたいと思います。

はじめに

Vue.jsとは、Googleで AngularJSを使用した開発に携わったエヴァン・ヨーによって開発されたオープンソースのjavascriptフレームワークであり、2014年2月にリリースされました。

Udemyで見たこちらの動画を参考にしています

Free Vue JS Tutorial - Vue.js Fast Crash Course

Learn to use the popular and hot JavaScript Framework VueJs / Vue or Vue.js - Free Course

実装

今回はCDNを用いて「Hello world」をhtmlに表示させてみます。

はじめに — Vue.js

Vue.js - The Progressive JavaScript Framework

<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

<!DOCTYPE html>

<div id="app">

    <h1>{{message}}</h1>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    let vm = new Vue({

        el: '#app',
        data: {

            message: 'Hello world'

        }

    })

</script>

Vueインスタンスを生成しdataプロパティのメッセージに’Hello world’をセットします。

そして、上の方のダブルカーリーブランケット( {{ }} )に記載されたmesssageがdata内のmessageで更新されます。