模板语法
l Vue中的模板文件都是由模板<template>、业务逻辑<script>、css样式<style>三部分组成。
绑定
l 文本数据绑定
n 首先清空App.vue，获得一个纯净的环境。
n 在App.vue文件中的模板上可以绑定业务逻辑中的数据
n 绑定的数据可以是对象
n 可以给模板内容添加样式
l html数据绑定，指将值包含html内容的属性绑定到模板，使用{{}}不能实现，用v-html属性
模板：
l v-bind绑定属性，指将属性值绑定到标签的属性值上。
属性：
模板：
l v-bind绑定动态属性，指要绑定的参数和参数值都是动态获取的。语法v-bind:[attributeName]
属性：
模板：
执行逻辑
l Vue3的template模板中可以使用js表达式
{{num+2}} {{num*3}} # 运算符
{{ok ? ‘YES’ : ‘NO’}} # 条件运算符
{{message.split(‘‘).reverse().join(‘’)}} # 方法调用
<div v-bind:id="'list-' + id">案例</div>
选择结构
l v-if能根据表达式的值(true或false)来决定是否显示DOM元素。
l v-else可以给v-if添加一个else块
例：随机生成一个数字，判断是否大于0.5
<div v-if="Math.random() > 0.5"></div><div v-else></div>
l v-else-if是v-if的else-if块，可以链式使用多次
注：v-else、v-else-if必须跟在v-if或v-else-if之后。否则将不被识别
l v-if可以切换多个元素，可以包裹在<template>元素中并使用v-if。(template不可见)
l 可以使用v-show来根据条件展示元素，类似v-if
区别：v-if操作DOM，v-show通过css控制显示隐藏，如果要频繁切换推荐用v-show
循环结构
l v-for用于循环，语法：site in sites。还支持第二参数，是当前项的索引：(site, index) in sites
l v-for可以绑定数组来渲染一个项目列表。注：如果语法错误，则须指定:key
另：模板<template>中也可以使用v-for
另：数组中元素也可以是对象
n 数组的元素如果还包含数组时，需要循环嵌套遍历
l v-for循环对象，语法：(value,[key, index]) in object。3个变量分别保存属性值、属性名、索引。
l v-for也可以循环整数，语法：item in number 。例：item in 5
