Vue.js 是一個流行的前端框架，為開發人員提供了一種簡單而又高效的方式來構建交互式 Web 應用程序。但是，Vue 還提供了許多功能和實用程序，例如以 " $" 開頭的內置實例屬性、方法和指令，這些功能可以讓你更加便捷地創建應用程序。

$data

這個屬性返回 Vue 實例的響應式數據對象。在 Vue.js 中，數據對象的更改將觸發 DOM 的重新渲染。如果你希望在 Vue 組件外部訪問這些響應式數據或在其他地方利用組件實例，就可以使用 $data 屬性。

let myComponent = new Vue({
data: {
message: 'Hello World!'
}
});
console.log(myComponent.$data.message); // 輸出 "Hello World!"

$props

該屬性返回一個包含所有傳遞到組件中的屬性的對象。它只讀，因此你不能直接更改這些屬性的值。這是一個非常有用的工具，因為它允許你檢查從父組件傳遞給當前組件的所有屬性。

Vue.component('my-component', {
props: ['title', 'content'],
template: '<div><h2>{{ title }}</h2><p>{{ content }}</p></div>',
mounted() {
console.log(this.$props);
}
});
<my-component title="My Title" :content="'This is my content'"></my-component>
// 將輸出 { title: "My Title", content: "This is my content" }

$emit

這是一個很有用的方法，因為使用它可以在 Vue 組件之間通信。$emit 可以觸發一個事件，并且可以將一些數據傳遞給接收事件的組件。

Vue.component('my-component', {
template: '<button v-on:click="alertMe">Click Me!</button>',
methods: {
alertMe() {
this.$emit('alert', 'Hello World!');
}
}
});
<my-component v-on:alert="showAlert($event)"></my-component>
let app = new Vue({
methods: {
showAlert(msg) {
alert(msg);
}
}
});

在 Vue.js 中，使用以 " $" 開頭的屬性，方法和指令可以大大簡化應用程序的創建過程，并使其更加便捷和高效。這些工具可以幫助你在 Vue 組件之間通信，訪問響應式數據，以及檢查傳遞給組件的屬性等，因此如果你正在使用 Vue.js，那么確保使用這些工具以獲得最佳的編程體驗。