在哪里使用新vue实例的主变量

Question

我显然在这里忽略了这一点，但是在哪里使用新vue实例的主变量？

我是vue.js的新手（显然），在阅读各种文档时，我无法注意到每个新的vue实例都以类似var app = new Vue({的内容开头，但在示例中我是＆＃ 39;我读过这个app变量并没有在js或html中再次被引用。代码工作正常，无需在任何地方引用它。

有人可以建议我使用app变量的地点或原因吗？

非常感谢

Answer 1

如果您不需要或想要，则完全不需要来捕获new Vue()的结果。

它完成的原因主要是测试（来自控制台的ala）或与外部库的交互。因为变量上可以使用Vue的所有方法和数据，所以可以调用这些方法并使用来自Vue外部的数据。

例如，假设我的页面上有一些逻辑完全在Vue之外，我想在Vue中使用一些数据。

const externalData = {message:"I'm some interesting data."}

const myVueApp = new Vue({
  el: "#app",
  data:{
      message: null
  }
})

myVueApp.message = externalData.message

这里的代码是从外面 Vue设置Vue的消息属性。

这在您拥有现有代码并将Vue集成到现有环境中时非常有用。

另一种情况只是简单的测试。打开控制台并运行下面的代码段。将上下文更改为代码段的javascript：

然后输入

app.message = "Hey, this is nifty!"

新消息将反映在Vue中。

console.clear()

const app = new Vue({
  el: "#testing",
  data:{
    message: "Change me from the console!"
  }
 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<div id="testing">
  {{message}}
</div>