数据绑定整个页面的正确方法或vuejs方法是啥？
Posted
技术标签:
【中文标题】数据绑定整个页面的正确方法或vuejs方法是啥？【英文标题】：what is the right way or the vuejs way to data bind the entire page?数据绑定整个页面的正确方法或vuejs方法是什么？ 【发布时间】：2018-08-30 05:02:11 【问题描述】：来自 knockoutJs 背景。如果您不指定绑定到元素。您可以使用模型覆盖整个页面的元素。例如，如果发生单击事件，我可以使 div 可见。我正在学习 VueJs 和文档。我看到 vue 实例要求你用 el 指定一个元素。
像这样：
var app = new Vue(
el: '#app',
data:
message: 'Hello Vue!'
)如果我的按钮与 '#app' div 不在同一个 div 中怎么办。我如何在两个 vue 实例之间进行通信，或者我可以使用一个 vue 实例来覆盖多个元素。 vuejs的方式是什么？
【问题讨论】：
通常#app 将是body 的直接子元素并包装所有其他元素（例如script 标签除外）。
【参考方案1】：
绑定到<body> 中的第一个元素是很常见的。 Vue 不会让你绑定到body，因为还有各种各样的东西可以将它们的事件监听器放在上面。
如果您这样做，Vue 将管理您的整个页面，然后您就可以离开了。文档涵盖了页面上有多个 Vue 实例的情况，但我在文档之外没有遇到过这种情况，而且我想不出一个好的理由。更常见的是，您将不断地从根 Vue 实例中删除一些部分并将它们重构为“子”组件。这是您保持文件大小可管理和构建应用程序的方式。
这是很多人不必要地使事情复杂化的地方，过度使用props 将东西传递给组件。当您开始重构组件时，如果您将所有状态保存在 vue 之外的 store 中，然后让您的组件直接与您的 store 对话，您将有更轻松的时间。 （将 store 放在所有组件的data 元素中）。这种模式（MVVM）非常棒，因为状态的许多元素最终会在屏幕上具有多个表示形式，并且具有“单一事实来源”，标准化，商店中物品之间的关系最小，从根本上降低了复杂性和用于最常见目的的代码量。它使您可以独立于 DOM 来构建应用程序状态。
所以，要回答您的问题，Vue 实例（和 Vue 组件）不需要（也不应该）相互交谈。当他们确实需要（第三方组件和重复组件）时，您有props and events、refs and method calls（商店外的状态）和$parent and $root 属性（使用皱眉！）。您也可以创建an event bus。 This page 是一个非常好的选项总结。
你的商店应该是 Flux/Redux 吗？ Vuex 是 vue 的 Flux/redux 模式的官方实现。常见的笑话是：当你意识到你需要它时，为时已晚。如果你决定暂时离开 Vuex，不要只将状态放在 Vue 组件中。在窗口范围内使用普通的 javascript 对象。正确的方法比错误的方法更容易，当你过渡到 Vuex 时，你的工作会简单得多。您的下游引用可能没有问题。
祝你好运。尽情享受吧。
【讨论】：
【参考方案2】：您通常将主 Vue 实例放在正文中的第一个标签上，然后在其中构建您网站的其余部分。直接在该实例中的所有内容（不在嵌套组件中）都可以访问相同的data。
然后您可以在 html 中执行此操作：
<body>
<div id="#app">
<p v-if="showMessage">message</p>
<button v-on:click="showMessage = !showMessage"></button>
</div>
</body>
并将您的数据设置为如下所示：
var app = new Vue(
el: '#app',
data:
message: 'Hello Vue!',
showMessage: true
)
如果您想稍后在组件之间传递数据，您将不得不查找如何发出事件、使用道具，或者如果您使用 Vue-CLI 运行 Vue（我强烈推荐），则可能使用 Vuex。
如果你想访问主 Vue 实例之外的标签（例如头部标签），那么有一些工具可以做到这一点。例如，您可以尝试：https://github.com/ktquez/vue-head
我还没有测试过。
【讨论】：
以上是关于数据绑定整个页面的正确方法或vuejs方法是啥？的主要内容，如果未能解决你的问题，请参考以下文章
使用 vue js 使用 cdn 或使用 webpack 构建创建 MPA 的最有效方法是啥？