Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
26
Eye Tracking on the Browser
Avatar for Kaneko Takeshi tkckaneko
0
83
IEEE754を完全に理解した
Avatar for Kaneko Takeshi tkckaneko
1
75
CSSのトレンドをみんなで見よう -2021年-
Avatar for Kaneko Takeshi tkckaneko
0
92
多分これが一番早いと思います
Avatar for Kaneko Takeshi tkckaneko
0
25
暗黒面の話
Avatar for Kaneko Takeshi tkckaneko
0
23
CSR / SSR / SSG / JAMstack
Avatar for Kaneko Takeshi tkckaneko
0
68
BOLT
Avatar for Kaneko Takeshi tkckaneko
0
28
CSS Logical Properties and Values
Avatar for Kaneko Takeshi tkckaneko
0
32

Other Decks in Technology

See All in Technology
AWSで推進するデータマネジメント
Avatar for かわなご kawanago
0
730
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
Avatar for よしたけ yoshitake945
0
210
AI時代に非連続な成長を実現するエンジニアリング戦略
Avatar for SansanTech sansantech
PRO
3
890
スプリントレトロスペクティブはチーム観察の宝庫？ 〜チームの衝突レベルに合わせたアプローチ仮説！〜
Avatar for Hatorik electricsatie
1
140
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
Avatar for gree_tech gree_tech
PRO
0
410
7月のガバクラ利用料が高かったので調べてみた
Avatar for 高橋広和 techniczna
3
800
JavaScript 研修
Avatar for Recruit recruitengineers
PRO
6
1.3k
Flutterでキャッチしないエラーはどこに行く
Avatar for AOKI Taiju taiju59
0
210
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
Avatar for gree_tech gree_tech
PRO
0
420
ガチな登山用デバイスからこんにちは
Avatar for halka halka
1
190
DeNA での思い出 / Memories at DeNA
Avatar for Kuniwak orgachem
PRO
6
1.9k
プロダクトの成長に合わせたアーキテクチャの段階的進化と成長痛、そして、ユニットエコノミクスの最適化
Avatar for KAKEHASHI kakehashi
PRO
1
110

Featured

See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
31
2.2k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Code Review Best Practice
Avatar for Trisha Gee trishagee
70
19k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
11
1.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.8k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.8k

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の構造を気にせずに、コンポーネントのカプセル化を行え る - コードが整理できる