【Vue.js】詰まったところのメモ

現在、Vue.jsを用いて簡単なWebアプリの作成に挑戦している。ここでは初心者の視点から、開発中の不明点についてメモしておく。
最近記事を書いても下書きのままで投げてしまうことが多いので、雑多ではあるが公開することにした。

注意

非常にわかりづらい記述となっているため、問題解決のキーワードを見つける程度の軽い気持ちで読んでもらえたら嬉しい。

環境

CDN版のVue.js (以下のコードをhtmlの<head>タグ内に埋め込んで利用)

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

画面更新がされない

コンポーネント内のセレクトボックスの内容が更新されなかった。watchを使って解決。
qiita.com
qiita.com

component自身を参照したい

$elを使う。
designsupply-web.com

その他、ドルマークから始まるプロパティやメソッドについては以下を参照。

012-jp.vuejs.org

jp.vuejs.org

javascriptについて

ブラウザにデータを保存してもらいたい

いろいろ選択肢はある。

indexedDB
localStorage

ただ、初心者はlocalStorageを使うべきだと感じた。
indexedDBは確かに高性能であるが、そもそもDBを開くのにも多くの知識が必要となるため、初心者にはお勧めできない *1 。実際自分は地獄を見ることになった。
それに比べ、localStorageは

let myStorage = localStorage;

の一行で開くことができる。シンプルすぎて使い勝手が悪いという声もあるが、逆にこのくらいシンプルなほうが初心者にはとっつきやすいと思う。

注意点は、localStorageに入れるのは漏れてもよいデータにするという点である。個人情報などの重要データを扱う際は使ってはならないとのこと。
techracho.bpsinc.jp

参考：Storageについて developer.mozilla.org

select要素絡み

ある項目が選択されたときに何か関数を実行するためにはonchangeを使う。
hensa40.cutegirl.jp

js側で、ある項目を選択済にする方法について
memorva.jp

addEventListenerについて

addEventListenerに引数として関数を渡すときは、testFunction()のようにカッコを付けた書き方だと動かない。
以下の例に示すように、カッコを付けずに書く必要があるようだ。

const clickListener = () => {
    console.log("test");
}

const button = document.getElementById("button");
button.addEventListener("click", clickListener);

*1:

IndexedDB API は強力ですが、シンプルな用途にはとても複雑に見えるかもしれません。
https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API

日記

日本語の勉強のためのブログ