元素)。
正例:
错误:{{ error }}
{{ results }}
反例:
错误:{{ error }}
{{ results }}
2. scoped 中的元素选择器
元素选择器应该避免在 scoped 中出现。
在 scoped 样式中,类选择器比元素选择器更好,因为大量使用元素选择器是很慢的。
正例:
反例:
3. 隐性的父子组件通信
应该优先通过 prop 和事件进行父子组件之间的通信,而不是 this.$parent 或改变 prop。
正例:
Vue.component('TodoItem', {
props: {
todo: {
type: Object,
required: true
}
},
template: `
`
})
反例:
Vue.component('TodoItem', {
props: {
todo: {
type: Object,
required: true
}
},
methods: {
removeTodo () {
var vm = this
vm.$parent.todos = vm.$parent.todos.filter(function (todo) {
return todo.id !== vm.todo.id
})
}
},
template: `
{{ todo.text }}
`
})
4. 非 Flux 的全局状态管理
应该优先通过 Vuex 管理全局状态,而不是通过 this.$root 或一个全局事件总线。
正例:
// store/modules/todos.js
export default {
state: {
list: []
},
mutations: {
REMOVE_TODO (state, todoId) {
state.list = state.list.filter(todo => todo.id !== todoId)
}
},
actions: {
removeTodo ({ commit, state }, todo) {
commit('REMOVE_TODO', todo.id)
}
}
}
{{ todo.text }}
反例:
// main.js
new Vue({
data: {
todos: []
},
created: function () {
this.$on('remove-todo', this.removeTodo)
},
methods: {
removeTodo: function (todo) {
var todoIdToRemove = todo.id
this.todos = this.todos.filter(function (todo) {
return todo.id !== todoIdToRemove
})
}
}
})
附录
1. 推荐使用vs code进行前端编码,规定Tab大小为2个空格
vs code配置
{
"editor.tabSize": 2,
"workbench.startupEditor": "newUntitledFile",
"workbench.iconTheme": "vscode-icons",
// 以下为stylus配置
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
"vetur.format.defaultFormatter.html": "js-beautify-html",
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
"javascriptreact",
"html",
"vue"
],
"eslint.options": { "plugins": ["html"] },
"prettier.singleQuote": true,
"prettier.semi": false,
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
"vetur.format.js.InsertSpaceBeforeFunctionParenthesis": false,
"vetur.format.defaultFormatter.js": "prettier",
// "prettier.eslintIntegration": true
}
vs code 插件
Auto Close Tag
Path Intellisense
Prettier
Vetur
vscode-icons
总结
以上所述是小编给大家介绍的Vue前端开发规范整理,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持!