一、Vue概念
Vue是什么？
概念： Vue是一个用于构建用户界面的渐进式框架。
构建用户界面：基于数据渲染出用户看到的页面
graph LR
id1[(数据)] --> id2[(视图)]
渐进式：循序渐进
Vue两种使用方式：
vue核心包开发。 适用场景：局部模块改造
vue核心包 & vue 插件 进行工程化开发。 适用场景：整站开发
优缺点
优点：组件模块化开发，大大提升开发效率
缺点：与
React相比：需要记忆的语法糖和规则更多，自由度不高。但Vue相比React内置了一些性能优化处理。
创建实例，初始化渲染
- 准备容器：#app
- 引包
- 创建Vue实例 new Vue()
- 指定配置项 el data => 渲染数据
el：指定挂载点 data：提供数据
插值表达式 {{}}
是一种vue的模板语法，其原理是mustache模板语法。
作用：利用表达式进行插值，将数据渲染页面中。
表达式：是可以被求值的代码。即能被计算得出结果。
语法：{{ 表达式 }}
<p>{{ msg }}</p>
<p>{{ msg.toUpperCase() }}</p>
<p>{{ obj.name }}</p>
<p>{{ obj.age > 18 ? '成年人' : '未成年' }}</p>
⚠️注意点：
1、使用的数据要存在 `data``中
2、支持的是表达式，而非语句
if / for等关键词语句/语法。3、不能在标签属性中使用。
例如：
<p title="{{ msg }}">不能在标签属性中使用,该做法是错误语法</p>
Vue核心特性：响应式
数据变化，视图会自动更新
如何访问or修改？data中的数据,最终会被添加到实例上。
访问数据： 实例.属性名
修改数据： 实例.属性名 = 值
聚焦于数据→数据驱动视图
开发者调试工具 Vue Devtools
- 通过谷歌应用商店安装（国外网站）
- 下载安装包→扩展程序（开发者模式）→拖拽安装
打开Vue运行的页面，打开控制台，在调试工具中Vue栏，即可查看修改数据，进行调试。
