- 博客(13)
- 收藏
- 关注
RSS订阅原创 vue3对比vue2的总结
但是必须先知道想要拦截和修改的key是什么，所以vue2对于新增的属性无能为力，比如无法监听属性的添加和删除、数组索引和长度的变更，vue2的解决方法是使用Vue.set(object,propertyName, value) 等方法向嵌套对象添加响应式。Proxy可以理解成，在对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。在 Vue3 中，全局和内部 API 都经过了重构，并考虑到了 tree-shaking 的支持。
2023-06-13 21:05:05
5058
1
原创 vue3 出现 Component inside ＜Transition＞ renders non-element root node that cannot be animated.
项目使用vite脚手架+vue3，在根组件main.vue当中使用了页面过渡动画。中的组件渲染无法设置动画的非元素根节点。加上根节点div就欧克了。运行项目控制台出现错误。
2023-05-26 20:16:48
242
原创 vue3+vite 使用mock.js
如果你发现生产环境下无法请求mock接口，原因很有可能是因为你是在onMounted或者onBeforeMount这两个生命周期中请求的。因为vite-plugin-mock插件中用来处理生产环境的函数createProdMockServer还未执行完成，所以无法拦截请求。创建一个js文件mockProdServer.js，位置和main.js同层，在src/mockProdServer.js。安装后，需要在vite.config.js文件中引入vite-plugin-mock插件。
2023-05-24 18:04:29
813
原创 vue3组件通信之provide与inject
provide方法用于提供数据，此方法执需要传递两个参数,分别提供数据的key与提供数据value。vue3提供两个方法provide与inject,可以实现隔辈组件传递参数。
2023-05-22 20:31:31
264
1
原创 vue3组件通信之ref与$parent
parent可以获取某一个组件的父组件实例VC,因此可以使用父组件内部的数据与方法。必须子组件内部拥有一个按钮点击时候获取父组件实例，当然父组件的数据与方法需要通过defineExpose方法对外暴露。提及到ref可能会想到它可以获取元素的DOM或者获取子组件实例的VC。既然可以在父组件内部通过ref获取子组件实例VC，那么子组件内部的方法与响应式数据父组件可以使用的。比如:在父组件挂载完毕获取组件实例。
2023-05-22 20:20:20
2091
2
原创 vue3组件通信之useAttrs
在Vue3中可以利用useAttrs方法获取组件的属性与事件(包含:原生DOM事件或者自定义事件),次函数功能类似于Vue2框架中$ attrs属性与$listeners方法。子组件my-button内部可以通过useAttrs方法获取组件属性与事件.因此你也发现了，它类似于props,可以接受父组件传递过来的属性与属性值。比如:在父组件内部使用一个子组件my-button。
2023-05-22 19:59:14
896
2
原创 vue3组件通信之v-model
在vue3中一个组件可以通过使用多个v-model,让父子组件多个数据同步,下方代码相当于给组件Child传递两个props分别是pageNo与pageSize，以及绑定两个自定义事件update:pageNo与update:pageSize实现父子数据同步。下方代码:相当于给组件Child传递一个props(modelValue)与绑定一个自定义事件update:modelValue。v-model指令可是收集表单数据(数据双向绑定)，除此之外它也可以实现父子组件数据同步。实现父子组件数据同步。
2023-05-22 19:41:25
453
2
原创 vue3组件通信之全局事件总线
但是在vue3中没有Vue构造函数，也就没有Vue.prototype.以及组合式API写法没有this，那么在Vue3想实现全局事件的总线功能就有点不现实啦，如果想在Vue3中使用全局事件总线功能。全局事件总线可以实现任意组件通信，在vue2中可以根据VM与VC关系推出全局事件总线。点击组件2中按钮发送数据，组件1中接收。创建bus.ts文件引入mitt插件。可以使用插件mitt实现。
2023-05-22 19:21:43
1494
3
原创 css简单制作键盘页面
简单制作键盘页面html css设置键盘css通过grid，grid-template-columns标签来实现。具体的的设定方法如下：控制网格间距和合并单元格。Html 如下：效果显示正常，fox，google。
2020-11-15 19:16:57
722
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人