请教一下大家,我在weex的工程里使用了vue2.0 + vue-router
然而调试的时候数据绑定不成功,控制台报错信息和代码如下
<template>
<text style="...">{{target}}</text>
</template>
<script>
export default new Vue({
name: 'home',
data () {
return {
target:'hello!',
}
},
})
</script>
vue.runtime.js:436 [Vue warn]: Property or method "target" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
当我将代码中的
export default new Vue({...}
改为
export default {...}
后,绑定正常,请问以下vue-router中,import出一个 new Vue()对象和{}对象的差异是什么,造成这种数据绑定不成功的原因是?
如果你在这边如果
export default new Vue
之后,在外部import
的时候,获取的是一整个Vue
实例,而在全局main.js
中,Vue初始化时,就变成了new Vue(new Vue{ ... })
,而Vue()
里面只是需要一个配置对象而已,而并非一个Vue对象。如果你
export default {}
,外面引入的就是个纯对象,那在全局Vue初始化时候,用的就是new Vue({ ... })
,这才是正确的操作。