在哪裏使用一個新的vue實例的主變量

Question

我很明顯在這裏的某個地方缺少了點，但是在哪裏使用新vue實例的主變量？我很新vue.js（很明顯），雖然閱讀各種文檔，我不禁會注意到，每個新的vue實例都以var app = new Vue({之類的東西開頭，但後來在示例中，我讀到了這個app變量doesn' t再次在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>