前端最新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）如何访问或修改数据呢？