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

Vue的組件

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

在Vue中，組件是可重用的代碼塊，可以在同一頁(yè)面中使用不止一次。組件包括Template、Script、Style等代碼塊，其中Template是必需的。Vue通過(guò)擴(kuò)展HTML進(jìn)行開(kāi)發(fā)，因此組件的模板代碼應(yīng)該是HTML標(biāo)記。可以使用Vue.component()方法在Vue實(shí)例中創(chuàng)建組件，其中my-component是自定義組件的名稱(chēng)。

Vue的指令

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

Vue指令是用于在DOM上添加特殊選項(xiàng)的語(yǔ)法糖。它們?cè)谀０逯幸詖-前綴命名，例如v-for、v-bind、v-on等。指令可以傳遞參數(shù)以及動(dòng)態(tài)參數(shù)和修飾符。指令中的inserted函數(shù)在綁定元素插入DOM時(shí)調(diào)用。在以上示例中，自定義指令名為“focus”，使用v-focus時(shí)可將焦點(diǎn)添加到該元素上。

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的路由管理器可用于構(gòu)建單頁(yè)面應(yīng)用程序SPA。路由管理器是一個(gè)Vue插件，并使用VueRouter.createRouter()方法實(shí)例化。VueRouter包括路由和守衛(wèi)，路由指定應(yīng)該渲染的組件，而守衛(wèi)控制導(dǎo)航和訪問(wèn)權(quán)限。在以上示例中，使用添加路由對(duì)象數(shù)組的方式定義了四個(gè)路由（Home、About、Contact、NotFound），并使用*路徑作為默認(rèn)路由。