Vueの覚書です。まとまりがありませんが、、わりと何でも適当に覚書としてめもしている一時退避所みたいなところです。
目次
nuxt(vue)でchromeのdebugger起動
mounted() {
debugger
}
デバッガーの使い方はこちらの記事がよくまとまっています。
125%で1ピクセルのずれ?
ザクっと見ただけですけど、125%にすると1ピクセルのずれがでるようです。一応めもしておきます。
vue.jsのサンプル
codepen、jsfiddle、githubなどで探してみましょう。以前、少し探したものをシェアしておきますね。
vue.jsのto doリストのサンプル
定番のtodoアプリです。サンプルがいろいろとありました。
vue.jsの環境構築
めも程度に残しておきます。
node.jsをインストール
node.jsをインストールします。npmも一緒にインストールされます。
vue CLIをインストール
vue CLIとはVue.jsの開発を手早く進めるための便利システムです。
npm install -g @vue/cli
確認します。
vue --version
:keyについて
:keyをつけないと、レンダリング系のバグをうみやすいです。レンダリング系のバグはkeyを疑ってもいいかもしれません。
v-forなどでkeyをつけるのが一般的ですが、他にもkeyが必要な場合があります。モジュールで指定するIDが動的でない場合、keyが必要な場合があります。keyをつけると、モジュール自体が別DOMとして再レンダリングされます。
v-forのindexと他の要素の入れ子
v-forは第２引数にindexを取得できます。selectをまわしたい場合は次のようになります。
<div v-for="(item, index) in items" :key="index"> <b-form-select v-model="selected[index]" :options="options" ></b-form-select> </div>
scriptはselected[]をdataに定義します。
参考
<div v-for="(item, index) in items" :key="index"> <b-form-select v-model="selected[item.name]" :options="options" ></b-form-select> </div>
item.nameにすると、selectedはオブジェクトselected{}でdataに定義します。
v-forの0から
通常、1からですけど、keyをつけると0からになります。
<ul class="thumbnails">
<li
v-for="(n, i) in 3"
:key="i"
@click="go(i)"
>
<img
:src="src[i]"
></img>
</li>
</ul>
vueのtextarea最大値サイズ調整
.textbox {
width: clamp(220px, 60vw, 1000px);
max-height: 80px;
}textarea文字数調整
<textarea v-model="msg" maxlength="20" placeholder="未使用"></textarea>
{{ msg.length }} //20 →全角1文字半角0.5文字じゃないNuxtのindex.vueとtop.vueの切り替え
めも。index.vueをそのまま書き換えてもいいかもしれません。
Nuxtのカスタムレイアウトでトップページだけサイドバーを消す
- layoutsのフォルダ内にdefault.vueのtemplateとscriptsをコピーしてtop.vueを作成。
- topページでサイドバーを省いて1カラムにする。
- index.vueに次のコードを追加。
export default {
layout: 'top'
}上記で切り分けができます。なおCSSはdefault.vueのものが効く模様。
nextTickとレンダリング
nextTickで待ってレンダリングが便利です。
レンダリング先で
forEachでまわしてquerySelector
querySelectorAll
みたいな感じで利用します。
Vue(Nuxt)のおすすめ開発環境
vscodeのおすすめ拡張機能
Vue.js Extension Packがありますが、いろいろとインストールされすぎます。個人的にはveturをとりあえず、入れておけばいいかなっと。シンタックスハイライトが表示されるようになります。
vue.jsのおすすめライブラリ
必要になった時点でいれればOKですが、軽くリストアップ。
- vue-cli
- Vue Router
- Vuex(状態管理)
- vuex-router-sync(route情報を参照)
- vuex-persistedstate(リロード対策)
- VeeValidate(フォームのエラー対策)
- BootstrapVue(デザイン、ハンバーガーメニュー)
- axios(サーバーとのやりとり)
リロード対策のvuex-persistedstateはfirebaseから常時データを取得していれば大丈夫ですが、firebaseを介さずVueXを使う際には便利です。会員登録するサイトでも時折、firebaseを介さずデータのやりとりをする場合があります。
コメント