ターニングポイントさん!?

10bace LOG

タグ: vue Page 1 of 2

JavaScript、TypeScript、Vue、Vuetifyで要素描画時にアニメーションする

フェードインとか。

おまけもあるよ💖

◆おことわり

古いブラウザは知らない。帰れ。

…いや、帰れよ。何だよその目は。

…かーえーれっ!かーえーれっ!

ウェヒヒヒwww

あ!泣いてやんの!だっせ!だっせ!

◆Intersection Observer

まえに、画像の遅延読み込みについて書いたんです。そこで登場したIntersection Observerくんが活躍します。応援してあげてください。

Vueのアレで「翻訳しますか?」とか言われる

◆結論

created: () => (document.documentElement.setAttribute('lang', 'ja')),

☝をぶち込め。

new Vue({
  vuetify,
  router,
  store,
  render: (h) => h(App),
  created: () => (document.documentElement.setAttribute('lang', 'ja')),
}).$mount('#app');

追記:どっか(publicフォルダとか)に落ちてるindex.htmlで2行目に書いてあるであろうlangを普通に書き換えてもいいなと思った。

◆経緯

【Vue】TypeScriptの連想配列がバインドされぬわ

◆結論

Vue.set使いなはれ。

Vue:オブジェクトの変更検出の注意

◆経緯

TypeScriptで連想配列をIndex Signaturesで作るじゃん?んで、その中身書き換えんじゃん?

変更が反映されないんすよ。

  private hoge = {} as {[key: number]: string};
  private created(){
    this.hoge[0] = 'ちんちん';
  }
  private piyo(){
    this.hoge[0] = 'もがもが';
  }

piyoを呼んでも内容が書き変わらない。ぴぎゃあ!

【Vuetify】v-switchとかv-checkboxのchangeをcancelする

イヤー詰まった。

◆結論

当然ながらTypeScriptだよ。なんでJavaScriptなんて使ってるわけ?いい大人がさぁ。聡ずかしくないのかよ。

<v-switch
  :input-value="hoge"
  @click="piyo"
  @change="fuga"
 />
  private hoge = false;
  private piyo(e: MouseEvent) {
    if (!window.confirm('お前はそれでいいのか?')) e.preventDefault();
  }
  private fuga(){
    // 適当な処理
  }

答えが分かれば簡単だった。

◆理解のキモ

コイツは何時になったらVue.jsの導入記事を書くのか

いや書きてぇわ俺も。フロントエンドエンジニア達は不安よな。とは思えどもタイミングがちょっと違う気がする。

◆理由

導入簡単すよ。公開も簡単すよ。APIサーバー立ち上げんのも簡単す。でもね?Vue.jsの3.0が来るんすよね。

その時にお前ら「あのブタ畜生、3.0来るってわかってんのに2.6の導入方法教えやがったな。よし。決めた。殺そう。」

こうくるでしょう。俺はそんな理由で死にたくない。

だから教えようにもなかなか。

IE11でPromiseのunhandled regectionをハンドる

IE11ってマジ糞ウンチofウンコのファッキン無能ゴミブラウザだからPromiseは使えないんだけど、BabelでバベればPromise使えます。

で、それとは別に、「発生したエラーをすべてキャッチしたいね」っていう話がありまして、Vueのmain.tsでcatchしようと思った。

だけどもVue.config.errorHandlerがPromiseのrejectionを拾ってくれないという事実が判明して無事死亡。死亡しながら色々ググったらどうやらwindowに「unhandledrejection」のEventListenerをAddすりゃいいという結論に至った。

参考:Window: unhandledrejection イベント

で、IE11で動かなかった。ビルゲイツ殺す。

Vue.jsとナマのswiperを使ってaxiosで取得したデータを表示したい時のあるある早く言いたい

◆ひとりごと

Swiperじゃなくてtiny-slider使った方が良いような気がする。

◆要件

Vue.jsでimgの:srcにaxiosのresponse.dataをbindしてerrorをcatchした時は違う画像みせたかった人の逸話

◆修正しました

◆2019/6/23

修正したんだけど、ちょっとまー残念な感じではある。というのも、Vue 3.0になるまでフラグメントが使えない。だから泣く泣くdivで囲う羽目になった。スタイル当てるのも場合によってはちょっと辛いな。2パターン紹介しているから、好きな方を使え。

Vue 3.0が来たらフラグメント使え。

◆したいこと

  • APIで画像を表示する。(SVGじゃないやつ)
  • APIで画像が取得できなかった時は、指定の画像を表示する。(SVGでもなんでも)
  • APIを2回投げたくない。画像が取得できたのならそれをDataURIの形にしてしまおうと思う。

◆おことわり

以下の成分を含みます。

これから説明するんだけど、どっから説明したもんかわからんから適当に説明する。「わかんね」って人はコメントしてくれ。

【CSS】button押したときに限りfocusしつつoutline出さない

やーホント詰まった。「なんでできねぇんだよ」が久々に来たね。

英語圏兄貴の検索に引っかかることを願って、英単語まじえて説明していく。

◆したいこと

  1. htmlでbutton要素をclickする。
  2. focusは当てたい。けど見せたくない。つまるところ、outlineをhiddenしたい。outlineをinvisibleしたい。outline: none;したい。
  3. しかしながらtabで移動してきたときはfocusを当てたい。

◆前提知識:CSSの疑似クラス

条件によりCSSをあてたい時に使用。

MDN:疑似クラス

Vue CLIのserveをVS CodeからChromeでF5デバッグ

聖夜なので記事を捧げます。この狂った世界(Webフロントエンド)へ。
この記事がいつか、世界の片隅に打ち捨てられた震えるチワワフロントエンドエンジニアチワワを救うと信じています。

◆結論

Page 1 of 2

Powered by WordPress & Theme by Anders Norén