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') });
Vue
オブジェクト生成する方法が変わった。- やはり Vue.js devtools をインストールするも使えなかった
値を参照できなかった
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系版を使う分にはいいか。
対象環境
- 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