vue3
文章平均质量分 61
vue3基础知识及遇到的问题解决方案记录
发飙的狗头人
记录前端开发基础知识及遇到的问题
展开
-
vue3插槽用法(默认、具名、作用域插槽)
数据在子组件那边,由子组件维护,但具体生成结构是由父组件决定。原创 2024-05-15 01:28:17 · 174 阅读 · 0 评论 -
Vue3注册全局属性 (app.config.globalProperties)
app.config.globalProperties:一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。原创 2024-05-10 00:37:11 · 174 阅读 · 1 评论 -
将元素移动到页面顶部vue3示例(scrollIntoView方法)
当传入参数true时,相当于{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}当未传入参数时,默认值为:{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}tab.scrollIntoView();注:如果元素未能完全在视口内,则根据最短滚动距离原则,垂直方向滚动父级容器,使元素完全在视口内。注:如果元素未能完全在视口内,则根据最短滚动距离原则,水平方向滚动父级容器,使元素完全在视口内。原创 2024-05-07 01:12:52 · 529 阅读 · 0 评论 -
vue3生命周期(父子执行顺序)及其他钩子函数
父组件beforeDestroy => 子组件beforeDestroy =>子组件destroyed => 父组件destroyed。父组件beforeUpdate => 子组件beforeUpdate =>子组件updated => 父组件updated。为了保证父组件的视图与子组件的数据同步,Vue 在子组件数据变化后先触发父组件的生命周期钩子函数,然后再更新子组件的视图。父组件beforeCreate => 父组件created => 父组件beforeMount =>原创 2024-04-26 00:52:41 · 2329 阅读 · 2 评论 -
vue3组件通信(记录所有遇到的通信方式,以后看到新的方式会追加)
父组件:用provide传输对应的数据,并提供一个key,后续的子组件在拿数据也是根据此key。孙组件:数据可以进行修改,而且所有的组件数据都是同步的。2、绑定多个数据同步。原创 2024-04-25 01:47:03 · 332 阅读 · 2 评论 -
vue3可视化大屏解决方案(transform)
注意:demo中用到页面全屏插件-screenfullscreenfull基本用法:isFullscreen : 是否是全屏状态isEnabled: 判断是否支持全屏toggle: 调用 screenfull.toggle() 可以双向切换全屏与非全屏。原创 2024-04-20 16:39:54 · 541 阅读 · 0 评论 -
vue3修饰符用法
这意味着如果一个父元素和子元素都有相同类型的事件监听器,并且点击了子元素,那么只会触发子元素的事件监听器,父元素的事件监听器将被忽略。用于限制事件只能在触发事件的元素本身上触发,而不是在子元素上触发。在上述的代码中,当按钮被点击时,submitForm函数会被调用,同时会阻止表单的默认提交行为。例如,我们有一个父元素和一个子元素,父元素绑定了一个点击事件,子元素是父元素的一个子元素。修饰符可以确保点击子元素时不会触发父元素的点击事件,只有当点击父元素本身时才会触发。在上面的例子中,当按钮被点击时,原创 2024-04-17 01:14:11 · 1410 阅读 · 0 评论 -
Vue3自定义指令用法
/ 在绑定元素的 attribute 前,或事件监听器应用前调用// 在元素被插入到 DOM 前调用// 在绑定元素的父组件及他自己的所有子节点都挂载完成后调用// 绑定元素的父组件更新前调用// 在绑定元素的父组件及他自己的所有子节点都更新后调用// 绑定元素的父组件卸载前调用// 绑定元素的父组件卸载后调用el:指令绑定到的元素。这可以用于直接操作 DOM。binding:一个对象,包含以下属性。value:传递给指令的值。例如在中,值是2。oldValue:之前的值,仅在和。原创 2024-04-17 00:09:29 · 323 阅读 · 0 评论