网站作品怎么做,苏州百度 seo,桂林网络科技,做网站需要租服务器吗Fragment
在Vue2中#xff0c;template标签内#xff0c;必须有一个div标签#xff0c;作为根标签。 在Vue3中#xff0c;可以没有div根标签#xff0c;如果没有的话#xff0c;Vue3会将多个标签包装在一个Fragment虚拟元素里。 这么做的目的#xff1a;减少标签的层级…Fragment
在Vue2中template标签内必须有一个div标签作为根标签。 在Vue3中可以没有div根标签如果没有的话Vue3会将多个标签包装在一个Fragment虚拟元素里。 这么做的目的减少标签的层级减少内存占用。
Teleport
Teleport是一个内置组件可以将一个组件内部的模板传送到该组件DOM外部的位置去。 App.vue
templatediv classouterh3Tooltips with Vue 3 Teleport/h3divMyModal//div/div
/template
script
import MyModal from ./components/MyModal.vue;export default {name: App,components: {MyModal},setup() {}
}
/scriptMyModal.vue
templatebutton clickopen trueOpen Modal/buttonTeleport tobody!--我希望将Teleport包裹的内容插入到body里面--div v-ifopen classmodalpHello from the modal!/pbutton clickopen falseClose/button/div/Teleport
/template
script
import {ref} from vueexport default {name: MyModal,setup() {const open ref(false);return {open}}
}
/script
style scoped
.modal {position: fixed;z-index: 999;top: 20%;left: 50%;width: 300px;margin-left: -150px;border: 1px solid red;
}
/styleSuspense
Suspense是一个内置组件用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成并可以在等待时渲染一个加载状态需要结合异步依赖才能看到效果。 为了演示效果将网络调整为Fast 3G来查看效果。 Child.vue
templatediv idChildh1我是子组件/h1/div
/template
script
export default {name: Child
}
/script
style scoped
#Child {background-color: green;padding: 10px;
}
/styleApp.vue
templatediv idApph1我是父组件/h1Suspensetemplate v-slot:default!--正常加载的时候展示Child组件--Child//templatetemplate v-slot:fallback!--网速慢或者加载失败的时候提示加载中……--h1加载中……/h1/template/Suspense/div
/template
script
// import Child from ./components/Child.vue;// 静态引入
import {defineAsyncComponent} from vue;const Child defineAsyncComponent(() import(./components/Child.vue));// 异步引入
export default {name: App,components: {Child}
}
/script
style scoped
#App {background-color: red;padding: 10px;
}
/style
