Leon：创建页面，内容为“==命名规范== * 1.组件名组件名为多个单词，使用驼峰命名法。 // 示例 export default { name: 'TpTender…”

2019-07-23T03:59:20Z

创建页面，内容为“==命名规范== * 1.组件名组件名为多个单词，使用驼峰命名法。 <syntaxhighlight lang="javascript"> // 示例 export default { name: 'TpTender…”

新页面

==命名规范==
* 1.组件名
组件名为多个单词，使用驼峰命名法。
<syntaxhighlight lang="javascript">
// 示例
export default {
name: 'TpTenderFileMakeMain'
}
</syntaxhighlight>
* 2.组件文件
文件的名字如果是多个单词，使用驼峰命名法。

// 正例
TpTenderFileMakeMain.vue

* 3.文件夹的名字如果是多个单词使用 - 连接如下：

[[文件:20190425.png|居中]]

==单文件组件的顶级元素顺序==
<syntaxhighlight lang="vue">
// 正例
<template>

</template>
<script>
/* JavaScript */
</script>
<style>
/* CSS */
</style>
</syntaxhighlight>
==vue 暴露方法顺序==
暴露出去的部分，要按顺序：
<syntaxhighlight lang="javascript">
export default {
name: 'index', 名称
components: {}, 组件
data() {return{}}, 数据
computed : {val() {return "123";}}, 计算属性
watch: {checkboxModel() {}}, 监听
methods: {}, 操作方法
beforeCreate(){}, 创建之前
created(){}, 创建完成
beforeMount(){}, 挂载之前
mounted(){}, 挂载完成
beforeUpdate(){}, 更新之前
updated(){}, 更新完成
beforeDestroy(){}, 销毁之前
destroyed(){} 销毁完成
}
</syntaxhighlight>
==v-for==
在执行 v-for 遍历的时候，总是应该带上 key 值使更新 DOM 时渲染效率更高。
// 正例
<syntaxhighlight lang="javascript">
<ul>
<li v-for="item in list" :key="item.id">
{{ item.title }}
</li>
</ul>
</syntaxhighlight>

==JavaScript==

* 1.var / let / const

建议不再使用 var，而使用 let / const，优先使用 const。任何一个变量的使用都要提前申明，除了 function 定义的函数可以随便放在任何位置。

* 2.引号

建议不再使用双引号，静态字符串使用单引号，动态字符串使用反引号衔接。
<syntaxhighlight lang="javascript">
// 正例
const foo = '后除'
const bar = `${foo}，前端工程师`
</syntaxhighlight>
* 3.函数

匿名函数统一使用箭头函数，多个参数/返回值时优先使用对象的结构赋值。
<syntaxhighlight lang="javascript">
// 正例
function getPersonInfo ({name, sex}) {
// ...
return {name, gender}
}
</syntaxhighlight>
函数名统一使用驼峰命名，以大写字母开头申明的都是构造函数，使用小写字母开头的都是普通函数，也不该使用 new 操作符去操作普通函数。

* 4.对象

建议使用扩展运算符拷贝对象而不是 Object.assign(target, ...sources)。
<syntaxhighlight lang="javascript">
// 正例
const foo = {a: 0, b: 1}
const bar = {...foo, c: 2}
</syntaxhighlight>

对象尽量静态化，添加新属性使用 Object.assign(target, ...sources)。

<syntaxhighlight lang="javascript">
// 正例
const foo = {a: 3}
Object.assign(foo, {b: 4})
</syntaxhighlight>

若有遍历对象的需求，优先使用 Map 结构

<syntaxhighlight lang="javascript">
// 正例
const myMap = new Map([])
for (let [key, value] of myMap.entries()) {
// ...
}
</syntaxhighlight>

* 5.eval

避免使用 eval，如要进行字符串转化为对象，最好使用浏览器的内置方法来解析 JSON 数据，以确保代码的安全性和数据的合法性。如果浏览器不支持 JSON.parse()，你可以使用 JSON.org 所提供的库。如果不得不使用 eval()，可以尝试用 new Function() 来代替，在 new Function() 中运行的代码会在一个局部函数作用域内执行，因此源码中定义的变量不会自动变成全局变量。

Vue前端开发规范 - 版本历史

Leon：创建页面，内容为“==命名规范== * 1.组件名 组件名为多个单词，使用驼峰命名法。 // 示例 export default { name: 'TpTender…”

Leon：创建页面，内容为“==命名规范== * 1.组件名组件名为多个单词，使用驼峰命名法。 // 示例 export default { name: 'TpTender…”