やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

？

vue.jsを使ってみる（2.6.12）

vue.js JavaScript

　サクッと使えた。すばらしい！

成果物

DEMO
github

情報源

コード

　id属性値がappの要素にある{{text}}をHello Vue.js !!にする。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <script src="./vue.2.6.12.min.js"></script>
    <script src="./main.js"></script>
</head>
<body>
<div id="app">
    <p>{{text}}</p>
</div>
</body>
</html>

main.js

window.addEventListener('load', (event) => {
    new Vue({
        el:'#app',
        data(){
            return{
                text:"Hello Vue.js !!"
            };
        }
    })
});

他

　guideに従えばザックリ全体像を把握できる。とてもわかりやすく素晴らしい。

所感

　すばらしい。Vue.jsを触ってみたが、簡単にはじめることができた。面倒くさそうな印象があったが、これなら使いたくなる。

導入が簡単
ドキュメントがわかりやすい
すぐコードを書いて動作確認できた

対象環境

2021-01-19
Raspbierry pi 4 Model B
Raspberry Pi OS buster 10.0 2020-08-20 ※
bash 5.0.3(1)-release

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux