前端最新Vue2+Vue3基础入门到实战项目全套教程
001-Vue2+3入门到实战导学
亮点1：Vue2+Vue3--套课程全覆盖
基于Vue最新版本讲解
- Vue2 版本号 v2.7.14
- Vue2 版本号 v3.3.4
包含最新Vue3语法，紧跟最新生态
如：2023年5月发布的Vue3.3新特性
1、宏函数-defineOptions
2、宏函数-defineModel
亮点2：不墨迹，主线清晰
v-slot 指令自Vue2.6.0起引入，提供更好的支持 slot 和 slot-scope attribute 的API替代方案。v-slot 完整的由来参见这份 RFC。在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持，但已经被官方废弃且不会出现在Vue 3中
002-第一天课程介绍
- Vue快速上手
Vue概念 / 创建实例 / 插值表达式 / 响应式特性 / 开发者工具
- Vue指令
v-html / v-show / v-if / v-else / v-on / v-bind / v-for / v-model
- 综合案例-小黑记事本
列表渲染 / 删除功能 / 添加功能 / 底部统计 / 清空
003-Vue是什么
vue帮助手册地址：http://v2.cn.vuejs.org
概念：Vue是一个用于 “构建用户界面” 的 "渐进式" 框架
1.构建用户界面：基于数据动态渲染页面
2.渐进式：循序渐进的学习
3.框架：一套完整的项目解决方案，提升开发效率
005-插值表达式
插值表达式：{{}}
插值表达式是一种Vue模板语法
1、作用：利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
2、语法：{{表达式}}
| <h3>{{ title }}</h3> <p>{{ nickname.toUpperCase() }}</p> <p> {{ age>=18 ?'成年' ：‘未成年’ }} </p> <p> {{obj.name }} </p> |
3、注意点
（1）使用的数据必须存在 （data）
(2) 支持的是表达式，而非语句，比如 ：if for
(3) 不能在标签属性中使用 {{}}插值
<p title="{{ username}}"> 我是p标签 </p>
006-Vue响应式特性
1、Vue 核心特性：响应式
比如：数据的响应式处理 -->响应式：数据变化，视图自动更新
2、总结
（1）什么是响应式呢？
数据改变，视图自动更新
（2）如何访问或修改数据呢？
data中的数据，最终会被添加到实例上
- 访问数据："实例.属性名"
- 修改数据："实例.属性名" ="值"
007-开发者工具安装
安装Vue开发者工具：装插件调试Vue应用
（1）通过谷歌应用商店安装（国外网站）
（2）极简插件：下载 -> 开发者模式 -> 拖拽安装 -> 插件详情允许访问文件
https://chrome.zzzmh.cn/index
添加扩展插件，直接拖入即可
点击【详情】
（3）打开 Vue 运行的页面，调试工具中 Vue 栏，即可查看修改数据，进行调试
(4)关于谷歌浏览器安装了vue-devtools插件但在浏览器控制台不显示vue标签的解决方案
新建了一个vue2的项目。在安装了vue-devtools之后，无法在开发者工具中找到vue标签。
- vue-devtools版本问题
能支持vue2的devtools版本最高为 6.6.4，7.x的版本只能支持vue3
-
在代码中开启开发模式
在main.js文件中增加代码
Vue.config.devtools = true-
修改vue-devtools设置
008-指令初识 和 v-html
1、Vue 指令
vue 会根据不同的【指令】，针对标签实现不同的 【功能】。
指令：带有 v-前缀 的 特殊 标签属性
