Vue3.0 传送门语法

最新推荐文章于 2024-05-03 16:28:39 发布
最新推荐文章于 2024-05-03 16:28:39 发布
阅读量225 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52544128/article/details/114134996
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 30 teleport</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .area {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 200px;
            height: 300px;
            background: #000000;
        }
        .mask {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: #000000;
            opacity: .5;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <div id="hello"></div>
</body>
<script>
    //teleport 传送门语法
    //teleport 可以将元素属性传输到别的元素上去渲染
    const app = Vue.createApp({
        data() {
            return {
                show:false
            }
        },
        methods: {
            handleBtnClick() {
                this.show = !this.show;
            }
        },
        template:
            `<div class="area">
                <button @click="handleBtnClick">按钮</button>
                <teleport to="body">
                    <div class="mask" v-show="show">123</div>
                </teleport>     
            </div>
            `
    });
    app.mount('#root');
    
</script>
</html>
@huihui_new
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
极速上手 VUE 3——teleport传送门组件，前端开发大全
2401_84092423的博客
04-06 625
前端面试题汇总前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。
Vue超好玩的新特性：DOM传送门
前端交流群:954854084
09-04 683
前言 因为目前大多数的 Vue 3 文章重点都在讲 Composition API 和 响应式的优化 ，虽然这些新特性很棒，但大家都把其他的新特性给忽略掉了。或者有的文章只是简单的提了一嘴，然后写个简单的 Demo ，讲解的不够细致也不够深入。 除了 响应式的优化 和 Composition API 之外还有一些新特性非常的实用。所以记得关注我，带你解锁 Vue 3 各种好玩的新特性。 以下资料需要的可以加前端交流群：954854084或者关注微信公众号：晨曦大前端 联想 相信大家或多或少都听说过 传.
优雅实现Vue3页面跳转：详解Vue3中Teleport传送门组件原理、特点以及开发方法，让你高效地构建Web应用
weixin_43263566的博客
10-03 1176
Teleport 内置组件 （传送门）
Vue 的 teleport(传送 / 传送门)组件
学习笔记
12-17 985
类似于 component 和 keep-alive, teleport 同样是Vue 的内建组件。 现在有一个自定义组件 error-alert, 是对 JavaScript 的 alert() 的改进，当输入不合法时，会弹出警告，代码如下所示，看起来是没有任何问题。 <template> <div> <h2>Manage Goals</h2> <input type="text" ref="goal" /> <bu
极速上手 VUE 3——teleport传送门组件
最新发布
2401_84433829的博客
05-03 984
第一个挂载元素第二个挂载元素运行结果如图：上边的实例等价于：第一个挂载元素第二个挂载元素二、为什么使用 teleport使用 vue 开发时，都是多个组件之间不断地嵌套，处理元素的样式或者层级的时候就会变得困难。如我们需要添加一个 modal 模态框或 toast 提示框，如果我们把这样的框可以从 vue 组件中剥离出来，我们样式和层级设置起来会更加简便。有些同学会想，这直接放到 index.html 中不就好了吗？
Vue3——teleport 传送门
NanChen的博客
08-15 956
我们可以在组件的逻辑位置写模板代码，这意味着我们可以使用组件的 data 或 props。场景：像 modals,toast 等这样的元素，很多情况下，我们将它完全的和我们的 Vue 应用的 DOM 完全剥离，管理起来反而会方便容易很多。Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，就有点像哆啦A梦的“任意门”。另外，像 modals,toast 等这样的元素需要使用到 Vue 组件的状态（data 或者 props）的值。...
Vue 3.0中jsx语法的使用
01-21
Vue 3.0 正式发布了，喜大普奔:beaming_face_with_smiling_eyes:。新的语法又要学习一阵阵，不过需要在生产环境下大面积使用，可能需要等到它的周边工具：vuex，vue-router 等等全部升级完毕。 Vue 3.0 中尤大使用的...
vue3.0初学语法.md
08-04
vue3.0初学语法.md
vue3.0基础语法的练习笔记
02-07
Vue 3.0 基础语法实践笔记 Vue 3.0 是一个革命性的前端框架，提供了许多新的语法和功能，本笔记将对 Vue 3.0 的基础语法进行实践和总结。 Vite Vite 是 Vue 3.0 的一个新的开发服务器，取代了传统的 Webpack。...
初学者vue3.0语法
03-13
在这个初学者指南中，我们将深入探讨Vue 3.0的一些关键语法和特性。 ### 一、Composition API Vue 3.0 引入了Composition API，它允许开发者更灵活地组合和重用功能。在Vue 2.x中，我们通常使用Options API来定义...
Vue3.0配置多页面应用
03-17
Vue3.0支持最新的JS特性，但考虑到浏览器兼容性，可能需要配置Babel来处理这些新语法。 3. **package-lock.json**和**package.json**：这两个文件是Node.js项目的依赖管理文件。`package-lock.json`记录了精确的...
vue3 portal传送门
wallace_yang的博客
02-19 903
将dom元素移动到相应的位置，可以应用于使用模态框时需要将模态框dom写在body下，但是又想将模态框dom写在有逻辑关系的dom下。 使用方式如下： 1.在index.html的body下加入目标容器即modal-target 的div 2.在vue文件 中自己想要的位置写自己的模态框dom，并用Portal包裹，并指明目标容器 3.就会发现模态框的dom出现在了body下的modal-target 的div中 本文转载自B站哈默 ...
vue+elementui升级传送门 + 升级体验
weixin_33910460的博客
04-24 160
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue简单用法目录总结 以及 前端基础总结传送门：
weixin_30550271的博客
10-24 70
Vue官方网址：https://cn.vuejs.org/ Vue 第三方组件：Element：http://element-cn.eleme.io/#/zh-CN Vue 基础指令以及自定义指令：https://www.cnblogs.com/Fushengliangnian/articles/9831790.html Vuecomponent 组件介绍：https://www.cn...
Vue中的teleport传送门功能
Ghost__H的博客
06-09 308
1.利用teleport制作mask蒙板 <style> .area { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; background: green; } .mask {
portal-vue 在Vue中的使用
roamingcode的博客
10-30 1万+
引文 使用过React的同学可能知道,在目前React的版本中可以找到一个叫Portals的相关API. 那么这potrol是用来干什么的? 下面看一下它的使用说明 Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。 第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或碎片。第二个参数（container）则是一个 DOM 元素。 Rea...
前端面试 vuex 使用详解
卡卡西：一个擅长拷贝的前端程序员
05-31 997
vuex是什么？ “Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。” -----援引自vuex官网 一、安装 npm install vuex --save 二、核心概念 state：单一状态树，用一个对象就包含了全部的应用层级状态。 Mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：...
传送门（持续更新）
热门推荐
sunshine_running的博客
09-24 1万+
落谷题库 P1013 进制位 https://blog.csdn.net/sunshine_running/article/details/107728846 P1039 侦探推理 https://blog.csdn.net/sunshine_running/article/details/107729119 灵魂科普 第一篇 https://blog.csdn.net/sunshine_running/article/details/107743746 第二篇 https://blog.csdn.net/
传送门（portal）
weixin_30765475的博客
01-09 452
Linux operation（Linux运维） #RHEL/CentOS/fedora系列为主 　　Basis: 　　Kernel: 　　　　常见系统调用 　　Commands: 　　　　trouble shooting命令详解目录 　　Services: 　　　　SSH: 　　　　各种文件系统FileSystem: 　　　　NFS: 　　　　F...
推荐vue3.0示例项目吗
06-12
3. Vue.js 3.0 TodoMVC：这是一个基于Vue3.0的TodoMVC应用程序的示例，可以帮助你了解Vue3.0的模板语法和组件化开发体验。 4. Vue.js 3.0 Portfolio：这是一个基于Vue3.0的个人作品展示应用程序的示例，可以帮助你...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值