對于許多前端開發人員來說，Vue.js 是一個熟悉的框架。Vue.js 提供了許多功能，其中一個關鍵功能是 Vue 實例（vm）。Vue 實例改變了前端連接 HTML 和 JavaScript 的方式。在這篇文章中，我們將探討如何拿到 Vue 實例。

要拿到 Vue 實例，我們需要了解什么是 Vue 實例。在 Vue.js 應用程序中，一個 Vue 實例是一個獨立的作用域，擁有它自己的數據、計算屬性、方法和生命周期鉤子。創建一個 Vue 實例的方式是通過 Vue 構造函數。

var vm = new Vue({
// 選項
})

在這個例子中，vm 是我們創建的新 Vue 實例。有幾個選項可以在創建時傳遞給 Vue 構造函數。我們將在后面的章節中詳細討論一些選項。

在頁面中拿到 Vue 實例需要使用 JavaScript。Vue 實例通常是通過 JavaScript 包含在 HTML 頁面中的。你可以在 Vue.js 中使用 HTML 模板語法，但是在很多場景中，我們需要通過 JavaScript 來拿到 Vue 實例。

我們可以通過使用 “el” 選項指定 Vue 實例的作用域。在這個例子中，我們將 Vue 實例綁定到 id="app" 的元素上:

var vm = new Vue({
el: '#app',
// 其他選項
})

現在，Vue 實例將綁定到具有 id="app" 的元素上。我們可以通過訪問 app 元素來獲取這個 Vue 實例。

不過，如果你想更直接地訪問 vm 實例，那么你需要使用 ref 屬性。Ref 是一個自定義的字符串，用于指定元素或子組件。我們可以通過 vm.$refs 對象獲得通過 ref 屬性添加到元素中的 DOM 對象或組件的實例。下面是一個示例：

<div id="app">
<p ref="message">Hello World!</p>
</div>
var vm = new Vue({
el: '#app',
// 其他選項
})
console.log(vm.$refs.message.innerText); // 輸出：Hello World!

在這個例子中，我們在 HTML 中添加了一個帶有 ref 屬性的 p 標簽。我們通過訪問 $refs 對象來獲得這個 p 的實例。可以看到我們使用 innerText 獲取了 p 標簽的 text。

Vue 提供了許多其他選項來訪問 vm 實例，例如：computed、watch 和 methods。這些選項允許我們在 JavaScript 中訪問 Vue 實例并操作它的數據和函數。如果你想使用 Vue.js 創建一個動態的單頁應用程序，那么你需要對這些選項做好準備。Vue 實例的選項是創建大規模應用程序的基礎，務必熟悉它們。