一、引包
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
二、vue实例
指定配置项
1、el指定挂载点，选择器指定控制的是哪个盒子
2、data提供数据
三、插值表达式
利用表达式进行插值，渲染到页面中
语法：{{ 表达式 }}
实例
四、vue指令
v-前缀的属性
1、v-html
作用：设置元素的innerHTML
语法：v-html = “表达式”
2、v-show和v-if
v-show
作用：控制元素显示或隐藏
语法：v-show=“表达式”，表达式值true显示，false隐藏
场景：频繁切换显示隐藏场景
v-if
作用：控制元素显示或隐藏（条件渲染）
语法：v-if=“表达式” ，表达式值true显示，false隐藏
场景：不频繁切换的场景
3、v-else和v-else-if
4、v-on
作用：注册事件 = 添加监听 + 提供处理逻辑
语法：
1、v-on:事件名=“内联语句”
2、v-on:事件名=“methods中的函数名”
简写：@事件名
//fn中app.isShow可改为this.isShow
v-on调用传参
5、v-bind
作用：动态设置html的标签属性
语法：v-bind：属性名=“表达式”
简写： ：属性名=
6、v-for
作用：基于数据循环，多次渲染整个元素
遍历数组语法：v-for = “（ item，index ）in 数组”
item：每一项，item：下标
6、v-for中的key
语法: key属性 = “唯一标识”
作用：给列表项添加唯一标识。便于vue进行列表的正确排序复用
7、v-model
作用：给表单元素使用，双向数据绑定 可以快速设置获取或设置表单元素内容
8、指令修饰符
9、v-bind操作class
语法：class = “对象/数组”
10、v-bind操作style
语法：style = “{ css属性名1：css属性值}”
11、计算属性
12、watch侦听器
作用：监视数据变化，执行一些业务逻辑或异步操作
简单写法
完整写法
12、vue生命周期
四个阶段：创建、挂载、更新、销毁
生命周期：一个vue从创建到销毁的整个阶段
13、普通组件注册使用
使用：当成html标签使用<组件名></组件名>
局部
全局
