vue风格规范以及需要注意的点

v-for和v-if 不能在一起使用

例子

<ul>
  <li
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

这个时候可以使用计算属性移步到：https://www.jianshu.com/p/2feb8cad6abf

或者：

<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

基础组件名

应用特定样式和约定的基础组件（也就是展示类，无逻辑，或无状态的组件）应该全部以一个特定的前缀开头，比如：Base 、App或者V

image.png
image.png

单例组件名

只应该拥有单个活跃实例的组件应该以The前缀命名，以示其唯一性

具体描述：不是只用于这一个单页面，而是每个页面只是用一次。这些组件永远不接受任何prop，因为他们是为你应用定制的，而不是他们在你应用中的上下文。如果你发现有必要添加prop，那就表明这是一个可复用的组件，只是目前在每个页面只使用一次。

image.png

紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件作为前缀命名

image.png
image.png

组件名中的单词顺序

组件名应该以高级别的（通常是一般化描述的）单词开头，以描述性的修饰词结尾

image.png

自闭合组件

image.png image.png

模板中的组件名大小写

image.png
image.png

JSX/JS中组件名大小写

image.png

完整单词的组件名 （推荐使用完整单词而不是缩写）

image.png

props名大小写

image.png

多个attribute的元素

image.png
image.png

模板中简单的表示式

如果简单可以，如果太复杂，建议使用计算属性和方法

image.png
image.png

计算属性

把复杂的计算属性，拆分成更简单的计算属性；优点：

• 易于测试

• 易于阅读

  
  image.png
  image.png

指令缩写

:表示 v-bind @表示 v-on # 表示v-slot

组件/实例的顺序

1.副作用

• el

2.全局感知

• name
• parent
  3.组件类型
• functional
  4.模板修改器
• delimiters
• comments

5.模板依赖

• components
• directives
• filters
  6.组合
• extends
  -mixins
  7.接口
• inheritAttrs
• model
• props/propsData

8.本地状态

• data
• computed

9.事件

-watch
生命周期

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• activated
• deactivated
• beforeDestory
• destroyed

10.非响应式的property

• methods

11.渲染

• template/render
• renderError

元素attribute的顺序

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.唯一的attribute
• ref
• key
  7.双向绑定
• v-model

8. 其它attribute （普通的绑定和未绑定的attribute）
   9.事件

• v-on
  10.内容
• v-html
• v-text

组件/实例选项中添加空行，为了代码看起来更方便

image.png

可以在相同元素中v-if、v-else中使用key

image.png

props定义

image.png
image.png

设置私有的property名

使用模块作用域保持不允许外部访问函数的私有性。

image.png