在Vue開發中,使用component是非常常見的操作。在Vue中,一個組件可以使用一個<template>
模板標簽來定義,并且應該有一個name
屬性。而在使用組件時,我們通過使用<component>
標簽來引用這個組件。在下面的例子中,我們將會看到如何創建一個新的Vue組件。
Vue.component('new-component', {
template: 'Hello, New Component!'
})
在上面的代碼中,我們創建了一個名為new-component
的新Vue組件。我們為這個組件指定了一個模板,其中包含了一個簡單的<div>
標簽,其中顯示了"Hello, New Component!"這個文本。
接下來,我們可以在一個Vue實例中使用這個組件,就像下面這樣:
new Vue({
el: '#app',
template: ' '
})
在上面的代碼中,我們創建了一個新的Vue實例,并將它綁定到一個<div>
標簽的ID為app
。在模板內,我們使用了<new-component />
標簽來引用我們剛剛創建的組件。如果一切都設置正確,我們將會在頁面中看到"Hello, New Component!"這個文本了。
現在,你已經知道了如何創建一個新的Vue組件并在Vue應用內使用它。當然,這只是Vue應用中很小的一部分。要想使用更多的Vue功能,請查看Vue官方文檔。
上一篇這么用css做京東靜態
下一篇new vue 用法