Vue（组件）【一】-CFANZ编程社区

1.引入

传统方式编写应用：
在这里插入图片描述
存在问题：

依赖关系混乱，不好维护。
代码复用率不高。（结构上无法复用）

2.组件、模块

在这里插入图片描述

组件的定义：实现应用中局部功能代码和资源的集合
模块的定义：向外提供特定功能的js程序，一般就是一个js文件
模块化：当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用
组件化：当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用
组件中可以有很多js模块

非单文件组件：

一个文件中包含有n个组件。
在这里插入图片描述

单文件组件：

一个文件中包含有1个组件。
在这里插入图片描述
条理清晰、代码方便维护

注册组件代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js">  </script>
</head>
<body>
    <div id="root">  
        <!-- 第三步：编写组件标签 -->
        <school></school>
        <hr>
        <!-- 第三步：编写组件标签 -->
        <student></student>
    </div>
    <hr>
    <div id="root2">
        <hello></hello>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    //第一步：创建school组件
    const school = Vue.extend({
        template:`
            <div>
                <h2>学校名称：{{schname}}</h2>
                <h2>学校地址：{{address}}</h2>  
                <button @click="showName">点我提示学校名</button>
            </div>    
        `,
        data(){
            return {
                schname:'清华',
                address:'北京',
            }
        },
        methods:{
            showName(){
                alert(this.schname)
            }
        },
    })
    //第一步：student组件
    const student = Vue.extend({
        template:`
        <div>
            <h2>学生名称：{{stuname}}</h2>
            <h2>学生年龄：{{age}}</h2>
        </div>
        `,
        data(){
            return {
                stuname:'张三',
                age:18,
            }
        }
    })

        //第一步：student组件
    const hello = Vue.extend({
        template:`
        <div>
            <h2>你好啊：{{name}}</h2>
        </div>
        `,
        data(){
            return {
                name:'张三',
            }
        }
    })
    //第二步：全局注册组件
    Vue.component('hello',hello)
    //创建vm
    const vm = new Vue({
        el:'#root',
        //第二步：注册组件（局部注册）
        components:{
            school,
            student,
        },
    });


    const vm2 = new Vue({
        el:'#root2',
    });

</script>
</html>