看着手册学习datav,在理解完指令、组件的概念;对文档上使用的出发点就是,导入包之后,直接复制标签,然后再export default载入数据即可,所以一直理解不了data这个加载是怎么个逻辑,最后的结论原来是在config的设置上。

错误的做法:

直接把代码复制,这样就会直接报错The "data" option should be a function
在这里插入图片描述
照着网上的调整了返回data函数的写法,还是不行。
在这里插入图片描述

虽然说默认输出的data,但是 图标标签指向的是config属性,所以数据得放在config里面。
在这里插入图片描述
那么在手册上面可以找到这么一个表,来去对照config需要设置什么。
在这里插入图片描述
也就是格式得这样设置
在这里插入图片描述
然后而这样还不够,会报另外一个错——渲染的属性没定义或者config属性就没有被定义
在这里插入图片描述
在这里插入图片描述
因此,最后的解决办法是,参考了b站的视频,在和这个config解构前面补充了data(){ return { xxxxx } },和 data: function() { return {}对比就是少了这个部分: function,作用就完全不一样了。

	export default {
		data() {
			return {
				config: {
					data: [{
							name: '周口',
							value: 55
						},
						{
							name: '南阳',
							value: 120
						},
						{
							name: '西峡',
							value: 78
						},
						{
							name: '驻马店',
							value: 66
						},
						{
							name: '新乡',
							value: 80
						}
					],
					radius: '90%',
					lineWidth: '20',
					showOriginValue : true,
				}
			};
		}
	}

总结,对这个东西的理解就是,首先该标签通过data(){}指向这个标签dv-active-ring-chart,然后再通过config传入图标的配置信息。

gpt了一下跳出这个datav这个东西的一个解释,data() 方法的作用如下:

提供了组件内部的数据存储和管理机制:通过在 data() 方法中返回的对象中定义数据,Vue 实例会自动将这些数据转换为响应式的,即当数据发生变化时,相关的视图会自动更新。
将组件的数据与视图进行绑定:定义在 data() 方法中的数据可以直接在模板中使用,通过双花括号插值语法({{ }})或者指令(如 v-bind、v-model)将数据绑定到视图上。
提供了对组件内部状态的访问和修改:在组件的其他方法中(如 methods、computed、watch 中),可以直接通过 this 访问 data() 方法返回的对象,以读取或修改组件内部的数据。

补充:export defaultvar app = new Vue两种方式实现实例的差别

export default 和 var app = new Vue 是两种不同的语法,用于在 Vue.js 中创建和导出 Vue 实例的方式。

var app = new Vue({…}):

这是 Vue.js 早期版本中常用的方式,用于创建一个 Vue 实例并将其存储在变量 app 中。
通过 new Vue({…}) 创建的 Vue 实例可以直接在代码中使用,例如通过 app.$mount(‘#app’) 将实例挂载到指定的 HTML 元素上。

export default:

这是 ES6 模块系统中的导出默认值的语法,用于将某个变量、函数、类或对象作为模块的默认导出。
使用 export default 导出的 Vue 实例,通常是在单文件组件 (Single File Components) 或者模块化开发中使用的。例如,在一个名为 App.vue 的单文件组件中,可以这样导出 Vue 实例:export default { … }。
使用 export default 导出的 Vue 实例,在其他文件中可以使用 import 语法导入并使用该实例。

主要区别:

var app = new Vue({…}) 是在 Vue.js 中常见的旧的创建 Vue 实例的方式,而 export default 则是 ES6 模块系统中用于导出默认值的语法。
前者用于直接在当前文件中创建 Vue 实例并存储在变量中,后者用于将 Vue 实例作为模块的默认导出,以便在其他文件中引用和使用。

所以 如果是通过UMD单文件的方式去操作,只能通过vue实例:

var app = new Vue({
		el: '#app',
		data() {
				return {
					config: {
						data: [{
										name: '周口',
										value: 55
									},
									{
										name: '南阳',
										value: 120
									},
									{
										name: '西峡',
										value: 78
									},
									{
										name: '驻马店',
										value: 66
									},
									{
										name: '新乡',
										value: 80
									}
								],
								radius: '90%',
								lineWidth: '20',
								showOriginValue : true,
					}
					}
				}
		
	  })
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐