技術標籤：vue

風格指南

必要的

1、元件名應該始終是多個單詞的（避免和現在以及未來的 HTML 元素衝突，因為所有的 HTML 元素都是單個單詞的）

Vue.component('todo-item',{……})
//單檔案元件
export default{
    name: 'TodoItem'
}

2、元件的 data 必須是一個函式，返回一個物件。（當 data 的值，是一個物件時，它會在這個元件所有例項之間共享。重用時，每個元件例項都引用了相同的資料物件，更改其中一個列表的資料就會引起其他例項的資料改變）

Vue.component('todo-item',{
    data:function(){
        return{
            list: []
        }
    }
})
//單檔案元件
export default{
    name: 'TodoItem',
    data(){
        return {
            list: []
        }
    }
}
 

prop元件引數校驗

3、prop 的定義應該儘量詳細，至少要指定資料型別。（詳細的定義在實際專案中，如果提供格式不正確的 prop，Vue將會警告，便於快速定義問題）

props: {
    list: Array
}
//更好的做法
props: {
    list: {
        type: Array,     //資料型別
        required: true,  //是否必填
        validator: function(value){  //自定義校驗器
            return [
                'syncing',
                'synced'
            ].indexOf(value) !== -1  //傳入的值必須是陣列內的元素
        }
    }
}
 

父元件向子元件傳遞引數，子元件有權做一些約束，便於維護。

<item-todo :cont="5"></item-todo>
Vue.component('item-todo', {
    props:{
        cont: [String,Object]  //規定接收的值資料型別為 字串或者物件
    }
)

報錯翻譯：無效 prop， prop “cont” 型別校驗失敗。期望得到 字串、物件型別，卻得到了值為5的 數值型別。

<item-todo></item-todo>
Vue.component('item-todo', {
    props:{
        cont: {
            type: Number,
            required: true,  //要求 cont 是必須要傳遞的引數
        }
    }
)
 

報錯翻譯：缺少必須的 prop：cont 資料。

<item-todo></item-todo>
Vue.component('item-todo', {
    props:{
        cont: {
            type: String,
            required: false,
            default: 'default value' //如果父元件沒有傳遞資料，cont會顯示預設引數裡的值，反之顯示傳遞過來的值
        }
    },
    template: '<div>{{cont}}</div>'
}

<item-todo cont="wenmeichao"></item-todo> //傳遞字串型別需要去掉 :
Vue.component('item-todo', {
   props:{
        cont: {
            type: [Number, String],
            validator: function(value){ //自定義校驗器，value 為接收的值
                return (value.length < 5)
            }
        }
    }
)

報錯翻譯：無效 prop，自定義校驗器 cont 校驗失敗

prop特性：1、屬性不會渲染到頁面程式碼 2、接收到的值可以直接在子元件內應用。

非prop特性（只傳遞但不prop接收）：1、會將屬性渲染到頁面程式碼 2、子元件使用該屬性會報錯

4、在元件上總是用 key 配合 v-for。（便於優化渲染可能的DOM變更降到最低）

5、避免 v-for 和 v-if 在一個標籤上同時使用。

6、為元件樣式設定作用域。（對於應用來說 只有頂級 App元件 和 佈局元件中的樣式可以是全域性的，其他元件都是應該有作用域的。

三種方式：scoped 、 css Modules、基於class的類似 BEM 策略

待完善……