条件渲染

• 在Vue中，提供了条件渲染，这类似于javascript中的条件语句
  • v-if
  • v-else
  • v-else-if
  • v-show

v-if

• v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回真值时才被渲染。
  <div v-if="flag">你能看见我吗？</div>

v-else

• v-else指令可以为v-if添加一个else区块
  <div v-else>那你还是看看我吧</div>

v-else-if

代码

<template>
<h3>条件渲染</h3>
<div v-if="flag">你能看见我吗？</div>
<div v-else>那你还是看看我吧</div>
<div v-if="type=='A'">A</div>
<div v-else-if="type=='B'">B</div>
<div v-else-if="type=='C'">C</div>
<div v-else>NOT A/B/C</div>
</template><script>
export default{data(){return {flag:true,type:"D"}}
}
</script>

效果展示

v-show

• 另一个可以用来按条件显示一个元素的指令是v-show,用法与v-if基本一样

v-show对比v-if

v-if

1. v-if是真实的按照条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建
2. v-if也是惰性的：如果在初次渲染时条件值为false，则不会做任何事，条件区块只有当条件首次变为true时才会被渲染

v-show

• 相比之下，v-show简单许多，元素无论初始条件如何，始终会被渲染，只有CSSdisplay属性会被切换。

总结

• 总的来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此如果需要频繁切换，则使用v-show较好；如果在运行时绑定条件很少改变，则v-if会更合适。

列表渲染

• 我们可以使用v-for指令基于一个数组来渲染一个列表，v-for指令的值需要使用item in items形式的特殊语法，其中items是源数据的数组，而item是迭代项的别名。

• v-for也支持使用可选的第二个参数表示当前项的位置索引。

• 也可以使用of作为分隔符来替代in，这更接近JavaScript的迭代器语法

  • 例如：<div v-for="item of items"></div>

复杂数据

• 大多数情况，我们渲染的数据源来源于网络请求，也就是JSON格式

通过key管理状态

key的来源

• 请不要使用index来作为key的值，我们要确保每一条数据的唯一索引不会发生变化。

事件处理

• 我们可以使用v-on指令（简写为@）来监听DOM事件，并在事件触发时执行对应的JavaScript。

• 用法：v-on:click="methodName"或@click="handler"

• 事件处理器的值可以是：

  1. 内联事件处理器：事件被触发时执行的内联JavaScript语句（与onclick类似）
  2. 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

内联事件处理器实例

<template><h3>内联事件处理器</h3><button @click="count++">Add</button><p>{{ count }}</p></template>
<script>export default {data(){return {count:0}}
}
</script>

方法事件处理器

<template>
<h3>方法事件处理器</h3>
<button @click="Addcount">Add</button>
<p>{{ count }}</p>
</template><script>
export default {data(){return {count:0}},
methods:{Addcount(){this.count = this.count+1}}
}
</script>

事件参数

• 事件参数可以获取event对象和通过事件传递数据

• Vue中的event对象就是原生JS中的event对象

传递参数过程中获取event

• 如果传递event之前已经有了参数，那么需要再event之前加上一个$符号
  例如：
  • <p @click="getName(item,$event)" v-for="(item,index) in names :key="index">{{item}}</p>

事件修饰符

• 在处理事件时调用event.preventDefault()或者event.stopPropagation()是很常见的，尽管我们可以直接在方法内调用，但如果方法能更专注与数据逻辑而不用去处理DOM事件的细节会更好。

• 为了解决这一问题，Vue为v-on提供了事件修饰符，常用的有以下几个：
  1. .stop
  2. .prevent
  3. .once
  4. .enter

数组变化侦测

变更方法

替换一个数组

合并两个数组实例

代码

效果

• 点击合并数组按钮后
  

计算属性

• 示例代码
  

计算属性缓存和方法（函数）的区别

• 计算属性：计算属性的值会基于其响应式依赖被缓存，一个计算属性仅会在其响应式依赖更新时才重新计算
• 方法：方法调用总是会在重渲染时再次执行函数。