這次帶給大家vue組件寫法規範，vue組件寫法規範的注意事項有哪些，下面就是實戰案例，一起來看一下。
資料驅動程式和元件化是vue.js兩個最重要的特點。組件化是為了方便程式碼多用，提高開發效率。常見的vue組件寫法有四種，各有特色，適用於不同的場景。
結構：
// 组件的注册
Vue.component( 'componentName', {
template: // 组件的html结构,
data(){
return{
// 组件中的属性
}
},
method: {
// 组件中的方法
}
...... // 组件其他的属性和方法
})
// 组件的使用
new Vue({
el: '#app'
})在script標籤內透過Vue.component()定義一個全域元件，並透過new Vue()實例將元件套用到html檔案中id為app的標籤內。
特點：
<1>可以直接在html檔案中的script標籤內直接定義與使用；
<2>透過此方法定義的元件是全域元件，在任何Vue實例下都可以使用，適合項目比較簡單的場景；
#<3>每次定義元件時都要重新使用Vue.component()，且元件名稱不能相同；
實例：
#Welcome元件
結構：
// 构造组件对象
const componentName = {
template: // 组件的html结构,
data(){
return{
// 组件中的属性
}
},
method: {
// 组件中的方法
}
...... // 组件其他的属性和方法
}
// 组件的使用
new Vue({
el: '#app',
components: {
// 组件注册、调用
componentName
}
})特點：
<1>與全域方式定義的元件相似，都可以直接在html檔案中的script標籤中直接書寫元件與使用；<2>只有在註冊過的Vue實例中才能使用該元件；#實例：##Welcome元件
<template id="componnet">
// 组件的html结构
</template>
// 全局组件的注册与使用
Vue.component( 'componentName', {
template: '#component',
data(){
return{
// 组件中的属性
}
},
method: {
// 组件中的方法
}
...... // 组件其他的属性和方法
})
new Vue({
el: '#app'
})
// 局部组件的注册与使用
const componentName = {
template: '#component',
data(){
return{
// 组件中的属性
}
},
method: {
// 组件中的方法
}
...... // 组件其他的属性和方法
}
new Vue({
el: '#app',
components: {
// 组件注册、调用
componentName
}
})使用template標籤將元件中的html結構寫在body標籤內部，在script標籤內部依照全域元件和局部元件的方式註冊與使用。不同之處在於組件中template屬性是透過id引用。
特點：<1>js檔案中不包含html結構內容，實作結構與邏輯分離；
實例：Welcome元件
##4、單一檔案元件<template lang="html">
// 组件中的html结构
</template>
<script>
//组件的逻辑
export default {
// 组件的属性和方法
}
</script>
<style lang="css" scoped>
// 组件的样式
</style>特點：
<1>元件與元件之間互不影響，且重複使用性高，其html、css、js皆可重複使用；
<2>元件的結構、邏輯清晰；<3>適用於大型複雜項目，適合多人開發；實例：
Welcome元件
！ ！ ！要注意的是：template標籤內必須用一個標籤將所有的標籤包裹，否則會報錯正確的寫法：<template> <p> <p></p> ...... <p></p> </p> </template>
<template> <p></p> <p></p> ...... <p></p> </template>
vuex使用詳解
以上是vue元件寫法規範的詳細內容。更多資訊請關注PHP中文網其他相關文章！
