Давайте телепортируем Бенджамина Франклина с помощью Vue JS
programming vuejs web-development javascript

Давайте телепортируем Бенджамина Франклина с помощью Vue JS

1 ноября 2023 г.

Да, я говорю о телепортации, но не в голливудском фильме, а в реальной жизни. Мы создадим приложение, которое заставит Бенджамина Франклина телепортироваться туда и обратно в приложениях Vue, и все это с помощью Vue JS. Vue JS предоставляет встроенный компонент под названием , который поможет нам в нашей благородной миссии.

Что такое Teleport в Vue JS?

Teleport — это встроенный компонент Vue JS, который телепортирует компонент за пределы исходной иерархии DOM приложения Vue. Ваш шаблон телепортируется в новый DOM. Это такое же безумие, как телепортировать свой дом за пределы вашего континента.

Давайте сначала создадим новое приложение Vue. Я назову своего Бенджи

npm create vue@latest

Я предпочитаю удалять все ненужные стили и CSS-приложения перед тем, как начать. Я думаю, что это хорошая идея, потому что их присутствие очень раздражает. Я предлагаю вам также удалить style.css. Ваш файл main.js должен выглядеть примерно так.

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

И удалите все из App.vue и начните заново. Ваш App.vue должен выглядеть примерно так!

<template>

</template>

<script>
export default {

}
</script>

<style>

</style>

Давайте создадим два элемента div и телепортируем внутри них компоненты взад и вперед и сначала научимся телепортироваться. Создайте два блока в двух отдельных элементах div в App.vue с такими стилями.

<template>
<div>
  <div id="box1">

  </div>
  <div id="box2">

  </div>
</div>
</template>

<script>
export default {

}
</script>

<style>
#box1{
  background-color: pink;
  width:100%;
  height:300px;
}
#box2{
  background-color: red;
  height:300px;
  width:100%;
}
</style>

Теперь у нас есть приложение Vue, которое выглядит вот так.

Давайте создадим очень простой компонент h1 внутри box1. Вот так:

<template>
<div>
  <div id="box1">
    <h1>Hello World </h1>
  </div>
  <div id="box2">

  </div>
</div>
</template>

Помните, что box1 — розовый, а box2 — красный. Давайте попробуем телепортировать этот компонент h1 в блок div2 следующим образом:

<template>
<div>
  <div id="box1">
    <Teleport to="#box2">
    <h1>Hello World </h1>
    </Teleport>
  </div>
  <div id="box2">

  </div>
</div>
</template>

Что случилось? Куда делся компонент h1? Я вообще не вижу компонента h1. Он полностью исчез и, конечно же, компонент h1 не был перенесен в box2.

Помните определение телепорта?

Предполагается телепортировать компонент за пределы DOM в другой DOM, а не внутри элементов div или чего-либо внутри DOM. Итак, давайте возьмем наш div с идентификатором box2 и поместим его за пределы нашей иерархии DOM, например так.

Перейдите на страницу index.html и создайте div box2 вот так. Ваша страница index.html должна выглядеть примерно так.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <div id="box2"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Теперь давайте телепортируем наш div из box1 в наш div из box2

<template>
<div>
  <div id="box1">
    <Teleport to="#box2">
    <h1>Hello World </h1>
    </Teleport>
  </div>

</div>
</template>

<script>
export default {

}
</script>

<style>
#box1{
  background-color: pink;
  width:100%;
  height:300px;
}
#box2{
  background-color: red;
  height:300px;
  width:100%;
}
</style>

Миссия выполнена!! Наш компонент h1 перенесен в другой раздел.

Пришло время поиграть с нашим другом Бенджи

Загрузите изображение Бенджамина Франклина, назовите его «Бенджамин» и поместите в папку «Ресурсы». Перейдите на страницу App.vue, импортируйте и поместите изображение в поле 1.

<template>
<div>
  <div id="box1">
    <img :src="this.pic"/> 
  </div>

</div>
</template>

<script>
import pic from './assets/benjamin.jpg'
export default {
  data(){
    return{
      pic:pic
    }
  }
}
</script>

<style>
#box1{
  background-color: pink;
  width:100%;
  height:300px;
}
#box2{
  background-color: red;
  height:300px;
  width:100%;
}
</style>

Теперь у нас есть изображение Бенджамина Франклина в нашем блоке div1.

Давайте ради интереса создадим еще один элемент div за пределами DOM на нашей странице index.html.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

И добавьте к нему несколько интересных стилей. Помните, что стиль не может быть ограничен; если он ограничен, он не будет работать! Поместите все стили на нашу страницу App.vue.

<style>
#box1{
  background-color: pink;
  width:100%;
  height:300px;
}
#box2{
  background-color: red;
  height:300px;
  width:100%;
}
#box3{
  background-color: green;
  height:300px;
  width:100%;
}
</style>

Пришло время телепортировать Бенджамина Франклина в box2, просто снова воспользовавшись простым компонентом 

<template>
<div>
  <div id="box1">
    <Teleport to="#box2">
    <img :src="this.pic"/>
    </Teleport>
  </div>

</div>
</template>

<script>
import pic from './assets/benjamin.jpg'
export default {
  data(){
    return{
      pic:pic
    }
  }
}
</script>

<style>
#box1{
  background-color: pink;
  width:100%;
  height:300px;
}
#box2{
  background-color: red;
  height:300px;
  width:100%;
}
#box3{
  background-color: green;
  height:300px;
  width:100%;
}
</style>

И Виола! У нас есть результаты!

Давайте телепортируемся в box3 прямо сейчас!

<template>
<div>
  <div id="box1">
    <Teleport to="#box3">
    <img :src="this.pic"/>
    </Teleport>
  </div>

</div>
</template>

<script>
import pic from './assets/benjamin.jpg'
export default {
  data(){
    return{
      pic:pic
    }
  }
}
</script>

<style>
#box1{
  background-color: pink;
  width:100%;
  height:300px;
}
#box2{
  background-color: red;
  height:300px;
  width:100%;
}
#box3{
  background-color: green;
  height:300px;
  width:100%;
}
</style>

Сегодня мы не только изучили Vue JS; мы создали искусство и заново пережили историю. Посмотрите мое видео о телепортации в Vue JS! Я также телепортировал сюда Бенджамина Франклина 👇

https://www.youtube.com/watch?v=N8BsnTiiuJo&t =248s&embedable=true

Распространяйте любовь как оператор распространения

[…Любовь]

Саманджа

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE