【Vue】datav入门/datav怎么不能显示图像/复制粘贴data数据没反应/datav错误The “data“ option should be a function
看着手册学习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 default
和 var 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,
}
}
}
})
更多推荐
所有评论(0)