對於複雜的大型項目,將組件獨立成 .vue 爲擴展名的文件,是更好的做法,這樣使用項目更易於維護。
在藉助於webpack對於項目進行構建。
一個單文件組件至多可以由模板,樣式、JavaScript三部分構成:
//聲明模板
<template>
<h2>{{message}}</h2>
</template>
//聲明樣式
<style>
h2{
color:red;
}
</style>
//JavaScript
<script>
export default{
data(){
return {
message:'hello word'
}
}
}
</script>
demo.vue
<template>
<!--這裏寫組件的html結構-->
<h1>HElllo World</h1>
</template>
<style>
/*這裏寫組件 的css*/
h1{
color:red;
}
</style>
<script>
//在這裏寫組件的JavaScript
document.querySelector('h1').onclick=function()
alert('你好');
}
</script>