阅读文章可以收获：
1. 明白什么是vue
2. 如何创建一个vue实例
3. vue中的插值表达式如何使用
4. 如何安装vue的开发者工具
-
Vue 概念
什么是vue？
Vue 是一个用于 构建用户界面 的 渐进式 框架
框架优点：大大提升开发效率 (70%↑)
缺点：需要理解记忆规则
官网文档地址：
vue2: https://v2.cn.vuejs.org/v2/guide/installation.html
vue3: https://vuejs.org/
Vue 的两种使用方式：
① Vue 核心包开发
- 场景：局部 模块改造
② Vue 核心包 & Vue 插件 工程化开发
- 场景：整站 开发
总结：
Vue是什么？
Vue 是一个用于 构建用户界面 的 渐进式 框架
1. 构建用户界面：基于 数据 动态 渲染 页面
2. 渐进式：循序渐进的学习
3. 框架：一套完整的项目解决方案，提升开发效率
-
创建实例
步骤：
1. 准备容器
2. 引包 (官网) - 开发版本 / 生产版本
在线引入：
本地引入：
3. 创建 Vue 实例 new Vue()
4. 指定配置项 → 渲染数据
- ① el 指定挂载点
- ② data 提供数据
总结：这是一整个使用vue的流程，其实使用vue就是类似与引入js一样的，vue就是前人帮我们封装好的前端的框架，使用vue就必须遵守它指定的规则。
完整案例：
-
插值表达式
插值表达式是一种 Vue 的模板语法
作用: 利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
语法：{{ 表达式 }}
注意点：
（1）使用的数据必须存在 （data）
（2）支持的是表达式，而非语句，比如：if for ...
（3）不能在标签属性中使用 {{ }} 插值
总结：
1. 插值表达式的作用是什么？
- 利用表达式进行插值，将数据渲染页面中
2. 语法格式？
- {{ 表达式 }}
3. 插值表达式的注意点：
- ① 使用的数据要存在 （data）
- ② 支持的是表达式，而非语句 if ... for
- ③ 不能在标签属性里面
-
响应式特性
响应式特性是vue的核心特性
-
什么是响应式特性呢？
数据改变，视图会自动更新
响应式数据和传统的数据有很明显的区别，比如我们修改一个数组（传统数据）的内容后，需要重新自己在渲染一遍数据，然后视图才会改变，但在vue中这个数组的数据是响应式的，如果数据中的内容改变，视图会自动渲染
聚焦于数据 → 数据驱动视图
使用 Vue 开发，关注业务的核心逻辑，根据业务修改数据即可
总结：
1. 什么是响应式呢？
- 数据改变，视图自动更新
- 使用 Vue 开发 → 专注于业务核心逻辑 即可
2. 如何访问或修改数据呢？
- data中的数据, 最终会被添加到实例上
- ① 访问数据： "实例.属性名"
- ② 修改数据： "实例.属性名" = "
-
开发者工具
为什么要装vue的开发中工具？
原因：为了更好的调试代码，查看页面数据
安装方式：
（1）通过谷歌应用商店安装 （国外网站）
（2）极简插件: 下载 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件
地址：https://chrome.zzzmh.cn/index
使用：打开 Vue 运行的页面，调试工具中 Vue 栏，即可查看修改数据，进行调试
