お疲れ様です。最近だんだんと寒くなってきました。
私は毎日、某アプリで日本語の問題を一日一問アップロードしているのですが、フォロワーが1200人になりました。
もちろん、対象者は海外の人で、JLPT（日本語能力試験）の1級(一番難しいやつ) を出題しています。
これが、日本人の私でも以外と難しい問題もあったりして、勉強になります。
さて、本題です。
本日はVue.jsでブラウザにHello worldを表示させてみたいと思います。
はじめに
Vue.jsとは、Googleで AngularJSを使用した開発に携わったエヴァン・ヨーによって開発された オープンソースのjavascriptフレームワークであり、2014年2月にリリースされました。
Udemyで見たこちらの動画を参考にしています
https://www.udemy.com/share/101shWAEMfeFhbQXwF/
実装
今回はCDNを用いて「Hello world」をhtmlに表示させてみます。
https://jp.vuejs.org/v2/guide/#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB
<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 !!!!’
おしまい