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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Kaneko Takeshi Kaneko Takeshi
November 20, 2020
Technology
0
28

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

Other Decks in Technology

See All in Technology
非情報系研究者へ送る Transformer入門
Avatar for Ryo Ishiyama rishiyama
13
8.3k
Everything Claude Code を眺める
Avatar for Oikon oikon48
11
7k
Kiro Powers 入門
Avatar for Kazuki Adachi k_adachi_01
0
110
OSC仙台プレ勉強会　AlmaLinuxとは
Avatar for koedoyoshida koedoyoshida
0
190
銀行の​内製開発にて​2つの​プロダクトを​１つのチームで​スクラムしてみてる​話
Avatar for koba1210 koba1210
1
140
Lambda Web AdapterでLambdaをWEBフレームワーク利用する
Avatar for arakawsh sahou909
0
160
Zeal of the Convert: Taming Shai-Hulud with AI
Avatar for Rami McCarthy ramimac
0
150
楽しく学ぼう！ネットワーク入門
Avatar for Shota Shiratori shotashiratori
4
3.4k
【Oracle Cloud ウェビナー】【入門編】はじめてのOracle AI Data Platform - AIのためのデータ準備&自社用AIエージェントをワンストップで実現
Avatar for oracle4engineer oracle4engineer
PRO
1
150
[E2]CCoEはAI指揮官へ。Bedrock×MCPで構築するコスト・セキュリティ自律運用基盤
Avatar for ishii-takuya taku1418
0
190
バクラク最古参プロダクトで重ねた技術投資を振り返る
Avatar for ypresto ypresto
0
170
Cortex Code CLI と一緒に進めるAgentic Data Engineering
Avatar for あれ __allllllllez__
0
410

Featured

See All Featured
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
240
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
48k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
190
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.2k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.1k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
320
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
140
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
160
Design in an AI World
Avatar for tapps tapps
0
170

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