タグ

2020年7月29日のブックマーク (8件)

  • Vue3でv-modelがどう変わったか - Qiita

    はじめに Vue3になって、v-modelにも少し変更があったようなので、 どう変わったのか動作を確かめてみました。 変更点については、以下を参考にしています。 https://github.com/vuejs/rfcs/blob/master/active-rfcs/0005-replace-v-bind-sync-with-v-model-argument.md https://github.com/vuejs/rfcs/blob/master/active-rfcs/0011-v-model-api-change.md 変更点 通常の使い方は変わらない これまで通り、<input>要素に対してのv-modelの使い方は変わらないようです。

    Vue3でv-modelがどう変わったか - Qiita
    bleu-bleut
    bleu-bleut 2020/07/29
    Vue2.0でも複数のデータを同期したい場合は、.syncを使用することで同様のことができる※2.3.0以降
  • vue.js truncate - Qiita

    Vue.filter('truncate', (value, length) => { if(value){ var length = length ? parseInt(length, 10) : 20; if (value.length <= length) { return value; } return value.substring(0, length) + '...'; } });

    vue.js truncate - Qiita
  • Vue.js を1から学んでみた〜修飾子〜 - Qiita

    Vue.js を1から学んでみた。にて書いてきましたが、 長くなり編集しにくくなってきたので、分割しました(こんなやりかたしないのかな?知りたい。) 5-1.イベント修飾子 イベントハンドラ内でそのイベントを止めたり、バブリングを止めるために、 event.preventDefault()やevent.stopPropagation()をメソッドの最初にコールするが、 Vueには同等の機能をもった便利なイベント修飾子.stopや.preventがある。 v-onディレクティブの引数に設定するDOMイベントに追加する形式で書く。例:v-on:click.stop 「バブリング」については、DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017を参照 .stopや.preventだけでなく、以下が用意されている。 .stop .prevent .capture .se

    Vue.js を1から学んでみた〜修飾子〜 - Qiita
  • vue-routerのrouter.goがsafariで機能しない時の対処法 - Qiita

    はじめに vue-routerを使ったSPAアプリケーションを開発している時に、router.goメソッドでリロードを実現していましたが、ChromeからSafariに切り替えて検証したら動作しなかったため、対処法を調べてみました。

    vue-routerのrouter.goがsafariで機能しない時の対処法 - Qiita
  • Vue.js を1から学んでみた〜ディレクティブ〜 - Qiita

    Vue.js を1から学んでみた。にて書いてきましたが、 長くなり編集しにくくなってきたので、分割しました(こんなやりかたしないのかな?知りたい。) 4.ディレクティブ 特徴としては、以下かと。 v- から始まる特別な属性 属性値は、単一の JavaScript 式を期待する(例外はv-for) 属性値の式が変更された時に、DOMを更新する 省略記法あり。 例:<a v-bind:href="url"> ... </a> → <a :href="url"> ... </a> v-のディレクティブについて捉えることが必要そうなので、まとめようと思います。 ※次の記事にもまとまっており、参考にもさせていただきました。 体で覚えるVue.js - ディレクティブ編 〜 JSおくのほそ道 #023 v-text DOMの内側に展開。 Mustache構文({{}}で囲んだコード)と一緒。 省略系→

    Vue.js を1から学んでみた〜ディレクティブ〜 - Qiita
  • FirestoreのデータをElastcsearchへ移行してみた - Qiita

    FirebaseのFirestoreの検索がいまいちなので、 Elasticsearchを使うことにしてみました。 特にFirestoreのgeohashでの検索の精度がいまひとつ悪い、 というのが一番の理由です。 というわけで、FirestoreのデータをElasticsearchへインポートしてみました。 Elasticsearchの準備 今回は、Elastic Cloudサービスを利用することにしました。 無料トライアルを利用してみて、このCloudサービスから利用した方がコントロールパネルが充実してそうなのでこちらを選択することにしました。 たぶん、料金はGCPAWSから直で使っても同等の値段になると思います。 indexの作成 testというindexを作成 mapping設定 Elasticsearchでは基データ投入時に自動で型を設定してくれるようですが、 それだと緯度経

    FirestoreのデータをElastcsearchへ移行してみた - Qiita
    bleu-bleut
    bleu-bleut 2020/07/29
    Elastic Searchにもクラウドサービスがあったんだ
  • RETISSA Display II | Mogura VR Store

    「RETISSA Display II」は、独自のレーザ網膜走査技術「VISIRIUM(ヴィジリウム)」により、網膜に映像を直接投射するアイウェアです。ディスプレイに表示するのでなく網膜に投射することで視力やピント位置に左右されずに鮮明な映像などを見ることが可能です。 PCやスマホからHDMIケーブル経由で網膜投射される映像は、肉眼で見ている現実の風景そのものと重なるので、従来のディスプレ型のARグラスと違いピントずれの無い自然なAR体験を実現します。 前モデルと比較して、解像感の向上によりおよそ半分のサイズの文字まで判別できるようになったほか、小型軽量化を実現。また、電源供給用USB端子や音声出力用端子が搭載され、投影の左右が切り替え可能(前モデルは右目用、左目用の2タイプ)となりました。

    bleu-bleut
    bleu-bleut 2020/07/29
    500円でレンタルできる
  • MRショッピング体験を常設展示、ARでのブランド研究へ

    MRショッピング体験を常設展示、ARでのブランド研究へ 株式会社MESON、株式会社サイバーエージェント、株式会社CyberHuman Productionsの3社は、AR領域でのブランド体験のユースケースを研究することを発表しました。第一弾として、MESONのAR/MRショッピング体験「PORTAL with Nreal」の体験ブースを、東京・カムロ坂スタジオに設置しています。 「PORTAL With Nreal」はMRグラス「NrealLight」を使って「自分の部屋を、お店以上に便利で楽しく買い物ができる空間にする」ARショッピング体験です。体験者はバーチャルなオブジェクトによって表現されるブランドの世界観を鑑賞でき、気に入った洋服を購入する、といった体験ができます。 コンテンツは、AR/VRアワード「Auggie Awards」にて、ソフトウェア領域において日初となるBest

    MRショッピング体験を常設展示、ARでのブランド研究へ