摘要: 1:二者作用:都是控制元素的显示与隐藏 2:区别 v-if 动态的向DOM树内添加或者删除DOM元素;是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;在初始渲染条件为假时,什么也不做。 v-show 通过设置DOM元素的display样式属性控制显示和隐藏;不管 阅读全文
posted @ 2022-05-12 16:42 蘑菇萌萌哒 阅读(260) 评论(0) 推荐(0)
摘要: 1:什么是MVVM M:model 数据模型 V:视图模板 VM:视图模型 VM层是中间层,连接数据模型和视图模板,由Vue实现。由vm代替以前的dom操作,只操作vm层 2:MVVM的优点 MVVM模式和MVC模式一样,主要目的是分离视图(view)和模型(Model),有几大优点 1、低耦合:视 阅读全文
posted @ 2022-05-12 16:06 蘑菇萌萌哒 阅读(151) 评论(0) 推荐(0)
摘要: 实现点击切换歌曲 (1)思路,当前播放歌曲的下标为0,点击那首歌曲,那首歌曲下标为0 (2)定义点击修改播放歌曲的函数 (3)在playlist中引入mapmutations函数 (4)使用mapmutations函数 接收store中mutations的setPlayIndex方法 绑定click 阅读全文
posted @ 2022-05-12 15:32 蘑菇萌萌哒 阅读(45) 评论(0) 推荐(0)
摘要: 1格式化处理中的播放量,让他看起来更方便 (1)准备函数并抛出 (2)调用 这里注意要在最后调用一下,并在播放量的地方调用 2播放歌曲 (1)在data中准备一个变量控制暂停按h的切换 (2)利用v-if实现播放和暂停更换图标,并绑定点击事件 (3)编写点击事件,实现功能 阅读全文
posted @ 2022-05-12 15:29 蘑菇萌萌哒 阅读(57) 评论(0) 推荐(0)
摘要: vue对象的声明周期函数在setup中不能使用,但有相应对应函数 这里先说一下setup出现前的vue对象的声明周期函数 vue对象的生命周期函数(vue2.0) vue对象创建成功之前之后 beforeCreate:vue对象创建成功之前 creater:vue对象创建成功之后 view与mode 阅读全文
posted @ 2022-05-12 13:35 蘑菇萌萌哒 阅读(518) 评论(0) 推荐(0)
摘要: 1:setup(作用) 作用:之前vue对象规定了我们必须把某一类数据放到某一个结构,这样在一定程度上对我们的代码进行了强制的分割。 在vue3中我们引入了setup()合成API语法,他可以将某数据关联的内容都整合到一个部分,即时setup0)中的内容越来越多,也会围绕着大而不乱的形式开发项目。 阅读全文
posted @ 2022-05-12 13:28 蘑菇萌萌哒 阅读(952) 评论(0) 推荐(1)
摘要: 第一种:父==>子 props传递数据;子==> 触发自定义事件的形式 第二种方法使用 app.vue代码 <template> <div> 我是主组件app.vue <h2>使用子组件Student</h2> <Student></Student> </div> </template> <scri 阅读全文
posted @ 2022-05-12 13:11 蘑菇萌萌哒 阅读(25) 评论(0) 推荐(0)
摘要: 组件之间的数据通信有如下几种 父子组件之间数据通信 第一种:父-->子 props传递数据;子-->父 触发自定义事件的形式 第二种:provide....inject结构 父组件provide抛出数据,子组件inject接收数据 非父子组件之间数据通信 第一种:事件总线Bus(空vue对象) 第二 阅读全文
posted @ 2022-05-12 12:59 蘑菇萌萌哒 阅读(80) 评论(0) 推荐(0)
摘要: 动态路由 定义:我们经常需要把某种模式匹配到的所有路由,全部映射到同个组件。 例如:我们有一个User组件,对于所有ID各不相同的用户,都要使用这个组件渲染 一个【路径参数】 使用冒号:标记; //动态路由的设置 {path:'/user/:id/:name/:age',component:user 阅读全文
posted @ 2022-05-12 12:57 蘑菇萌萌哒 阅读(129) 评论(0) 推荐(0)
摘要: 1.下载router,在router文件中引入相关依赖 npm init vite-app 项目名 cd 项目名 npm i npm i vue-router 2.创建路由信息对象数组并对外抛出 3.在main.js使用use(router)方法,将路由管理器对象与当前vue项目相关联 4.在项目中 阅读全文
posted @ 2022-05-12 12:49 蘑菇萌萌哒 阅读(120) 评论(0) 推荐(0)