第二章--Vue组件化编程

第二章–Vue组件化编程

为什么要使用组件化编程？

传统：顶部 导航 内容 底部。四个css，html中引入。依赖关系混乱、不好维护

1.1、模块与组件、模块化与组件化

1.1.1、模块

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

js文件很多并且复杂

复用js，简化js的编写，提高js运行效率

1.1.2、组件

实现应用中局部功能代码和资源的集合

一个界面的功能很复杂

复用编码，简化项目编码，提高运行效率

1.1.3、模块化

当应用中的js是以模块来编写的，这个应用就是一个模块化的应用

1.1.4、组件化

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

1.2、非单文件组件

1.2.1、基本使用

一个文件中包含n个组件

<!--容器-->
<div id="hello">
<!--    3.编写组件标签-->
    <school></school>
    <student></student>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    // 1.创建组件
    const school = Vue.extend({
        template:`
          <div>
            <h2>学校名称:{{schoolName}}</h2>
            <h2>学校地址:{{address}}</h2>
          </div>`,
        data(){
            return{
                schoolName:'dada',
                address:'重庆'
            }
        }
    })
    const student = Vue.extend({
        template:`
          <div>
            <h2>学生姓名:{{studentName}}</h2>
            <h2>学生年龄:{{age}}</h2>
          </div>`,
        data(){
            return{
                studentName:'tl',
                age:'11'
            }
        }
    })
    // 实例
    const vm = new Vue({
        el: '#hello', // 指定实例为哪个容器服务
        // 2.注册组件（局部注册）
        components:{
            school:school,
            student:student
        }
    });
    // vue.$mount('#hello')

</script>

定义一个组件：

1. 使用Vue.extend(options)（简写为options）创建
2. el不要写-----最终所有的组件都要经过一个vm的管理，由vm中的el决定服务那个容器
3. data必须写成函数-----避免组件被复用时，数据存在引用关系
4. 使用template可以配置组件结构

注册组件

1. 局部注册 靠new Vue的时候传入components选项
2. 全局注册 Vue.component(‘组件名’，组件)

1.2.2、注意

1. 组件名
   1. 一个单词组成（首字母小写或大写）
   2. 多个单词组成（my-school,MySchool）
   3. 组件竟可能回避HTML中已有的元素名称，可以使用name配置项指定组件在开发者工具中呈现的名字
2. 组件标签
   1. <school></school>
   2. <school/>
   3. 不用脚手架时，<school/>会导致后续组件不能渲染

1.2.3、嵌套组件

<!--容器-->
<div id="hello">
<!--    3.编写组件标签-->
    <school></school>

</div>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    // 1.创建组件
    const student = Vue.extend({
        template:`
          <div>
            <h2>学生姓名:{{studentName}}</h2>
            <h2>学生年龄:{{age}}</h2>

          </div>`,
        data(){
            return{
                studentName:'tl',
                age:'11'
            }
        }
    })
    const school = Vue.extend({
        template:`
          <div>
            <h2>学校名称:{{schoolName}}</h2>
            <h2>学校地址:{{address}}</h2>
            <student></student>
          </div>`,
        data(){
            return{
                schoolName:'dada',
                address:'重庆'
            }
        },
        components:{
            student
        }
    })

    // 实例
    const vm = new Vue({
        el: '#hello', // 指定实例为哪个容器服务
        // 2.注册组件
        components:{
            school
        }
    });
    // vue.$mount('#hello')

</script>

组件的标准化开发app

<!--容器-->
<div id="hello">
<!--    3.编写组件标签-->

</div>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    // 1.创建组件
    const student = Vue.extend({
        template:`
          <div>
            <h2>学生姓名:{{studentName}}</h2>
            <h2>学生年龄:{{age}}</h2>

          </div>`,
        data(){
            return{
                studentName:'tl',
                age:'11'
            }
        }
    })
    const school = Vue.extend({
        template:`
          <div>
            <h2>学校名称:{{schoolName}}</h2>
            <h2>学校地址:{{address}}</h2>
            <student></student>
          </div>`,
        data(){
            return{
                schoolName:'dada',
                address:'重庆'
            }
        },
        components:{
            student
        }
    })
    const app = Vue.extend({
        template:`<school></school><student></student>`,
        components:{
            student,
            school
        }
    })
    // 实例
    const vm = new Vue({
        el: '#hello', // 指定实例为哪个容器服务
        template:'<app></app>',
        // 2.注册组件
        components:{
            app
        }
    });
    // vue.$mount('#hello')

</script>

VueComponent

1. school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
2. 我们只需要写<school/>或者<school></school>,Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行：new VueComponent(options)
3. 每次调用Vue.extend,返回都是一个全新的VueComponent
4. this指向：
   1. 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】
   2. new Vue()配置中：data函数、methods中的函数、watch中的函数、computed中的额函数的this均是【Vue实例对象】
5. VueComponent的实例对象，以后简称vc,Vue的实例对象简称为vm

1.2.4、一个重要的内置关系

组件是可以复用的Vue实例

一个组件的data是一个函数，每个实例可以返回一个独立的data

// vue.$mount('#hello')
function Demo(){
    this.a=1;
    this.b=2;
}
const d = new Demo()
console.log(Demo.prototype) //显示原型属性
console.log(d.__proto__) //隐式原型属性
// 通过显示原型属性操作原型对象，追加一个x属性，值为99
d.__proto__.x=10
console.log('@',d.__proto__)

1. 内置关系：VueComponent.prototype.__proto__==Vue.prototype
2. 这样可以让组件实例对象(vc)可以访问到Vue原型上的属性、方法

1.3、单文件组件

一个文件中只包含有1个组件

1. webpack

2. 脚手架

3. 编写组件 .vue 包含template script style

4. 编写App.vue,引入其他组件，将组件拼接

5. 编写mian.js文件，new Vue() App实例

6. 编写index.html,创建容器，引入需要的文件