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

JavaScript

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

私は毎日、某アプリで日本語の問題を一日一問アップロードしているのですが、フォロワーが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で更新されます。

ブラウザの表示

ちなみにエラーの場合は{{ message }}がそのまま表示されました。

エラーの場合

messageを変更する

ブラウザの開発者ツールからVueインスタンスのプロパティを更新してみます。

開発者ツール

F12で開発者ツールを開き、コンソールタブからmessageを’Hello world’から’Hello world !!!!’へと変更し、エンターを押すと、ブラウザの表示が変わりました。

vm.message = ‘Hello world !!!!’

messageの更新

おしまい

スポンサーリンク

コメント

タイトルとURLをコピーしました