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
30
0

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

Pizza_JP#35

Avatar for Kaneko Takeshi

Kaneko Takeshi

November 20, 2020

More Decks by Kaneko Takeshi

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

Other Decks in Technology

See All in Technology
音声言語モデル手法に関する発表の紹介
Avatar for Kazuki Inamura kzinmr
0
130
No Types Needed, Just Callable Method Check
Avatar for dak2 dak2
1
1.7k
MLOps導入のための組織作りの第一歩
Avatar for Daisuke Akagawa (Akasan) akasan
0
360
AgentCore Managed Harness を使ってみよう
Avatar for やくも yakumo
2
210
AgentCore×VPCでの設計パターンn選と勘所
Avatar for Har1101 har1101
3
300
実践ハーネスエンジニアリング：TAKTで実現するAIエージェント制御 / Practical Harness Engineering: AI Agent Control Enabled by TAKT
Avatar for nrs nrslib
12
4.8k
Rapid Start: Faster Internet Connections, with Ruby's Help
Avatar for kazuho kazuho
2
760
弁護士ドットコム株式会社 エンジニア職向け 会社紹介資料
Avatar for 弁護士ドットコム bengo4com
1
180
自分のハンドルは自分で握れ！ ― 自分のケイパビリティを増やし、メンバーのケイパビリティ獲得を支援する ― / Take the wheel yourself
Avatar for TAKAKING22 takaking22
1
960
Arcana: Production-Ready RAG in Elixir @ ElixirConf EU 2026
Avatar for georgeguimaraes georgeguimaraes
0
110
Revisiting [CLS] and Patch Token Interaction in Vision Transformers
Avatar for yu4u yu4u
0
390
AIを共同作業者にして書籍を執筆する方法 / How to Write a Book with AI as a Co-Creator
Avatar for ama-ch ama_ch
2
150

Featured

See All Featured
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
180
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
450
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.7k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
220
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
3.1M
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
270
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.1k

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