Vue精简版风格概述

【多个特性的元素应该分多行撰写，每个特性一行】（强烈推荐）

//bad
<img src="https://www.easck.com/d/file/200616/20200616054036811.jpg">
//good
<img
 src="https://www.easck.com/d/file/200616/20200616054036811.jpg"
>

【元素特性默认顺序】（推荐）

1、定义 (提供组件的选项)

is

2、列表渲染 (创建多个变化的相同元素)

v-for

3、条件渲染 (元素是否渲染/显示)

v-if
v-else-if
v-else
v-show
v-cloak

4、渲染方式 (改变元素的渲染方式)

v-pre
v-once

5、全局感知 (需要超越组件的知识)

id

6、唯一的特性 (需要唯一值的特性)

ref
key
slot

7、双向绑定 (把绑定和事件结合起来)

v-model

8、其它特性 (所有普通的绑定或未绑定的特性)

9、事件 (组件事件监听器)

v-on

10、内容 (复写元素的内容)

v-html
v-text

属性

【私有属性名】（必要）

在插件、混入等扩展中始终为自定义的私有属性使用 $_ 前缀，并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_)

//bad
 methods: {update: function () { }}
//bad
 methods: {_update: function () { } }
//bad
 methods: {$update: function () { }}
//bad
 methods: {$_update: function () { }}
//good
 methods: { $_myGreatMixin_update: function () { }}

【组件的data必须是一个函数】（必要）

当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数

//bad
Vue.component('some-comp', {
 data: {
  foo: 'bar'
 }
})
//good
Vue.component('some-comp', {
 data: function () {
  return {
   foo: 'bar'
  }
 }
})

【组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法】（强烈推荐）

//bad
{{
 fullName.split(' ').map(function (word) {
  return word[0].toUpperCase() + word.slice(1)
 }).join(' ')
}}
//good
computed: {
 normalizedFullName: function () {
  return this.fullName.split(' ').map(function (word) {
   return word[0].toUpperCase() + word.slice(1)								 
 4/5   首页 上一页 2 3 4 5 下一页 尾页