v-for
- 作用：基于源数据多次渲染元素或模板块
<!-- 1 基础用法 -->
<div v-for="item in items">
{{ item.text }}
</div>
<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>
key属性
- 推荐：使用
v-for的时候提供key属性，能够提升列表渲染的性能 - 说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
- vue key
- vue key属性的说明
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
v-if 和 v-show
- 条件渲染
v-if：根据表达式的值的真假条件，销毁或重建元素v-show：根据表达式之真假值，切换元素的 display CSS 属性
<p v-show="isShow">这个元素展示出来了吗？？？</p>
<p v-if="isShow">这个元素，在HTML结构中吗？？？</p>
v-else与v-else-if指令
v-else和v-else-if指令用于指定其他的条件，需要配合v-if使用。
<p v-if="isShow">登录</p>
<p v-else>注册</p>
注意：
1. v-else必须紧跟在v-if或者v-else-if的后面
v-text指令
- 解释：更新元素的
textContent。如果要更新部分的textContent，需要使用{{ Mustache }}插值。
<h1 v-text="msg"></h1>
v-html指令
- 解释：更新DOM对象的 innerHTML,html标签会生效
<h1 v-html="msg"></h1>
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
提升性能：v-pre
- 说明：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<span v-pre>{{ this will not be compiled }}</span>
提升性能：v-once
- 说明：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<span v-once>This will never change: {{msg}}</span>
样式处理-class和style
- 使用方式：
v-bind:class="expression"or:class="expression" - 表达式的类型：字符串、数组、对象（重点）
- 语法：
<!-- 1 -->
<!-- 重点 -->
<div v-bind:class="{ active: true }"></div> ===>
<div class="active"></div>
<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>
<div class="active text-danger"></div>
<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>
<div class="active text-danger"></div>
--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是对象 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>
