Vue2 第十二节 Vue组件化编程（一）

1.模块与组件，模块化与组件化概念

2. 非单文件组件

3. 组件编写注意事项

4. 组件的嵌套

一. 模块与组件，模块化与组件化

传统方式编写存在的问题

（1）依赖关系混乱，不好维护

（2）代码的复用率不高 

组件方式编写应用

1.1 模块

① 模块：向外提供特定功能的js程序，一般就是一个js文件

② 为什么要引入模块化：因为按照传统方式进行编程，js文件很多，引入逻辑很复杂

③ 引入模块化的作用：简化js的编写，复用js，提高js的运行效率

1.2 组件

① 定义：用来实现局部（特定）功能效果的代码集合

② 为什么要引入组件：因为一个界面往往功能都比较多，也比较复杂

1.3 模块化和组件化

① 模块化：当应用中的js都以模块来编写，那么这个应用就是一个模块化的应用

② 组件化：当应用中的功能都是多组件的方式来编写的（以功能点来拆分），那这个应用就是一个组件化的应用

二. 非单文件组件

2.1 概念理解

① 非单文件组件：一个文件中包含n个组件   xxx.html

② 单文件组件：一个文件中只有一个组件   xxx.vue (开发中常用)

2.2 编码示例

① Vue中使用组件的三大步骤

     （1）定义组件（创建组件）

     （2） 注册组件

     （3）使用组件（写组件标签）

② 创建组件示例：使用Vue.extend(options)创建，其中options和new Vue(options)传入的options几乎一样

注意：

• el不要写，最终所有的组件都要经过一个vm的管理，由vm中的el属性决定服务哪个容器
• data必须写成函数：避免组件被复用，数据存在引用关系
• 使用template配置项将结构写进去，注意所有结构需要包在一个div中

③ 注册组件

注册组件有两种方式：全局注册和局部注册

• 全局注册：靠Vue.components('组件名', 组件)

 

• 局部注册 ：靠new Vue的时候传入components选项（使用的比较多）

④ 使用组件： <school></school>  在模板中使用组件标签

三. 组件编写注意事项

3.1.关于组件名

• 由一个单词组成

       ① 第一种写法（首字母小写）：school

       ② 第二种写法（首字母大写）:School

• 多个单词组成

      ① 第一种写法（kebab-case命名）my-school，但是在使用的时候需要用引号包起来

      ② 第二种写法：（CamelCase命名）MySchool（必须在脚手架环境下才能运行）

注意：

• 组件名尽可能回避HTML中已有的元素名称，h2或者H2都不行
• 可以使用name配置项指定组件在开发者工具中呈现的名字

注册的时候用的名字是School

 在模板中使用的时候也得用这个名字

 上面name的配置项修改的是开发者工具中呈现的名字

 3.2 组件标签

（1）第一种写法：<school></school>

（2）第二种写法(自闭合)：<school/>  这种写法必须在脚手架环境下才可以，如果不在脚手架环境，会导致后续组件不能渲染

3.3 组件简写形式

  ①  简写形式

 const s = {
        name:'atguigu',
        // 组件定义时不要写el配置项
        // el:'#root',
        template:`<div><h2>学校名称：{{schoolName}}</h2>
    <h2>学校地址: {{address}}</h2>
    <button @click="showName">点我提示学校名</button></div>`,
        data() {
            return {
                schoolName:'尚硅谷',
                address:'北京昌平'
            }
        },
        methods: {
            showName() {
                alert(this.schoolName)
            }
        },
    }

② 完整形式

        const s = Vue.extend({
            name: 'atguigu',
            // 组件定义时不要写el配置项
            // el:'#root',
            template: `<div><h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址: {{address}}</h2>
        <button @click="showName">点我提示学校名</button></div>`,
            data () {
                return {
                    schoolName: '尚硅谷',
                    address: '北京昌平'
                }
            },
            methods: {
                showName () {
                    alert(this.schoolName)
                }
            },
        })

四.组件的嵌套

（1）定义app组件，app组件中包含school组件和hello组件

 （2）定义school组件，school组件包含student

 (3)student组件

(4) hello组件

 

 vm管理app, app管理所有组件