Vue是一款流行的JavaScript框架，它專注于MVVM（Model-View-ViewModel）模式的實現。它的核心庫只關注視圖層，便于與其他庫或現有項目集成。它還為單頁面應用程序提供了許多實用工具和插件，包括路由管理器、狀態管理器和測試工具。以下是關于Vue的幾個重要方面。

Vue的組件

Vue.component('my-component', {
template: '<div>Hello,World!</div>'
})
new Vue({
el: '#app'
})

在Vue中，組件是可重用的代碼塊，可以在同一頁面中使用不止一次。組件包括Template、Script、Style等代碼塊，其中Template是必需的。Vue通過擴展HTML進行開發，因此組件的模板代碼應該是HTML標記。可以使用Vue.component()方法在Vue實例中創建組件，其中my-component是自定義組件的名稱。

Vue的指令

Vue.directive('focus', {
inserted: function(el) {
el.focus()
}
})
new Vue({
el: '#app'
})

Vue指令是用于在DOM上添加特殊選項的語法糖。它們在模板中以v-前綴命名，例如v-for、v-bind、v-on等。指令可以傳遞參數以及動態參數和修飾符。指令中的inserted函數在綁定元素插入DOM時調用。在以上示例中，自定義指令名為“focus”，使用v-focus時可將焦點添加到該元素上。

Vue的路由管理器

const router = new VueRouter({
routes: [
{path: '/', component: Home},
{path: '/about', component: About},
{path: '/contact', component: Contact},
{path: '*', component: NotFound}
]
})
new Vue({
router,
el: '#app'
})

Vue的路由管理器可用于構建單頁面應用程序SPA。路由管理器是一個Vue插件，并使用VueRouter.createRouter()方法實例化。VueRouter包括路由和守衛，路由指定應該渲染的組件，而守衛控制導航和訪問權限。在以上示例中，使用添加路由對象數組的方式定義了四個路由（Home、About、Contact、NotFound），并使用*路徑作為默認路由。