![](https://img-blog.csdnimg.cn/20190918140129601.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue3
文章平均质量分 77
vue3
乖女子@@@
这个作者很懒,什么都没留下…
展开
-
Vue思考题_01v-for与v-if的优先级谁更高
2’ 此时还没有执行v-for指令,item相当于为undefiend,通过点语法访问undefined的属性值自然就会报错啦。官方文档上说不推荐将v-for与v-if在同一个标签上使用,因为两者优先级并不明显。,当v-for与v-if在同一个标签上时,会先循环然后再进行if判断造成性能浪费。,v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。在vue2与vue3中答案是。eslint会提示不建议将两个指令放在同一个标签上。在vue2中将2个指令放在同一个标签上。原创 2023-10-10 16:13:36 · 262 阅读 · 0 评论 -
Vue思考题_02简述vue的生命周期
1]最早可以获取data数据的是created钩子;[2]最早可以获取vue渲染之后的dom结构的是mounted钩子;//可以获取 console . log(document . querySelector('.find'));//获取不到 }如上代码:为什么可以获取body的dom元素?因为 在一个组件中需要渲染的dom元素是 template标签之间的dom元素;body并不属于其中;[3]生命周期勾子并不是一个一个执行的;原创 2022-09-17 11:11:00 · 310 阅读 · 0 评论 -
Vue思考题_04组件间传值的方式
需求:A组件,B组件,C组件,D组件;A组件是B组件的父组件,B组件是C组件的父组件,C组件是D组件的父组件,我们目前是想在A组件将值传递给D组件;A组件是B组件的父组件,B组件是C组件的父组件,C组件是D组件的父组件,我们目前是想在A组件将值传递给D组件;需求:存在A、B、C组件,A组件是B组件的父组件、B组件是C组件的父组件,想要在C组件去修改A组件的value属性值;当我们想要在子组件中修改父组件的数据/进行某些操作时,可以使用$emit触发父组件的方法,在父组件中修改该数据;原创 2022-09-15 10:38:20 · 1526 阅读 · 0 评论 -
vue笔记_插槽
定义:插槽是父子组件的另外一种交互形式,子组件在自己的组件中提供了一个占位符,父组件可以在这个展位中填充任何代码,在渲染过程中,父组件填充的代码会渲染到这个占位符的位置;原创 2022-09-18 16:27:56 · 165 阅读 · 0 评论 -
Vue笔记_挂载点(el+$mount)
在Vue中不再和HTML直接进行交互了,而是将其挂载到DOM元素上,当数据发生变化的时候 数据变化->操作DOM->更改数据,但是操作DOM->更改数据是通过Vue内部 虚拟DOM 完成的,表现是数据驱动视图改变!// [2]没有设置挂载点,vue不知道将数据渲染到哪个视图上,将插值语法按照普通文本显示。2)若是希望data中的数据能够对多个元素生效,可以将vue实例挂载到父元素上;// [1]此时由于挂载点选择多个HTML元素,则只会对第一个元素生效;原创 2022-09-17 15:55:15 · 1361 阅读 · 0 评论 -
Vue笔记_内置组件_keep-alive组件
一般情况下,组件进行切换的时候,默认会进行销毁,如果有需求,某个组件切换后不进行销毁,而是保存之前的状态,那么就可以利用keep-alive来实现;keep-alive 是 Vue 的内置组件,它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中;原创 2022-10-18 17:32:37 · 179 阅读 · 0 评论 -
Vue笔记_插件组件_lucky-canvas抽奖转盘
中使用,在此以vue2.x作为示例进行说明。两种抽奖界面,UI 精美,功能强大且专业可靠,只需要通过简单配置即可实现自由定制,快速完成产品需求。在进行渲染时,为了使页面能够等比放大/缩小,会进行配置将所有单位为px的值转换为rem单位。因此 若是想要转盘随着页面等比缩放 => 在给配置项设置数据时单位需要设置为。此时点击 “点击领取” 按钮转盘无任何反应,因为我们还没有设置事件进行抽奖。height: ‘300px’ // 默认300px。width: ‘300px’ // 默认300px。原创 2023-10-18 19:16:30 · 4209 阅读 · 1 评论 -
Vue笔记_方法_事件总线
上述案例中在callback 函数执行时,就会触发实例化对象vm的openBox方法,与此同时$on绑定的回调函数就会被执行,打印值为“开宝箱~,{name:‘超超’}”方法是Vue对象的一个实例方法,它主要用于在Vue实例中监听一个自定义事件,当一个自定义事件被触发时,可以执行一个回调函数来响应该事件。上面案例是监听实例化对象vm的openBox事件,并通过一个匿名函数作为回调函数,当test事件被触发时执行匿名函数(回调函数)。那么如何触发事件呢?原创 2023-06-16 16:53:32 · 217 阅读 · 0 评论 -
vue2笔记_配置项_mixin混入
Mixin称为混入。其实Mixin不是Vue专属的,可以说它是一种思想,在很多开发框架中都实现了Mixin(混入),我们这里主要讲解的是Vue中的Mixin.官网解释:混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项.个人理解:混入就是将组件的公共逻辑或者配置提取出来,哪个组件需要用到时,直接将提取的这部分混入到组件内部即可。原创 2022-11-17 16:35:57 · 1082 阅读 · 0 评论 -
Vue3笔记_01setup与常用的Composition API(组合式API)
传送门组件中所用到的:数据、方法,均要配置在setup中(不需要在data、methods中进行配置了)setup() {// [1]定义数据(原来在data中,现在在setup中配置) let 变量名 = 值 // [2]声明方法(原来在methods中声明,现在在setup中声明) 方法名 function() {//... } ... // 返回值 return ... }setup函数有两种返回值:若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用(重点关注!)原创 2022-11-27 17:33:28 · 644 阅读 · 0 评论 -
Vue3笔记_02(组合式API)toRef
但是呢有的数据使用比较频繁,比如 name(简单数据类型),soninfo(引用数据类型);后端返回的数据是一个嵌套式数据(info),这些数据都需要在页面上进行渲染、修改;->将其定义为一个响应式数据return出去;当 点击“点我修改info.name”按钮时 页面内容无变化(即使数据已经改变了);页面内容能正常渲染;如果想要简单数据类型赋值应该怎样才能获取一个响应式数据呢?类型的属性单独提供给外部使用时就使用toRef;导入中的例子使用toRef就可以实现了。当要将响应式对象中的某个值为。原创 2022-11-28 19:31:25 · 391 阅读 · 0 评论