Vue.js存储非组件数据属性的位置？

Question

我正在使用Vue.js开发一个项目，我大部分时间都在使用组件，但有时我只想添加一些Vue.js语法而不需要完全创建组件。

因为我不像往常那样使用渲染，所以Vue附加的整个HTML内容都没有被覆盖，允许我在现有HTML上sprinkle一些Vue.js语法。

new Vue({
    el: '#vue',
    name: 'Vue root',
    data: {
      store
    },
    components: {
        Example
    }
});

向现有HTML添加一些Vue.js语法的示例是：保持2个输入彼此同步，例如：

index.html上的表单

<input type="text" attributes... v-model="store.arrival">

index.html

上的表单二

<input type="text" attributes... v-model="store.arrival">

在我介绍商店之前，我收到了一条消息，上面写着：

  

[Vue警告]：财产或方法＆＃34;到达＆＃34;未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。   （在根实例中找到）

这促使我引入了这个商店，因为我不希望通过概述这些floating in space(because they do not belong to a component)属性来扩展我的根组件的数据属性。

我喜欢将Vue语法添加到现有HTML中的能力，但这感觉就像是不好的做法。

是否有更好的方法来存储这些变量而不是存储（可以快速拥挤）？或者我应该将所有内容都移到组件中？这也会导致问题，因为如果我需要的话，我会被迫将PHP变量等内容转换为Javascript。

希望很清楚我的意思，感谢阅读，我需要更多信息让我知道。

干杯。

Answer 1

通过使用Vue的数据属性而不是组件，或者通过将Vue指令添加到Vue元素中存在的HTML，您觉得自己做错了。

这个没有错。 Vue文档的getting started页面执行此操作。这是开始将Vue与各种Web框架集成的便捷方式。我不认为有人认为这是一种不好的做法。如果有人这样做，那么，谁在乎？