组件基础​

组件基础 ​组件允许我们将UI拆分为独立和可重用的部分，并单独考虑每个部分。一个应用通常组织成嵌套组件的树

这与我们嵌套原生的HTML元素非常相似，但Vue实现了自己的组件模型，允许我们在每个组件中封装自定义内容和逻辑。Vue也与原生的Web组件很好地配合。如果您对Vue组件和原生Web组件之间的关系感兴趣，请在此了解更多。

定义组件 ​当使用构建步骤时，我们通常使用.vue扩展名定义每个Vue组件在专用文件中，称为单文件组件（SFC）

vue

vue

当不使用构建步骤时，Vue组件可以定义为一个包含Vue特定选项的普通JavaScript对象

jsexport default {

data() {

return {

count: 0

}

},

template: `

You clicked me {{ count }} times.

`

}jsimport { ref } from 'vue'

export default {

setup() {

const count = ref(0)

return { count }

},

template: `

You clicked me {{ count }} times.

`

// Can also target an in-DOM template:

// template: '#my-template-element'

}这里将模板内联为JavaScript字符串，Vue会即时编译它。您还可以使用ID选择器指向一个元素（通常是原生的