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
- 其它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
