组件名为多个单词,并且用连接线(-)连接,避免与 HTML 标签冲突,并且结构更加清晰。
示例:
// bad
export default {
name: 'item'
}
// good
export default {
name: 'page-article-item'
}
单文件组件应该总是让<script>
、<template>
和 <style>
标签的顺序保持一致。且 <style>
要放在最后,因为另外两个标签至少要有一个。
<!-- ComponentA.vue -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>
在本组件中需要引入其他vue组件那么
例如:
import part1 from './part/part1.vue';
import part2 from './part/part2.vue';
import part3 from './part/part3.vue';
export default {
name:"app",
components:{part1,part2,part3},
data(){
return {
}
}
}
//bad //报错
props: {
user-name: {
type:String,
default:'张三'
}
}
//good
props: {
userName: {
type:String,
default:'张三'
}
}
//bad
props:['userName','userSex']
//good
props: {
userName: {
type:String,
default:'张三'
},
userSex:{
type:Boolean
}
}
//在.vue文件中,必须是一个函数,并且必须返回一个对象
export default {
data () {
return {
foo: 'bar'
}
}
}
// 在一个 Vue 的根实例上直接使用对象是可以的,
// 因为只存在一个这样的实例。
new Vue({
data: {
foo: 'bar'
}
})
//bad
var name='张三'
export default {
name: "project-module-one-part1",
props:{
num:{
type:Number
}
},
data(){
return{
name
}
}
}
//good
export default {
name: "project-module-one-part1",
props:{
num:{
type:Number
}
},
data(){
//数据处理都在data中
let name='张三'
return{
name
}
}
}
created方法中,el并没有被初始化完成,而data已经被创建,这里可以进行一些数据处理
v-for
必须设置key
, 在组件上_总是_必须用 key
配合v-for
,以便维护内部组件及其子树的状态,甚至在元素上维护可预测的行为. //bad
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
//good
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>
<li>
)上使用,因为 v-for 的优先级比 v-if 更高,为了避免无效计算和渲染,应该尽量将 v-if 放到容器的父元素之上。例如: // bad
<ul>
<li v-for="item in list" :key="item.id" v-if="showList">
{{ item.title }}
</li>
</ul>
// good
<ul v-if="showList">
<li v-for="item in list" :key="item.id">
{{ item.title }}
</li>
</ul>
// bad
<div v-if="hasData">
<span>{{ mazeyData }}</span>
</div>
<div v-else>
<span>无数据</span>
</div>
// good
<div v-if="hasData" key="mazey-data">
<span>{{ mazeyData }}</span>
</div>
<div v-else key="mazey-none">
<span>无数据</span>
</div>
//bad
<span>
{{
fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}}
</span>
//good
<!-- 在模板中 -->
<span>{{ normalizedFullName }}</span>
// 复杂表达式已经移入一个计算属性
computed: {
normalizedFullName: function () {
return this.fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}
created
(或beforeRouter
) 里面进行请求,如果涉及到需要页面加载完成之后的话就用 mounted
。export default {
data() {
return {
}
},
created(){
//在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素
//有 data 无el
this.getData()
},
mounted() {
//在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,(此时document.getelementById 即可生效了)。
this.getData()
},
methods: {
getData() {
// 请求数据
}
},
}
非空 HTML 特性值应该始终带引号 (单引号或双引号,选你 JS 里不用的那个)。
在 HTML 中不带空格的特性值是可以没有引号的,但这样做常常导致带空格的特征值被回避,导致其可读性变差。
//bad //报错
<button :style={width:sidebarWidth+'px'}></button>
//good
<button :style="{ width: sidebarWidth + 'px' }"></button>
使用指令缩写 (用 :
表示 v-bind:
和用 @
表示 v-on:
)
//bad
<input
v-bind:value="newTodoText"
:placeholder="newTodoInstructions"
>
//good
<input
@input="onInput"
@focus="onFocus"
>
代码注释在一个项目的后期维护中显的尤为重要,所以我们要为每一个被复用的组件编写组件使用说明,为组件中每一个方法编写方法说明。 以下情况,务必添加注释
组件使用说明,和调用说明
<!--公用组件:数据表格
/**
* 组件名称
* @module 组件存放位置
* @desc 组件描述
* @author 组件作者
* @date 2017年12月05日17:22:43
* @param {Object} [title] - 参数说明
* @param {String} [columns] - 参数说明
* @example 调用示例
* <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
*/
-->
scss 支持两种注释
/* 这是
* 多行注释
* 多行注释
* 会在编译好的css中保留输出. */
body { color: black; }
// 这是单行注释
// 单行注释不会在css中保留输出
a { color: blue; }