一、Vue是什么
vue——一个用于构建用户界面的渐进式框架
构建用户界面——基于数据动态渲染页面
渐进式——循序渐进的学习
框架——一套完整的项目解决方案，提升开发效率（理解记忆规则）
二、创建一个vue实例
1.准备容器
2.引包（官网）——开发版本/生产版本
3.创建Vue实例——new Vue()
4.指定配置项——渲染数据
a、el指定挂载点(选择器指定的是哪一个盒子)
b、data提供数据
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue Example</title><!-- 引入 Vue.js 库 --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><!-- 定义 id 为 app 的 DOM 元素 --><div id="app"><!-- 使用插值表达式显示 msg 数据 -->{{ msg }}</div><script>const app = new Vue({el: "#app",data: {msg: 'hello,SGB'}});</script>
</body></html>三、插值表达式
差值表达式是一种Vue的模版语法
1.作用：利用表达式进行差值，渲染到页面中
表达式：可以是被求值的代码，JS引擎会将其代码计算出结果
2.语法：{{ 表达式 }}
<h3>{{ title }}</h3><p>{{ nickname.toUpperCase() }}</p><p>{{ age >=18 ? '成年' : '未成年' }}</p><p>{{ obj.name }}</p>3.注意事项：
3.1.使用的数据必须存在
3.2.支持的是表达式，而非语句（if，for）
3.3.不能在标签属性中使用{{ }}差值
四、Vue响应式特性
1.什么是响应式？
数据改变，试图自动更新
使用Vue开发——专注于业务核心逻辑即可
2.如何访问或修改数据？
data中的数据，最终会被添加到实例上
2.1、访问数据：“实例.属性名”
2.2、“实例.属性名”=“值”
