jQueryをやめてvue.jsに取り組んでいてハマったところ

詳しくはまた別途書くとして、とりあえず、10年以上jQueryを使ってきて、とうとうvue.jsに切り替えることにして一からサイトを作り直している際に色々なところにハマったので、忘れないようにメモ。vue.jsでハマったというより、jQueryをやめたことでハマったということとか、単に忘れていたこととかですが。(しかも断片的すぎて読者の皆様にはあまりよくわからないかもしれませんがご容赦ください)

  • v-showはDOMをそのまま残してdisplay:none的なことをするようだがv-ifはいちいちDOMを書き換える模様。

  • v-* エレメントやvueのアプリとして組み込んだものは実際に表示される際にはエレメント名が変更される (多くはdiv等の一般的なものになる)ので、普通のJavascript関数からDOM操作しようとするとそのまま 指定することはできないので要注意。

  • 仮想DOMの値の中に直書きしたエレメントを普通のJavascriptでDOM操作する場合、 仮想DOM設定後、すぐには操作できないので注意が必要。

  • event.preventDefault() はJavascriptのメソッドなので普通に使える。

  • element.setAttribute() は、つけたelementに直接作用する。左辺で受けるとうまくいかない。

  • OpenSeadragonの表示用divエレメントは縦サイズを決め打ちする必要あり。相対サイズ(%)も許容しない模様?。

  • Right-to-Left pagingのために OpenSeadragonのページ遷移ボタンの左右を入れ替える場合は

if(r){this.paging=new m.ButtonGroup({buttons:[this.nextButton,this.previousButton] のあたりでButtonGroupの順番を入れ替えて画像も左右を入れ替えればOK。

まだまだ続きます…