辛集seo网站优化价格,网站推广的主题,免费网站注册com凶,包装设计模板网站Vue3学习第四篇 01. 插槽Slots02. 插槽Slots#xff08;续集#xff09;03. 插槽Slots#xff08;再续集#xff09;04. 组件生命周期05. 生命周期应用06. 动态组件07. 组件保持存活08. 异步组件09. 依赖注入10. Vue应用 01. 插槽Slots 模板内容#xff1a;html结构#… Vue3学习第四篇 01. 插槽Slots02. 插槽Slots续集03. 插槽Slots再续集04. 组件生命周期05. 生命周期应用06. 动态组件07. 组件保持存活08. 异步组件09. 依赖注入10. Vue应用 01. 插槽Slots 模板内容html结构可能是div标签等 也就是说插槽是用来显示html结构的。
实操
在App.vue中 在ShotsBase组件中 结果 所以slot/slot在哪html结构就在哪显示 02. 插槽Slots续集
1渲染作用域
如果这个标签内容不是写死的那么应该由父组件来动态传递数据还是由子组件呢
答案是父组件 因为插槽是在子组件中渲染 2默认内容
3具名插槽
组件之间传递这个插槽内容不是固定的可以是一个/两个/三个且是可以分开的。 下图中传递了两个插槽每个插槽分别有两个h3标签我们希望能各渲染一个 但是结果却重复渲染了 接下来我们使用具名插槽 结果如我们所愿
注意简写 v-slot在父组件中
03. 插槽Slots再续集 所以我们的需求是把子组件数据传递给插槽 怎么实现呢
简记为子传父父合并父传子子渲染。 父组件用一个名为“slotProps”接收也可自己起名slotProps是一个对象对象里面包含子元素传递过来的那一条数据。 如下形式便可拿到数据并显示在页面中。 如果是具名插槽呢如下
04. 组件生命周期 从组件被创建那一刻开始到组件被卸载那一刻这是组件的整个生命周期。 在vue的生命周期中有很多关键节点。比如我们所说的组件被创建的时候、组件初次被渲染了、组件的数据被更新了、组件销毁了。
生命周期钩子函数是自动执行的不需要被调用。 记粉红色部分 实操下面部分以此类推就没有截出来了
运行 控制台自动跳出前四条数据 点击“更新数据”按钮页面数据由“更新之前”改为“更新之后” 控制台跳出如下两条数据最后两条。 05. 生命周期应用 1应用一
2应用二 结果
不过created不太好改为mounted更好。 因为created的时候ui还没渲染mounted的时候才渲染。 上图中数据能出来是因为数据量小
对于网页而言先把组件结构渲染出来重要而不是先拿到数据。
所以我们应该用mounted把整个结构已经渲染完成渲染完成之后再去获取数据再把页面渲染到浏览器界面之上。
06. 动态组件
有些场景会需要两个组件间来回切换。
结果
07. 组件保持存活 切换回A卸载B没加载那两句话是因为B组件中没有写入控制台打印输出那两句话。 加上keep-alive之后切换到B时A不会被卸载自然切换回A时数据和保持被操作后的一样。
08. 异步组件 同步与异步的概念 同步多个功能ABC三个功能排队按顺序执行。 异步多个功能ABC三个功能同时进行。 异步组件的目的优化组件的性能。或者说优化项目的性能。 同步组件假如我们的项目中有100个组件如果全都以正常组件加载的方式加载项目一旦运行100个组件会同时被加载出来然后项目才能正常运行。 异步组件用到哪个组件加载哪个。 优势加开项目时加载会更快符合业界的需求 实现方式 没有使用异步组件时打开网络请求 然后把这些清理掉再做组件切换的时候会发现没有新的网络请求再形成了。 说明第一次打开这个项目的时候所有的内容都已经被加载包含A、B组件。 使用异步组件之后 重新请求了一次B组件。说明第一次只加载了A组件。 09. 依赖注入 解决方案
也可以传递动态数据 子组件亦如此 接收到的数据也可以放入data内处理然后再返回
注意组件之间一定要有关系才能传递。
还有一个需要注意的细节 实操
10. Vue应用
这节课其实是要告诉大家Vue项目是从哪开始执行的。 先前讲的都是Vue的API并没有说Vue是哪开始入口然后一步一步执行下来的。一直都是利用Vue的脚手架 或者是 Vue的工具来创建好项目然后直接在项目当中修改。 我们首先要说的是应用实例 ps:这段代码存在于main.js中。 什么是应用实例呢 你可以把应用实例理解为Vue的实例对象因为是Vue的项目所有每一个Vue项目肯定都要有一个Vue的实例从Vue的实例开始一步步往下执行。 代码解读: 从Vue中引入createApp然后用它来创建一个App对象 (Vue的实例对象) 对比两图,可以看出App是根组件那么什么是根组件呢 因为Vue是组件化开发Vue的项目都是从第一个组件开始的而我们这个App。vue就是第一个组件,也被称为根组件。 当然单纯把Vue项目创建出来并把根组件传入这个项目还不算是完成。还要做一件事,那就是挂载应用。 必须要执行app.mount并挂载一个根的容器。
因为Vue并不能直接在浏览器中运行必须挂载在容器当中。
为什么是#app它是用来找index.html的。 日后vue中所有的页面的内容都将放在这个div容器当中呈现。 所以,运行项目时: 其实真正的运行入口是index.html文件所有的内容都挂在里面。 此外注意 构建工具 : (Webpack和Vite) 用来打包以及发布。
其实我们所有所写的Vue代码最终都会被编译成一个main.js文件。
然后我们在html中把它引入进来整个程序就正常运行了。
