$30 off During Our Annual Pro Sale. View Details »

Vue.js v3.0 機能紹介① Teleport

Avatar for Kaneko Takeshi Kaneko Takeshi
November 20, 2020
Technology
0
26

Vue.js v3.0 機能紹介① Teleport

Pizza_JP#35

Avatar for Kaneko Takeshi

Kaneko Takeshi

November 20, 2020
Tweet

More Decks by Kaneko Takeshi

See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
Avatar for Kaneko Takeshi tkckaneko
0
30
Eye Tracking on the Browser
Avatar for Kaneko Takeshi tkckaneko
0
85
IEEE754を完全に理解した
Avatar for Kaneko Takeshi tkckaneko
1
76
CSSのトレンドをみんなで見よう -2021年-
Avatar for Kaneko Takeshi tkckaneko
0
93
多分これが一番早いと思います
Avatar for Kaneko Takeshi tkckaneko
0
26
暗黒面の話
Avatar for Kaneko Takeshi tkckaneko
0
24
CSR / SSR / SSG / JAMstack
Avatar for Kaneko Takeshi tkckaneko
0
69
BOLT
Avatar for Kaneko Takeshi tkckaneko
0
30
CSS Logical Properties and Values
Avatar for Kaneko Takeshi tkckaneko
0
35

Other Decks in Technology

See All in Technology
グレートファイアウォールを自宅に建てよう
Avatar for 綿糸てせ ctes091x
0
140
Karate+Database RiderによるAPI自動テスト導入工数をCline＋GitLab MCPを使って2割削減を目指す！ / 20251206 Kazuki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
680
ログ管理の新たな可能性？CloudWatchの新機能をご紹介
Avatar for Ikumi Ono ikumi_ono
1
640
Snowflakeでデータ基盤を もう一度作り直すなら / rebuilding-data-platform-with-snowflake
Avatar for pei0804 pei0804
4
1.3k
直接メモリアクセス
Avatar for KOBA789 koba789
0
290
今年のデータ・ML系アップデートと気になるアプデのご紹介
Avatar for Nayuta S. nayuts
1
260
技術以外の世界に『越境』しエンジニアとして進化を遂げる 〜Kotlinへの愛とDevHRとしての挑戦を添えて〜
Avatar for subroh_0508 subroh0508
1
430
生成AIでテスト設計はどこまでできる？ 「テスト粒度」を操るテーラリング術
Avatar for ks shota_kusaba
0
670
SSO方式とJumpアカウント方式の比較と設計方針
Avatar for Yuto Obayashi yuobayashi
7
590
AIと二人三脚で育てた、個人開発アプリグロース術
Avatar for ZOZO Developers zozotech
PRO
1
710
今からでも間に合う！速習Devin入門とその活用方法
Avatar for Izumu KUSUNOKI ismk
1
640
法人支出管理領域におけるソフトウェアアーキテクチャに基づいたテスト戦略の実践
Avatar for ogugu ogugu9
1
220

Featured

See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
39k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k

Transcript

  1. Vue.js 3.0 機能紹介① Teleport

  2. Teleport 通常では定義したコンポーネントが属するDOMツリーでレンダリン グされるのですが、Teleportを使えば別の場所に移動されることが できます。 - モーダルとか上のレイヤーに表示したいコンテンツを移動させ たりできる - 親要素のStyleに干渉されなくなる

  3. 超便利！

  4. Teleport ちなみに2系でもPortalVueってライブラリを使えばできます https://github.com/LinusBorg/portal-vue

  5. Teleport <teleport>コンポーネントでtargetにセレクタで指定すると、指定さ れたtargetのコンポーネント内にレンダリングされます。 <teleport to="body"> <Modal /> </teleport> ※ Vue.jsのDOMツリーの外でも指定できます

    この場合だと<body>の 直下に入ります

  6. Teleport デモ

  7. Teleport - DOMの構造を気にせずに、コンポーネントのカプセル化を行え る - コードが整理できる