指令
显示隐藏
v-if
作用：能够对一个元素进行显示隐藏
语法：
<p v-if:'布尔值/Vue布尔值变量'></p>
高级用法：
因为 v-if 的属性值是一个布尔值，所以可以传入一个关系表达式进行判断，来决定是否显示隐藏该元素
<p v-if:'关系表达式'></p>
实例：
<td v-if="!list.length" colspan="5" style="text-align: center">
暂无数据
</td>
v-show
作用： 同 v-if 能够对一个元素进行显示隐藏
语法：
<p v-show:'布尔值/Vue布尔值变量'></p>
v-if和v-show的区别
v-if 会将元素在 DOM 树上添加或者删除
v-show 会操作 display 属性进行显示(block)隐藏(none)
总结：如果需要频繁的切换显示和隐藏，建议使用 v-show 因为不需要频繁的添加删除，性能较好，但是如果需要加载的时候就显示或者隐藏，请使用 v-if ,因为可以减少误操作，提高容错
内容操作
v-text
作用：能够对标签内容进行修改
语法：
<p v-text="vue变量/文本"></p>
注意：v-text 无法识别标签，只能识别纯文本
v-html
作用：能够对标签内容进行修改，可以识别标签
语法：
<p v-html="vue变量/文本"></p>
注意：v-text 和 v-html 都会对标签内容进行覆盖，如果存在插值 {{}}，则会连插值一起覆盖掉，原因是插值优先渲染 ，后渲染的会覆盖先渲染的内容
循环渲染 v-for
作用：能够通过 v-for 指令循环创建数组内容，自动生成标签和标签内容，无需手动依次配置，简化书写流程
语法：
<ul>
<li v-for="(item,inedx) in vue数组变量" :key="index">
{{item}}
</li>
</ul>
item 是当前数组元素
index 是当前数组元素的下标
会造成页面内容刷新的操作
数组内容发生了变化
1.顺序发生了变化
2.元素发生了变化
相关数组方法有：
reverse()
sort()
splice()
unshift()
shift()
push()
pop()
不会造成页面内容刷新的操作
源数组未发生变化
相关数组方法有：
slice()
join()
concat()
forEach()
some()
filter()
find()
findIndex()
reduce()
map()
直接通过下标修改数组元素不会生效
由于 vue 的数据劫持原理是 Object.defineProperty ，而直接通过 arr[index] 的方法修改了数组，并没用通过 Object.defineProperty 来进行修改数组，所以虽然数组发生了修改，但是页面不会发生更新，所以这时候需要使用 vue 提供的 #set 去修改数组
this.#set(要修改的数组，要修改的索引，修改后的值)
key
v-for 渲染机制 - 虚拟 DOM
vue的渲染操作，为了节省性能，在渲染前，会在内存中开辟一个空间，存放着渲染信息的一个对象，这个对象有着和原生 js 类似的 DOM 树状结构，但存储的只是渲染相关的 DOM 信息，所以这个对象叫做虚拟 DOM
虚拟 DOM 的本质是一个对象
无key渲染
在页面内容发生更新的时候，会在内存中重新生成一个虚拟 DOM 对象与旧的虚拟 DOM 对象进行逐层匹配
例如 ul>li>span
先比对 ul 看 ul 内容是否产生更新，如果存在内容更新，则记录更新
然后比对 li，如果 li 产生更新则记录更新
最后比对 span 如果 span 产生更新则记录更新
所以比对完毕后，将记录下来的更新内容以补丁的形式添加合并到原生的 DOM 上
如果在中途发生了差异更新，那么会影响后面所有的节点，并在更新节点同级新增一个节点，后面所有的节点都会发生变化，依次向后挪动，所以如果有绑定给当前节点的内容，那么也会错开，这样就行了一个类似 bug的一样的现象，这种现象其实是 Vue 的一种机制，这种机制叫做
原地复用
原地复用
原地复用只会对存在有更新部分的进行增量更新，如果新旧虚拟 DOM 之间比对存在有未发生更新的部分则不会进行增量更新
原地复用能够进一步的减少 DOM 操作
有key渲染
有 key 进行 v-for 渲染的时候，会比对 key 相同的元素是否存在有内容的更新，如果存在有内容的更新则会记录更新，在比对完毕之后再次利用 原地复用 的机制进行增量更新
但如果 key 为 index 的值，那么在数组中间的某个位置插入一个新的元素的时候，原索引下的元素会被移到该索引的后面，那么也会造成绑定内容与元素错开的情况，所以为了避免这一情况，需要给 key 赋值唯一且不重复的 id
总结：key 的值有 id 就使用 id，如果没有id 就用 index
样式操作
类名操作
作用：
可以对标签元素进行动态操作
语法：
:class="{类名:布尔值/vue布尔变量}"
注意：
传入的是一个对象，也就是可以写成
:class="obj"
data() {
return {
obj:{
pink:ture
}
}
}
如果需要动态改变类名，还可以这样操作
:class="{ [pink]:isBool }"
data() {
return {
pink:'pink'
isBool:true,
}
}
动态样式操作
作用：
能够动态的对属性进行修改
语法：
:style={ css属性名：属性值 }
注意：
传入的是一个对象，也可写成
:style="obj"
data() {
return {
obj:{
color:'pink'
}
}
}
属性名也可以是 css 属性名
:style="{}"
当然，如果是一个对象，那么也可以动态的去声明css属性名
:style={[color]:'pink'}
data() {
return {
color:'color',
pink:'pink'
}
}
计算属性
计算属性的定义
Vue是一个渐进式的框架，能够对数据进行响应，所以页面上的一些需要其他依赖数据参与运算的结果也可以随着依赖数据的变化而变化，这时候一个能够随时响应其他依赖数据的一个属性变量诞生了
计算属性！
计算属性是随着其他依赖数据变化的一个Vue属性变量
计算属性的使用
语法：
<div> {{num}} </div>
export default {
computed:{
num() {
return this.a + this.b
}
}
}
注意：
一般情况下 计算属性是一个函数，并且需要有返回值
计算属性也是一个变量
计算属性在vue中是会被看作是一个变量，也可以在 computed 内部被调用
export dafault {
computed:{
num () {
return this.a + this.b
};
avg() {
return this.num / 2
}
}
}
计算属性的优势
通过 mehtods 中的方法也可以动态的得到运算结果，但是计算属性复用新更高
原因是：计算属性的结果会被添加缓存区
计算属性在计算结果之前会优先遍历缓存区内的数据，查看是否有计算过相同的运算，如果有则取出结果，否则进行相关计算
计算属性的完整写法
计算属性的完整写法
computed:{
"属性名":{
set(value) {
value 是重新赋值给计算属性的值
};
get() {
return '固有返回值'
}
}
}
完整写法下，可以重新修改计算属性的值，但是默认写法不可以，因为默认写法的本质是一个函数，无法给函数赋值，但是完整写法下的计算属性的本质是一个对象，可以通过 set 来对修改的值进行拦截操作
如果是获取计算属性的值，则调用的是 get 方法，如果是修改计算属性的值，调用的则是 set 方法
补充
every 方法
arr.every((item,index)=>{retrun item 关系表达式})
every 方法返回一个布尔值，如果遍历的每一个元素都满足关系表达式，则返回 true ，否则返回 false
toFixed 方法
toFixed 方法能够解决小数点位数的问题，能顾对小数点后几位做出限制
num.toFixed(2) 去小数点后 2 位
注意： toFixed 方法只对小数生效
reduce方法
arr.reduce(callback,initialValue)
callback(total,item,index,thisArr) {
total 是上一项的返回值
item 是当前项的数组元素
index 是当前项的索引
thisArr 是当前数组
return 操作表达式
}
initialValue 是初始值，如果需要求和，则需要将初始值设置为 0，否则就是 [object]
