Vue.js チートシート
vuejsの気になったところ watcherの注意点 wacherの中ではthisを使えない。なるべくcomputedを使う。 watch: { counter() { const vm = this; setTimeout(() => { vm.counter = 0; }, 3000); }, }, v-onディレクティブでの注意点 <!-- method event handler。vue側がいい感じに解釈 --> <button @click="countUp">+1</button> <!-- javascript式 --> <button @click="countUp()">+1</button> v-showの特徴 display: noneのcssがかかる 全てdomに追加されるため初期描画が遅い 要素を削除せずにcssをかけるだけなので描画の切り替えが早い elseがない v-forの特徴 要素の変更が最小限になるようになるべく再利用する 予期しないバグを生む可能性があるので, key属性をつける 仮想ノード createElemetで作られているのは仮想DOMを作るための仮想ノードである。いわゆるDocument Object Modelではなくjavascriptのオブジェクトである。 new Vue({ data: { name: "tak", }, render(createElement) { return createElement("h1", "hello, " + this.name) } }).$mount("#app3"); 仮想DOM DOMの変更を高速に反映するための仕組み。DOMを直接変更するには時間がかかるので, 仮想DOMを変更し前の仮想DOMとの差分を反映して高速に描画する。 Babel JavaScriptのコードを新しい書き方から古い書き方へと変換するツール Webpack webpackは、モジュールを束ねるツールです。 モジュールとは、プログラム内のJavaScriptファイル（以下：jsファイル）やsassファイルなどのことです。webpackを使うことで、複数のjsファイルをひとつのjsファイルにまとめたり、複数のsassファイルをひとつのsassファイルにしたりできます。 ...