2.Vue组件化编程

183 阅读1分钟

一、模块与组件、模块化与组件化

image.png

1.模块

image.png

2.组件

image.png

3.模块化

image.png

4.组件化

image.png

二、非单文件组件

1.概念

image.png

2.使用组件的步骤

(1)创建组件

data写成函数式

image.png

image.png

image.png

(2)注册组件

局部注册

image.png

image.png

全局注册

image.png

(3)编写组件标签

image.png

2.1总结

image.png

2.2注意点

2.2.1组件命名

多个单词命名

image.png

总结

image.png

定义组件时就命名

image.png

在大型项目中防止错乱,所以指定名字

2.2.2组件标签写法

image.png

3.组件的嵌套

image.png

image.png

image.png

4.VueComponent构造函数

image.png

5.Vue实例与组件实例

vc有的vm都有

vm可以配置el,指定为哪个容器服务,vc不可以有el配置项

vm的data配置项写成对象和函数形式都可以,vc的data配置项只能写成函数形式

6.一个重要的内置关系

image.png

image.png

image.png

三、单文件组件

1.工具

image.png

2.vue单文件组件命名

一个单词、两个单词 image.png

3.vue单文件组件写法

image.png

template标签不参与编译!

完整的单文件组件写法:

image.png

4.vue快捷插件

image.png

5.App.vue

image.png

创建组件时Vue.extend ()可以省略

6.main.js

入口文件,一切的开端

image.png

7.index.html

image.png