模板语法
vue.js 模板语法用于展示数据的一种语法，通过一些特殊的“ 魔法符合 ” 将 vue 实例中数据绑定到 HTML模板中，从而实现数据动态刷新效果。
Vue模板语法有以下三种：
- 插值语法：用双括号将Vue实例中的数据属性绑定到HTML模板中，例如{{ message }}，其中message为实例中的一个数据属性。
- 指令语法：用v-前缀的特殊HTML属性，将Vue实例中的数据属性或表达式绑定到HTML模板中，例如v-if、v-for、v-bind、v-on。
- 缩写语法：Vue提供了许多简化语法的缩写，例如:href代替v-bind:href，@click代替v-on:click等等。
插值语法
文本
数据绑定通过 {{ }} 双大括号的形式插值，当 vue 实例中的数据变化时，会更新插值处的内容。
<span>Message: {{ msg }}</span>
|
原始HTML
双大括号 {{}} 仅限于数据解析为普通文本，如需插入 HTML 模板内容，需要使用 v-html 内置指令
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
|
JavaScript 表达式
Vue.js表达式支持JavaScript中的大部分表达式，例如算术运算、三元运算、函数调用等等。
以下是一些Vue.js表达式的应用案例：
- 算术运算：你可以在Vue.js模板中使用算术运算符实现简单的数值计算，如加、减、乘、除、取模等操作。例如：
<span> {{ num1 + num2 }} </span>
- 三元运算：三元运算可以根据条件返回不同的值，你可以在Vue.js模板中使用三元运算符实现类似的逻辑判断。例如：
<div>{{ isTrue ? '真' : '假' }}</div>
- 函数调用：你可以在Vue.js模板中直接调用Vue实例中的方法，传递参数并获取结果。例如：
<div>{{ getFullName(firstName, lastName) }}</div>
需要注意的是，在Vue.js表达式中，不能使用流程控制语句，如if、for、while等，也不能使用赋值语句，如+=、-=等，否则会导致编译错误。同时，Vue.js表达式的性能也有一定的限制，在模板中过多使用复杂的表达式可能会导致性能下降，因此需要谨慎处理。
内置指令
什么是指令 ？
Vue指令，是一个前缀为 "v-" 的魔法符合，轻松实现一些在html中难以实现的效果，本质是在vue实例中执行某个表达式
咱们来看看 vue 中由那些内置的魔法指令
v-model
v-model是Vue.js中一种双向数据绑定的语法糖，可以将表单元素与Vue实例中的数据进行绑定，实现数据的实时更新，比如input、textarea、select等表单元素。在Vue.js中，v-model可以与各种表单元素结合使用，以达到实时更新数据和表单元素的效果。
例如：
<input type="text" v-model="inputVal">
以实现实时更新input框中的数据和Vue实例中的inputVal值。
v-bind：
v-bind用于将Vue实例中的数据同步到HTML标签的属性上，实现数据与元素的单向绑定，可以给任意html属性绑定值，并且可以使用Vue.js表达式实现动态绑定。例如：
<img v-bind:src="imgUrl">
以实现将Vue实例属性中的imgUrl值动态更新到<img>标签的src属性上。
v-on：
v-on用于绑定html元素的各种事件，如点击、鼠标移入、键盘按下等，可以使用Vue实例中的方法绑定到相应的事件上，实现响应用户交互的效果。例如：
<button v-on:click="doSomething">点击我</button>
以实现在按钮被点击时触发Vue实例中的doSomething方法。
v-for：
v-for用于渲染列表，在Vue.js中可以使用v-for对Vue实例中的数组或对象进行遍历。使用v-for时需要为每一项设置一个唯一的key值，以便Vue.js高效地更新列表渲染。例如：
<ul> <li v-for="(item, index) in itemList" :key="index">{{item}}</li> </ul>
v-if：
v-if用于根据Vue实例中的条件动态渲染HTML标签，只有当Vue实例中的条件满足时，才会渲染该标签。例如：
<div v-if="isShow">如果isShow为true，我就显示</div>
v-show：
v-show与v-if类似，用于控制HTML标签的显示和隐藏，但它在DOM中只是将元素的display CSS属性设置为none，而不是从DOM树中删除它，效率相对较高。例如：
<div v-show="isShow">如果isShow为true，我就显示，如果为false，我就隐藏</div>
v-html：
v-html用于将Vue实例中的HTML字符串插入到HTML标签中，实现动态生成html元素的效果。例如：
<div v-html="htmlContent"></div>
v-text：
v-text用于将Vue实例中的值插入到HTML标签中，实现动态生成文本的效果。v-text和{{}}等价，但他们的编译机制不同，下面是实现其对textarea的赋值：
<textarea v-text="message"></textarea>
