命令式编程和声明式编程
命令式编程关注的是 “how to do”；
声明式编程关注的是 “what to do”，由框架(机器)完成 “how”的过程；
模板语法
v-once用于指定元素或者组件只渲染一次。
<h2 v-once>
{
{message}}:{
{counter}}
<div>{
{tips}} : {
{counter}}</div>
</h2>
<button @click="addAction">+</button>
<button @click="reduceAction">-</button>
初始化时渲染一次，当数据发生变化时，元素或者组件以及其所有的子元素不会发生变化；
该指令可以用于性能优化；
·v-text用于更新元素的文本内容，效用不是很大。
<div v-text="tips"></div>
// 等价于
<div>{
{tips}}</div>
v-html用于解析内容本身是 html的文本
v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签。
<h2 v-pre>
{
{message}}:{
{counter}}
<div>{
{tips}} : {
{counter}}</div>
</h2>
<button @click="addAction">+</button>
<button @click="reduceAction">-</button>
v-cloak用于保持在元素上直到关联组件实例结束编译。
v-cloak有待进一步解释
v-bind用于将值插入到模板内容中，绑定一个或多个属性值，或者向另一个组件传递props值。
<a v-bind:href="'https://www.baidu'">百度一下</a>
<!-- 语法糖 -->
<a :href="'https://www.baidu'">百度一下</a>
v-bind有一个对应的语法糖，也就是简写方式。在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。
v-on用于绑定事件。
<button v-on:click="addAction">+</button>
<!-- 语法糖 -->
<button @click="reduceAction">-</button>
<!-- 鼠标移动事件 -->
<div @mousemove="mousemoveAction">鼠标移动</div>
<!-- 元素绑定多个事件 -->
<div v-on="{click: btnClickAction, mousemove: mousemoveAction}">元素绑定多个事件</div>
v-on有一个对应的语法糖，也就是简写方式。在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。
v-on支持修饰符，修饰符相当于对事件进行了一些特殊的处理：
.stop-调用event.stopPropagation()。
.prevent-调用event.preventDefault()。
.capture-添加事件侦听器时使用capture 模式。
.self-只当事件是从侦听器绑定的元素本身触发时才触发回调。p.{keyAlias}-仅当事件是从特定键触发时才触发回调。
.once-只触发一次回调。
.left-只当点击鼠标左键时触发。
.right-只当点击鼠标右键时触发。
.middle-只当点击鼠标中键时触发。
.passive-{ passive: true }模式添加侦听器
样式绑定
绑定class 和 绑定style
绑定class/style有三种方式：
1、普通的类名绑定
2、对象语法
3、数组语法
<!-- 1、普通的类名绑定 -->
<div :class="className">class绑定</div>
<!-- 2、对象绑定 -->
<div :class="{classNameA：true, classNameB：false}">class对象绑定</div>
<div :class="{classNameA：isActive}">class对象绑定</div>
<!-- 从prop或是computed中获取 -->
<div :class="classObj">class对象绑定</div>
<!-- 从methods中获取方法 -->
<div :class="getClassObj()">class对象绑定</div>
<!-- 1、直接绑定数组 -->
<div :class="[classNameA, classNameB]">class数组绑定</div>
<!-- 2、数组绑定,也可使用三元运算符-->
<div :class="[classNameA, isActive ? classNameB : '']">class数组绑定</div>
<!-- 3、数组绑定,也可使用对象语法-->
<div :class="[classNameA, {classNameB：isActiv}]">class数组绑定</div>
<!-- style对象绑定 -->
<div :style="styleObj">style对象绑定</div>
<div :style="{color: 'red', fontSize: size + 'px'}">style对象绑定</div>
<!-- style数组绑定 -->
<div :style="[styleObjA, styleObjB]">style数组绑定</div>
template元素
template元素可以当做不可见的包裹元素，并且在v-if上使用，但是最终template不会被渲染出来，有点类似于小程序中的block。
条件渲染
1、v-if
2、v-else-if
3、v-else
4、v-show
vue3.x中v-if vs v-show的区别
1、v-if支持template，v-show是不支持template。
2、v-if可以和v-else一起使用，v-show不可以和v-else一起使用，是一个单一语法。
3、v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有渲染的，只是通过CSS的display属性来进行。v-if为false不会在DOM上渲染。
4、元素需要在显示和隐藏之间频繁的切换，那么使用v-show；如果不会频繁的发生切换，那么使用v-if；
列表渲染
1、v-for
v-for支持的类型
1、一个参数： “value in object”;
2、二个参数： “(value, key) in object”;
3、三个参数： “(value, key, index) in object”;