三、Vue基础-组件(上)

目录

 1、单页面应用程序

1.1、什么是单页面应用程序

1.2、单页面应用程序的特点

 1.3、单页面应用程序的优、缺点

1.4、快速创建vue的spa项目

 2、vite的基本使用

2.1、创建vite项目

 2.2、项目结构

 3、组件化开发思想

3.1、什么是组件化开发思想

 3.2、组件化开发的好处

 3.3、vue中的组件化开发

 4、vue组件的构成

4.1、vue组件组成结构

 4.2、组件的template节点

 4.3、组件的script节点

 4.4、组件的style节点

 5、组件的基本使用

5.1、组件的注册

 5.1.1、全局注册的组件(在main.js中)

5.1.2、局部注册的组件(在App.vue中)

 5.1.3、全局注册与局部注册的区别

5.1.4、组件注册时名称的大小写

​5.1.5、通过name属性注册组件

 5.2、组件之间的样式冲突

5.2.1父组件影响子组件

5.2.2、解决样式冲突

 5.2.3、样式穿透

5.3、组件的props

5.3.1、什么是组件

 5.3.2、在组件中声明props

 5.3.3、动态绑定props值

  5.3.4、props的大小命名法

 5.4、Class与Style绑定

5.4.1、动态绑定html的class

 5.4.2、以数组语法html的class

  5.4.3、以对象语法html的class

  5.4.4、以对象语法html的class


 1、单页面应用程序

1.1、什么是单页面应用程序

三、Vue基础-组件(上)_第1张图片

1.2、单页面应用程序的特点

 三、Vue基础-组件(上)_第2张图片

 1.3、单页面应用程序的优、缺点

三、Vue基础-组件(上)_第3张图片

 三、Vue基础-组件(上)_第4张图片

1.4、快速创建vue的spa项目

三、Vue基础-组件(上)_第5张图片

 2、vite的基本使用

2.1、创建vite项目

三、Vue基础-组件(上)_第6张图片

 2.2、项目结构

三、Vue基础-组件(上)_第7张图片

三、Vue基础-组件(上)_第8张图片

  2.2、vite项目的运行流程

三、Vue基础-组件(上)_第9张图片

三、Vue基础-组件(上)_第10张图片

三、Vue基础-组件(上)_第11张图片

三、Vue基础-组件(上)_第12张图片

 3、组件化开发思想

3.1、什么是组件化开发思想

三、Vue基础-组件(上)_第13张图片

 3.2、组件化开发的好处

三、Vue基础-组件(上)_第14张图片

 3.3、vue中的组件化开发

三、Vue基础-组件(上)_第15张图片

 4、vue组件的构成

4.1、vue组件组成结构

三、Vue基础-组件(上)_第16张图片

 4.2、组件的template节点

三、Vue基础-组件(上)_第17张图片

三、Vue基础-组件(上)_第18张图片

三、Vue基础-组件(上)_第19张图片

 4.3、组件的script节点

三、Vue基础-组件(上)_第20张图片

 三、Vue基础-组件(上)_第21张图片

 三、Vue基础-组件(上)_第22张图片

 三、Vue基础-组件(上)_第23张图片

 4.4、组件的style节点

三、Vue基础-组件(上)_第24张图片

 三、Vue基础-组件(上)_第25张图片

 5、组件的基本使用

5.1、组件的注册

三、Vue基础-组件(上)_第26张图片

三、Vue基础-组件(上)_第27张图片

 5.1.1、全局注册的组件(在main.js中)

全局可用,包括别的组件

三、Vue基础-组件(上)_第28张图片

三、Vue基础-组件(上)_第29张图片

5.1.2、局部注册的组件(在App.vue中)

在app.vue中的某一个script中注册,仅仅该script对应的部分可用。

三、Vue基础-组件(上)_第30张图片

 5.1.3、全局注册与局部注册的区别

三、Vue基础-组件(上)_第31张图片

5.1.4、组件注册时名称的大小写

三、Vue基础-组件(上)_第32张图片 5.1.5、通过name属性注册组件

三、Vue基础-组件(上)_第33张图片

 5.2、组件之间的样式冲突

5.2.1父组件影响子组件

三、Vue基础-组件(上)_第34张图片

5.2.2、解决样式冲突

三、Vue基础-组件(上)_第35张图片

三、Vue基础-组件(上)_第36张图片

 5.2.3、样式穿透

三、Vue基础-组件(上)_第37张图片

5.3、组件的props

5.3.1、什么是组件

三、Vue基础-组件(上)_第38张图片

 三、Vue基础-组件(上)_第39张图片

 5.3.2、在组件中声明props

三、Vue基础-组件(上)_第40张图片

父组件:

 注:子组件未声明,父组件无法传值。

三、Vue基础-组件(上)_第41张图片

 5.3.3、动态绑定props值

三、Vue基础-组件(上)_第42张图片

 三、Vue基础-组件(上)_第43张图片

  5.3.4、props的大小命名法

三、Vue基础-组件(上)_第44张图片

 5.4、Class与Style绑定

5.4.1、动态绑定html的class

三、Vue基础-组件(上)_第45张图片

 5.4.2、以数组语法html的class

三、Vue基础-组件(上)_第46张图片

  5.4.3、以对象语法html的class

三、Vue基础-组件(上)_第47张图片

  5.4.4、以对象语法html的class

三、Vue基础-组件(上)_第48张图片

总结:

三、Vue基础-组件(上)_第49张图片

 

你可能感兴趣的:(Vue,前端)