やってみる

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

📌 ？
トップ > vue.js > vue.jsを使ってみる（3.0.5）

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

vue.js JavaScript

　3系版。値の参照ができなかった……。

成果物

情報源

2系版

コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <script src="../vue.3.0.5.js"></script>
    <script src="./main.js"></script>
</head>
<body>
<div id="counter">
  Counter: {{ counter }}
</div>
</body>
</html>

window.addEventListener('load', (event) => {
//    Vue.config.devtools = true; //Uncaught TypeError: Cannot set property 'devtools' of undefined
    const Counter = {
        data() {
            return {
                counter: 0
            }
        }
    };
    Vue.createApp(Counter).mount('#counter')
});

値を参照できなかった

var app;
//var ConditionalRendering;
window.addEventListener('load', (event) => {
//    ConditionalRendering = {
    const ConditionalRendering = {
      data() {
        return {
          seen: true
        }
      }
    };
//    Vue.createApp(ConditionalRendering).mount('#conditional-rendering');
    app = Vue.createApp(ConditionalRendering);
    app.mount('#conditional-rendering');
    console.log(app);
});

　ブラウザのデベロッパツールのConsoleにて以下のように入力したかった。しかしseenが未定義だと怒られた。なぜ？　データとメソッドの項をみても、これで合っていると思うのだが。

app.seen = false

所感

　2系版のほうがよかった。値がセットできないのは致命的。メリットがなくなった。残念。

  • ドキュメントが2系版よりわかりにくくなった
  • 動作確認できないところがあった
    • 値がセットできない！
      • 使えない……

　もしかしてNode.jsでトランスパイルしないと使えなくなってしまったのか？　だとするともう使いたくない。CDNだけで使えるのが素敵だったのに。さようなら。

　やはりライブラリに依存するのは危険だ。バージョンをあげたら使えなくなるってことがよく起こる。だからCDNの最新版を動的参照するのではなく、固定バージョンをローカルファイルにダウンロードして参照する方法をとっている。古いのを使い回せるから安心。

　2系版を使う分にはいいか。

対象環境

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