Vue3学习笔记---新的组件

LinMeng
• 阅读 261

新的组件

Fragment

----片段
  • 在Vue2中:组件必须要有一个根标签
  • 在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中
  • 好处:减少标签层级,较少内存占用

Teleport

----瞬间移动,传送
  • 什么事Teleport?----Teleport是一种能够将我们的组件html结构移动到指定位置的技术

    <template>
      <div>
        <button @click="isShow = true">点我弹窗</button>
        <!-- 把弹窗从藏得很深很深的组件里面传送到任意想传送的组件中,相当于可以指定该弹窗向某个固定的HTML元素定位,不会受到别的定位元素的影响 -->
        <teleport to="body">
          <div class="mask" v-if="isShow">
            <div class="dialog">
              <h3>我是一个弹窗</h3>
              <h4>内容1</h4>
              <h4>内容1</h4>
              <h4>内容1</h4>
              <h4>内容1</h4>
              <button @click="isShow = false">关闭弹窗</button>
            </div>
          </div>
        </teleport>
      </div>
    </template>
    
    <script>
    import { ref } from "vue";
    export default {
      name: "dialog",
      setup() {
        let isShow = ref(false);
        return { isShow };
      },
    };
    </script>
    
    <style>
    .mask {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .dialog {
      position: absolute;
      /* 50%参考的是定位的父元素 */
      top: 50%;
      left: 50%;
      /* -50%参考的是自身 */
      transform: translate(-50%, -50%);
      text-align: center;
      width: 300px;
      height: 300px;
      background-color: green;
    }
    </style>
点赞
收藏
评论区
推荐文章
晴空闲云 晴空闲云
2年前
vue3中基于script setup语法糖的$refs使用
在用vue3开发项目的时候,需要调用子组件的方法,于是想着用$refs来实现,但是我是使用scriptsetup语法糖,原先vue2的语法已经不适用了。于是一番折腾和查阅资料,终于搞定。vue2语法vue2语法在组件上设置ref属性后,在代码里可以通过this.$refs.ref值访问到对应的子组件。一个设置ref值的组件:html在js代码中可以通
浩浩 浩浩
3年前
【Flutter实战】对齐与相对定位(Align)
4.6对齐与相对定位(Align)在上一节中我们讲过通过Stack和Positioned,我们可以指定一个或多个子元素相对于父元素各个边的精确偏移,并且可以重叠。但如果我们只想简单的调整一个子元素在父元素中的位置的话,使用Align组件会更简单一些。4.6.1AlignAlign组件可以调整子组件的位置,并且可以根据子
这是一份用心整理的Android面试总结,涨姿势!
AndroidJetpack组件的作用是什么?Navigation:一个用于管理Fragment切换的工具类,可视化、可绑定控件、支持动画等是其优点。DataBinding:不用说,都知道,加速MVVM的创建。Lifecycle:他是我们能够处理Activity和Fragment的生命周期的重要原因,在AndroidX的Fragment和Activ
LinMeng LinMeng
1年前
Vue3学习笔记之---新的组件
新的组件Fragment片段在Vue2中:组件必须要有一个根标签在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中好处:减少标签层级,较少内存占用Teleport瞬间移动,传送什么事Teleport?Teleport是一种能够将我们的组件html结构移动到指定位置的技术点我弹窗我是一个弹窗内容1
Souleigh ✨ Souleigh ✨
3年前
React Hooks 快速上手
ReactHook快速上手一、Hook简介1.1Hook历史在ReactHook出现之前的版本中,组件主要分为两种:函数式组件和类组件。其中,函数式组件通常只考虑负责UI的渲染,没有自身的状态也没有业务逻辑代码,是一个纯函数。而类组件则不同,类组件有自己的内部
Easter79 Easter79
2年前
VUE+ElementUI布局随笔
1.elcontainer标签非必须。2.每一个vue文件中,所有的html代码都应该写在同一个dom中,否则会报错。3.elaside默认宽度为300px,可以通过在标签中修改width属性来调整。4.若routerview想通过name属性来指定渲染的组件,则在router.js中,该组件在注册时,必须是component
Stella981 Stella981
2年前
Lightning Web Components html_templates(三)
LightningWebComponents强大之处在于模版系统,使用了虚拟dom进行智能高效的组件渲染。使用简单语法以声明方式将组件的模板绑定到组件的JavaScript类中的数据数据绑定我们可以使用{property}绑定组件模版属性到一个组件js类中的属性一个简单的例子组件class
helloworld_40038029 helloworld_40038029
9个月前
黑马Vue3 + ElementPlus + Pinia 小兔鲜电商项目2023
Vue3和ElementPlus是一对强大的前端技术组合,帮助开发者构建现代化的用户界面。Vue3作为一种流行的JavaScript框架,提供了响应式数据绑定、组件化开发和虚拟DOM等特性。而ElementPlus是基于Vue3的UI库,提供了丰富的组件和样式,使得开发人员可以轻松地构建漂亮且高效的Web应用。本文将介绍Vue3和ElementPlus的特点、使用方法和核心功能。
李异 李异
7个月前
一文盘点WeTab新标签页里那些好用的小组件
众所周知,WeTab新标签页是一款非常漂亮的浏览器主页,可以在主页里添加各种图标和小组件。这篇文章就来盘一盘WeTab里那些好用的小组件。
秦朗 秦朗
1个月前
Vue3入门与项目实战 掌握完整知识体系2022
//下仔のke:https://yeziit.cn/13982/Vue3是一个流行的前端框架,它提供了许多新的特性和改进,使得开发人员能够更加高效地构建用户界面。Vue3的主要特性包括更好的性能、更简单的API、更强大的组件系统、更好的TypeScript
LinMeng
LinMeng
Lv1
争取早日实现“代码自由” wa !!!
文章
50
粉丝
7
获赞
33