![](https://img-blog.csdnimg.cn/direct/2040e4aff12f40909dabe14ea1dacf9c.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue2
文章平均质量分 88
vue2 技巧 项目总结
JackChouMine
前端程序员
展开
-
vue 应用测试(一) --- 介绍
前端测试简介组件测试Jest 测试框架简介其他测试框架第一个测试避免误报如何组织测试代码组件挂载Vue2 组件挂载的方式Vue3 的挂载方式挂载选项如何调试测试用例参考小结软件测试:检查软件是否按照预期工作的过程。测试分类:手动测试:需要人工操作,比如点击按钮,输入文字等。自动测试:写代码测试其他代码,不需要人亲自手动测试每一个功能。端到端测试测试整个应用,从用户角度出发,浏览器自动测试整个应用是否按照预期工作。是自动执行的手动测试,加快手动测试的速度。优点:测试全面,测试结果可靠。原创 2024-06-12 10:20:08 · 1314 阅读 · 0 评论 -
一些 vue2 项目中遇到的问题
eslintrc.js 可以在任意目录,会从根目录开始查找,root 的值只能是true or false,用于指定在根目录找到后是否往下查找。babel.config.js 必须在项目根目录。.babelrc、.babelrc.js/json 才可以在任意目录。在一个目录里打开多个有 eslint 配置的项目,很可能出现这个问题。这个配置会让 babel 配置失效,不好。错误提示给出了解决方案,原创 2024-06-11 11:24:24 · 423 阅读 · 1 评论 -
vue2中如何动态渲染组件
方法局限了在组件内部,我们可以将这个方法抽离出来,挂载到 Vue 原型上,就可以在全局调用。了解了如何通过函数调用渲染组件,可以封装一个二次确认弹窗, 用户确认后再进行下一步操作。了解了动态渲染组件的原理,我们可以通过函数调用的方式,动态地渲染组件。返回的是一个 Vue 的子类,而不是一个 Vue 的实例。既然可动态渲染一个组件,把这个过程封装成一个函数,可通过。函数传递一个回调函数,当用户点击确定时,执行回调函数。下面的代码,当用户点击按钮时,会动态渲染一个。上,这样就实现了App.vue 的渲染。原创 2024-06-09 11:42:38 · 1145 阅读 · 1 评论 -
vue 如何更好的注册全局组件
改进:把需要全局注册的组件放在数组中导出,然后 forEach 注册。在 components 目录的 index.ts 编写注册函数。在 components 的 index.js。把组件导出到 main.js,然后。,一个个注册,缺点:效率不高。原创 2024-06-10 11:00:00 · 703 阅读 · 1 评论 -
vue2中如何使用函数式组件
vue 在 render 函数的第二个参数中提供了context,用于访问propsslotsprops: 组件 props 对象。data: 组件的数据对象,即 h 的第二个参数。listeners: 组件上监听的事件对象,在组件上监听 ` event-name ` ,listeners 对象就有 ` event-name ` 属性,值为函数,数据可通过该函数的参数抛到父组件。listeners 是 ` data.on ` 的别名。slots: 函数,返回了包含所有插槽的对象。原创 2024-06-08 19:46:19 · 1095 阅读 · 2 评论 -
vue2 中如何使用 render 改善组件
前面在 vue2中如何使用render函数 有提到,vue 官网给出的 render 函数的例子只能体现 render 函数的优雅的一方面,却不能看出其扩展性,今天就来封装一个体现其扩展性的组件。后台管理中常常有如下布局的数据展示需求:像表格又不是表格,像表单又不是表单,实际上样子像表格,呈现的数据是一个对象,和 form 的绑定的值一样,我将其称为表单式表格。样式深的列是标题,浅的列是标题对应的取值,数据往往是服务器返回的,标题往往是定宽的,取值可能各种各样,比如显示一张图片,值为 01,需要显示是与否,原创 2024-06-07 11:53:44 · 824 阅读 · 0 评论 -
vue2 中如何使用 render 函数编写组件
vue 提供了声明式编写 UI 的方式,即 vue 提供了对 DOM 进行描述的方式。有两种描述 DOM 的方式:模板和 render 函数。模板在编译阶段会被转成 render 函数,这一过程叫编译模板。模板可读性好,但是有时候模板并不灵活,大型的模板可读性也不好。render 函数可读性不高,但是灵活,使用 render 函数封装组件,使用得当,可提高组件的扩展性和易用性。jsx 可解决 render 函数读写性不高的问题。在 vue 的项目入口文件中,下面的代码新建一个 vue 应用的根组件,并默认命原创 2024-06-07 11:23:43 · 1300 阅读 · 0 评论 -
vue 路由(二)-- 进阶
这些设置,每个页面的效果都是一样的,要为不同的页面设置不同的效果,可用路由传递相应的参数来,让动态绑定到 transition 的 name 属性上。以上两种方式,params 参数的名字必须和组件中的 props 属性名字相同,如果想对 params 进行改造后传递到组件,就可将。设置成函数,在函数内获取路由中的 params 或者 query,或者其他属性值,对其进行处理后再传递给组件。和组件耦合在一起,不方便组件的复用,如果能将路由中的参数传递到组件的。,路由更新,而组件被复用时调用,可使用。原创 2024-06-07 11:07:38 · 897 阅读 · 0 评论 -
vue2 路由基础 -- 基础使用
(1)vue-router是Vue官方提供前端路由插件,借助它我们实现可以基于路由和组件的单页面应用。传统的页面应用采用的是后端路由,即通过超链接来实现页面切换和跳转的。而在vue-router单页面应用中,则是通过路径之间的切换(实际上就是组件的切换)。原创 2024-06-06 12:25:23 · 811 阅读 · 0 评论 -
vue2 组件封装
本文记录一下 Vue 组件封装的基本实践和一些组件的相关知识。主要涉及以下知识点:使用第三方计数库 countup.js 创建一个 组件对以上知识进行总结。在组件文件夹 下创建一个与组件名相同的文件,文件夹内必须有 , 并将组件导入到该文件中,这样方便我们引用组件。 文件夹内:使用组件时,只需这样引入:Vue 组件的三大核心属性(props、data 和样式)props 定义了组件 的数据,确定的组件的核心功能。封装组件时,props 推荐写成对象形式,方便对数据进行验证,提高了代码健壮性也原创 2024-06-06 12:16:56 · 1177 阅读 · 0 评论 -
vue2状态管理(三)-- 插件的使用
我们修改 state,然后刷新浏览器,状态又变化原来的了,因为 state 是存在内存中的,为了点击刷新,状态不回到原来的,就需要 Vuex 提供的插件功能,当然插件还能实现其他复杂的功能。Vuex 的 store 接受 plugins 选项,这个选项暴露出每次 mutation 的钩子。启用插件后,调用 commit 更新 state 后,会更新本地存储,即使实现浏览器,值也不会变。在学习 mutations 时,我们使用表单的值更新 state,我们这样写。使用插件本地 state 持久化。原创 2024-06-06 12:05:45 · 396 阅读 · 0 评论 -
vue2-状态管理(二)
提交mutation是改变你 state 的唯一方式;方法执行上:dispatch分发 action;commit提交 mutation。辅助方法的映射getters、state 映射为计算属性;actions、mutations 映射为法法。分离功能:state 保存数据;getters 是对 state 的操作;actions 要提交 mutation;mutations 改变 state。异步与同步:action 封装异步处理;原创 2024-06-06 12:00:39 · 714 阅读 · 0 评论 -
vue2-状态管理(一)
中,用户和组件交互时,通过组件内的方法分发(dispatch)一个动作(action,有点像事件),动作会提交(Commit)一个更改(Mutation,也类似事件),改变 State 中的数据,然后获取数据渲染到视图上。getters 是对 state 的加工,类似于组件中的 data 和计算属性的关系。子 →($meit)父组件,即子组件自定义一个事件,在父组件中监听该事件。state 对象的属性时 Vuex 管理的状态,类似单个组建的 data。// 子组件的事件监听函数中触发一个自定义事件。原创 2024-06-05 10:23:10 · 1076 阅读 · 0 评论