vue专栏笔记
亭_台楼阁
这个作者很懒,什么都没留下…
展开
-
vue25-插槽-复习
为了使父组件里面Child组件包含的内容显示出来,如上图所示,则需要加在子组件里面加上插槽,代码变化的只有Child.vue。vue在解析标签的时候,子组件的内容会替换父组件的内容,除非加一个占位符。子组件Nowplaying.vue。子组件Child.vue。Child.vue组件。原创 2024-07-07 23:46:29 · 141 阅读 · 0 评论 -
vue24-异步组件-复习
方法来实现此功能,就是需要的时候再加载,更大程度减少首次页面加载用时过多等问题。在大型项目中,可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件。原创 2024-07-07 11:22:43 · 87 阅读 · 0 评论 -
vue-23-动态组件-复习
这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时,会创建一个只带有初始状态的新实例。大白话就是 KeepAlive 啥都要保留,就是没有必要的东西都要保留,但是过去的一些事我想我忘记,那就在组件中声明一个name,我就根据需要进行保留。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式,或是包含这两种类型的一个数组。还是之前的案例,变的是在点击按钮的时候,有内容显示,并且有缓存。子组件跟之前的差不多,可以去翻之前的案例,这边就显示一个。缓存,就必须显式声明一个。原创 2024-06-05 11:22:45 · 386 阅读 · 0 评论 -
vue-22-订阅与发布-复习
还是之前的案例,这种做法我觉得代码变得更加简洁了。在原来的基础上,这边新建了store.js文件。子组件Tabbar.vue 页面的下部分。孙组件TabbarItem.vue。子组件Navbar.vue。父组件App.vue。原创 2024-06-04 00:02:06 · 134 阅读 · 0 评论 -
vue-21-跨级通信-$project与$inject用法-复习
这个思路是App.vue通过provide()方法对外提供了navtitle数据,然后子组件都可以通过provide接受到这个navtitle数据并且能够使用,但是存在一个问题就是子组件想要修改收到的这个数据,发现这个数据不能响应式修改,然后就想到了使用App.vue直接提供app这个对象,那不就可以解决这个问题啦,然后就有上面的页面。在vue2选项式中缺点就是app这个实例随意的跨级给任何孩子,任何孩子都可以随意去修改状态,数据变的不可控,增加耦合度。组件Tabbar.vue。根组件App.vue。原创 2024-06-01 23:31:23 · 309 阅读 · 0 评论 -
vue-20-$ref-复习
虽然这种通信写法比之前的简单,但是弊端就是会增加父与子之间的耦合度。如果绑定在组件上,拿到的就是 组件对象,可以实现通信功能。两者结合,倒是不错,可以去跟之前的案例进行对比。节点上,拿到的就是 原生。子组件Child.vue。子组件Field.vue。父组件App.vue。父组件App.vue。原创 2024-05-31 19:23:26 · 199 阅读 · 0 评论 -
vue-19-子传父-复习
发现vue.js官网写的真的yyds呀,可以去官网学习一下。子组件Layout.vue 跟之前的不变。在组件的模板表达式中,可以直接使用。再次改写一下前面一节的属性透传的案例。方法触发自定义事件 (例如:在。运行截图:运行结果跟上面的一章一样。子组件Navbar.vue。子组件Child.vue。父组件App.vue。原创 2024-05-30 23:41:24 · 117 阅读 · 0 评论 -
vue-18-属性透传案例-复习
Navbar与Layout是兄弟关系,那要实现的他们的通信可以利用属性/事件透传。父定义属性/事件 会透传给 子组件,子组件就接收父组件传过来的属性/事件,如a组件 接收 父组件自定义的属性/事件 然后通过父组件 再传递给b组件。我的理解是这样子,不对的话,请指出。子组件Layout.vue。子组件Navbar.vue。父组件App.vue。原创 2024-05-30 19:15:55 · 94 阅读 · 0 评论 -
vue-17-属性透传-复习
注意看:这一次子组件绑定的位置跟上面的不一样,这个绑定在button上,而不是直接绑定到根节点上。要是不想属性或事件透传到子组件的根节点上,则可以加下面的属性。事件、属性透传:父自定义的属性、事件都可以透传给子与孙。子组件加了inheritAttrs:false。未完待续...下一节复习一个属性透传案例。孙NavbarChild.vue。子组件Navbar.vue。父组件依旧如上图所示:不变。原创 2024-05-30 18:23:59 · 153 阅读 · 0 评论 -
vue-16-属性验证-复习
子组件Navbar.vue。更加细致的属性验证-传法。父组件App.vue。原创 2024-05-29 23:13:32 · 112 阅读 · 0 评论 -
vue-15-父传子-复习
因父组件的更新而变化,自然地将新的状态发送给子组件,并且不会逆向传递。这避免了子组件意外修改父组件的状态的情况,避免数据流变得混乱而难以理解。如果在子组件中改一下父组件传来的值:可以使用计算属性或者赋值给属性再进行改造。在子组件中直接去更改一 个 prop,后果就是报错;当每次父组件更新后,子组件中的 props。子组件:Navbar.vue。都会被更新到最新值,但是。父组件:App.vue。原创 2024-05-28 21:13:49 · 180 阅读 · 0 评论 -
vue-14-watch监听-复习
【代码】vue-14-watch监听-复习。原创 2024-05-28 12:59:23 · 185 阅读 · 0 评论 -
vue-13-购物车案例改造-计算属性-复习
计算属性可读可写,但是在大部分情况下作为只读。对比前面的写法,可以说是简洁很多。原创 2024-05-28 11:20:32 · 136 阅读 · 0 评论 -
vue-12- 事件修饰符+计算属性-复习
【代码】vue-12- 事件修饰符+计算属性-复习。原创 2024-05-26 20:09:30 · 103 阅读 · 0 评论 -
vue-11-购物车案例(2)-复习
【代码】vue-11-购物车案例(二)-复习。原创 2024-05-26 19:12:14 · 98 阅读 · 0 评论 -
vue-10-购物车案例(1)-复习
这部分实现的多选框的总金额计算。原创 2024-05-26 16:32:46 · 112 阅读 · 0 评论 -
vue-09-表单输入绑定-复习
【代码】vue-09-表单输入绑定-复习。原创 2024-05-26 15:18:41 · 102 阅读 · 0 评论 -
vue-08-事件处理-模态框案例-复习
其实还可以改一点,用self也不错。接07知识点的小案例。原创 2024-05-26 14:23:42 · 164 阅读 · 0 评论 -
vue-07-事件修饰符-复习
注意点:.prevent跟 .passvie 不可以同时使用,原因是passvie已经向浏览器发送阻止默认行为,如果同时使用会忽略prevent,则浏览器会发出警告。keycode是返回键的字符码。接06-vue的后小部分。原创 2024-05-26 13:27:23 · 177 阅读 · 0 评论 -
vue-06-事件处理-复习
【代码】vue-06-事件处理-复习。原创 2024-05-26 11:50:16 · 127 阅读 · 0 评论 -
vue-05-模糊搜索案例-复习
对于第二种产生的问题,还可以用一种函数表达式的写法,可以说更妙。原创 2024-05-26 10:51:27 · 102 阅读 · 0 评论 -
vue-04-style动态样式写法-复习
跟03-class样式差不了多少。原创 2024-05-25 15:26:30 · 167 阅读 · 0 评论 -
vue-03-class方法-复习
补一个v-html: 双大括号解析不了标签,如果要解析就使用v-html,原因大括号直接解析标签可能是存在安全隐患。原创 2024-05-24 21:41:14 · 212 阅读 · 0 评论 -
vue-02-变色案例-复习
其实跟01案例一样,都是一样的原理,原创 2024-05-24 21:02:10 · 169 阅读 · 0 评论 -
vue-01-TodoList案例复习
点击add添加,点击del则删除。原创 2024-05-24 20:56:07 · 106 阅读 · 1 评论