Vue基础入门

Vue简介

Vue----Vue简介

1. 什么是Vue
2. vue的特性
3. MVVM
4. vue的版本

vue的基本使用

Vue----vue的基本使用

1. 基本使用步骤
2. 基本代码与MVVM的对应关系

Vue的调试工具

Vue----Vue的调试工具

1. Vue的调试工具

Vue指令

1 指令的概念

指令是Vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

2 指令的分类

指令按照不同的用途可以分为如下6大类：

1.内容渲染指令

2.属性绑定指令

3.事件绑定指令

4.双向绑定指令

5.条件渲染指令

6.列表渲染指令

3 内容渲染指令

Vue---- 内容渲染指令

1. v-text
2. {{}} 插值表达式
3. v-html

4 属性绑定指令

Vue----属性绑定指令

5 模板渲染语法中使用JavaScript表达式

Vue----模板渲染语法中使用JavaScript表达式

6 事件绑定指令

Vue----事件绑定指令

1. 事件对象
2. 绑定事件并传参
3. 事件修饰符
4. 按键修饰符

7 双向绑定指令

Vue----双向绑定指令

1. 双向绑定指令
2. v-model 指令的修饰符

8 条件渲染指令

Vue----条件渲染指令

1. v-if v-show
2. v-else v-else-if

9 列表渲染指令

Vue----列表渲染指令

1. 列表渲染指令
2. v-for 中的索引
3. 使用 key 维护列表的状态
4. key 的注意事项

过滤器(Vue3弃用)

Vue----过滤器(Vue3弃用)

1. 过滤器的定义
2. 私有过滤器和全局过滤器
3. 连续调用多个过滤器
4. 过滤器传参
5. 过滤器的兼容性

品牌列表案例

Vue----品牌列表案例

Vue组件基础

单页面应用程序

Vue----单页面应用程序

1. 什么是单页面应用程序
2. 单页面应用程序的特点
3. 单页面应用程序的优缺点
4. 如何快速创建 vue 的 SPA 项目

vite 的基本使用

Vue----vite 的基本使用

1. 创建 vite 的项目
2. 梳理项目的结构
3. vite 项目的运行流程

组件化开发思想

1 什么是组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。

例如：http://www.ibootstrap.cn/ 所展示的效果，就契合了组件化开发的思想。用户可以通过拖拽组件的

方式，快速生成一个页面的布局结构。

2 组件化开发的好处

前端组件化开发的好处主要体现在以下两方面：

提高了前端代码的复用性和灵活性

提升了开发效率和后期的可维护性

3 vue 中的组件化开发

vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

vue 组件的构成

Vue----vue 组件的构成

1. vue 组件组成结构
2. 组件的 template 节点
3. 组件的 script 节点
4. 组件的 style 节点

组件注册

Vue----组件注册

1. 注册组件的两种方式
2. 全局注册组件
3. 使用全局注册组件
4. 局部注册组件
5. 全局注册和局部注册的区别
6. 组件注册时名称的大小写
7. 通过 name 属性注册组件

组件间的样式冲突

Vue----组件间的样式冲突

1. 如何解决组件样式冲突的问题
2. style 节点的 scoped 属性
3. /deep/ 样式穿透

props

Vue----props

1. 组件的 props
2. 在组件中声明 props
3. 无法使用未声明的 props
4. props 的大小写命名

Class 与 Style 绑定

Vue----Class 与 Style 绑定

1. 动态绑定 HTML 的 class
2. 以数组语法绑定 HTML 的 class
3. 以对象语法绑定 HTML 的 class
4. 以对象语法绑定内联的 style

props 验证

Vue----props 验证

1. props 验证
2. 对象类型的 props 节点
3. props 验证
4. 基础的类型检查
5. 多个可能的类型
6. 必填项校验
7. 属性默认值
8. 自定义验证函数

计算属性

Vue----计算属性

1. 计算属性
2. 声明计算属性
3. 计算属性的使用注意点
4. 计算属性 与 方法