{% note primary %}
好的代码风格能够使开发以及维护更加的轻松
{% endnote %}
#说明
本文是依据官网(opens new window)里的教程来写的，目的是为了加深记忆，并且以后开发的时候对于不理解的进行阐述。以下注释掉的为不可取风格。
#等级 A——必要的
#组件名需要多个单词，例如
export default {
// name: 'todo'
name: "todo-item"
};
1
2
3
4
2
3
4
#data 需要返回对象(除了new vue({})中)
/*
data: {
foo: 'bar'
}
*/
data() {
return {
foo: 'bar'
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
#props 尽可能详细
/*
props: ['status']
*/
props: {
status: {
type: String,
required: true,
validator(value) {
return [
'syncing',
'synced',
'version-conflict',
'error',
].indexOf(value) !== -1
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#v-for 需要配合 key
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
1
2
3
2
3
#避免 v-if 和 v-for 用在一起
#为组件样式设置作用域
<style scoped>
</style>
<style module>
</style>
1
2
3
4
5
6
7
2
3
4
5
6
7
#私有属性名
#等级 B——强烈推荐
#把每个文件拆分成组件
#文件的命名，要么是大写开头，要么是横线连接
MyComponent.vue
my-component.vue
1
2
2
#组件基础名（展示类、无逻辑或无状态的组件），以特定前缀开头
BaseButton.vue
BaseTable.vue
BaseIcon.vue
1
2
3
2
3
#单例组件名——没有 props，只用于一个页面
#和父组件紧密耦合的子组件应该以父组件名作为前缀命名
TodoList.vue
TodoListItem.vue
1
2
2
#自闭合组件
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<!-- <MyComponent> </MyComponent> -->
<MyComponent>
<!-- 在 DOM 模板中 -->
<!-- <my-component /> -->
<my-component></my-component>
</MyComponent>
1
2
3
4
5
6
7
2
3
4
5
6
7
#JS/JSX 中的组件名大小写(暂时不用)
#完整单词的组件名
#prop 名大小写，html 用-连接符，js 里用驼峰式
/*
props: {
'greeting-text': String
}
*/
props: {
greetingText: String;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<!-- <WelcomeMessage greetingText="hi" /> -->
<WelcomeMessage greeting-text="hi" />
1
2
2
#多个特性的元素——多行书写
<img src="#" alt="image" />
1
#模板中表达式
尽可能简单，若复杂则在 js 里面书写
#简单的计算属性
把复杂属性分割成尽可能多的更简单的属性
#指令缩写
:替代v-bind和@替代v-on
#等级 C——推荐
#单文件的顶级元素的 shunxu
<template> </template>
<script></script>
<style></style>
1
2
3
2
3
#等级 D——谨慎使用
#元素选择器尽量避免使用
<template>
<-- <button>确定</button> -->
<button class="btn">
确定
</button>
</template>
<style scoped>
/*
button {
font-size: 20px;
}
*/
.btn {
font-size: 20px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#参考来源
#结语
😄