Vue组件化编程

最新推荐文章于 2024-08-04 14:44:13 发布

荭色海湾

最新推荐文章于 2024-08-04 14:44:13 发布

阅读量164

点赞数 10

分类专栏： Vue2 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_53374893/article/details/140830699

版权

Vue2 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.传统方式编写应用

2.非单文件组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<!-- 

        Vue中使用组件的三大步骤：
            一、定义组件（创建组件）
            二、注册组件
            三、使用组件（写组件标签）
        
     一、如何定义一个组件?
        使用vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别；
        区别如下：
            1.e1不要写，为什么？—最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
            2.data必须写成函数，为什么？ ——避免组件被复用时，数据存在引用关系。
        备注：使用template可以配置组件结构。

     二、如何注册组件?
        1.局部注册：靠new Vue的时候传入components选项
        2.全局注册：靠Vue.component（‘组件名'，组件）
    
     三、编写组件标签：
        <school></school>

-->
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>{{msg}}</h1>
        <xuexiao></xuexiao>
        <hr>
        <xuesheng></xuesheng>
        <hr>
        <xuesheng></xuesheng>
        <hello></hello>
    </div>

    <h2>==========================换行============================</h2>
    <!-- 准备好一个容器 -->
    <div id="root2">
        <!-- <xuesheng></xuesheng>  不可以用其他vm的局部组件 -->
        <h1>{{msg}}</h1>
        <hello></hello>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        //Vue是原型对象 上面的extend都是没有s的
        //第一步:创建school组件
        const school = Vue.extend({
            // el:"#root",组件定义时一定不要写 el配置项,因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器

            template: `
            <div>
                 <h2>学校名称:{{schoolName}}</h2>
                 <h2>学校地址:{{address}}</h2> 
                 <button @click="tip">点我提示学校</button>
                 </div>
        `,
            data() {
                return {
                    schoolName: '辽工',
                    address: '锦州'
                }
            },
            methods: {
                tip() {
                    alert(this.schoolName);
                }
            },
        })
        //第一步:创建studnet组件
        const student = Vue.extend({
            template: `
            <div>
                   <h2>学生名称:{{studentName}}</h2>
                   <h2>学生年龄:{{age}}</h2>  </div>
        `,
            data() {
                return {
                    studentName: '张三',
                    age: 18
                }
            }
        })


        const hello = Vue.extend({
            template: `
            <div>
                   <h2>你好啊</h2>
                   <h2>你好名称:{{name}}</h2>  </div>
        `,
            data() {
                return {
                    name: 'Tom'
                }
            }
        })

        //第二步：全局注册组件
        Vue.component('hello',hello)



        //创建vm
        const vm = new Vue({
            el: "#root",
            data: {
                msg: '你好啊！'
            },
            //第二步：注册组件(局部注册)
            components: {
                xuexiao: school,
                xuesheng: student
            }
        })

        //创建vm
        const vm2 = new Vue({
            el: "#root2",
            data: {
                msg: '你好啊！'
            }
        })


    </script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<!-- 
        几个注意点：
            1.关于组件名：
                一个单词组成：
                    第一种写法（首字母小写）：school
                    第二种写法（首字母大写）：School
                多个单词组成：
                    第一种写法（kebab-case命名）：my-school
                    第二种写法(CamelCase命名）：MySchool（需要Vue脚手架支持）
                备注：
                    （1）.组件名尽可能回避HTML中己有的元素名称，例如：h2、H2都不行。
                    （2）.可以使用name配置项指定组件在(开发者工具)中呈现的名字。
            2.关于组件标签：
                第一种写法：<school></school>
                第二种写法：<school/>
                备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。
            3.一个简写方式：const school=Vue.extend(options)可简写为：const school=options


-->
<body>
    <!-- 准备好一个容器 -->
    <div id="root">

        <h1>欢迎学习Vue!</h1>

        <school></school>
        <!-- 可以同名，开发者工具上面也会显示两个同名的标签，所以最好不要同名 -->
        <atjmj></atjmj>

        <!-- <school/>  必须得在脚手架里用-->

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        //定义组件
        const s = Vue.extend({
            name:'atjmj',
            template: `
            <div>
                  <h2>学校名称:{{name}}</h2>
                 <h2>学校地址:{{address}}</h2>
            </div>
            
            `, 
            data() {
                return {
                    name:'辽工',
                    address:'锦州'
                }
            },
        })

        const a = {
            template: `
            <div>
                  <h2>学校名称:{{name}}</h2>
                 <h2>学校地址:{{address}}</h2>
            </div>
            `, 
            data() {
                return {
                    name:'辽工',
                    address:'锦州'
                }
            },
        }


        const vm = new Vue({
            el: "#root",
            data: {

            },
            components:{
                school:s,
                atjmj:a
            }
        })
        // 

    </script>

</body>

</html>

规范

3.组件的嵌套

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示


        //定义studnet组件
        const student = Vue.extend({
            name: 'student',
            template: `
            <div>
                  <h2>学生名称:{{name}}</h2>
                 <h2>学生组件:{{age}}</h2>
            </div>
            
            `,
            data() {
                return {
                    name: '基哥',
                    age: 18
                }
            },
        })


        //定义组件
        const school = Vue.extend({
            name: 'school',
            template: `
            <div>
                  <h2>学校名称:{{name}}</h2>
                 <h2>学校地址:{{address}}</h2>
                 <student></student>
            </div>
            
            `,
            data() {
                return {
                    name: '辽工',
                    address: '锦州'
                }
            },
            // 局部注册
            components: {
                student
            }
        })

        //定义组件
        const hello = Vue.extend({
            name: 'hello',
            template: `
            <h1>{{msg}}</h1>       
            `,
            data() {
                return {
                    msg: '欢迎来到Vue学习'
                }
            }
        })


        //定义app组件
        const app = Vue.extend({
            name: 'app',
            template: `
            <div>
                 <hello></hello>  
                <school></school>
                               </div>
            `,
            components: {
                school,
                hello
            }
        })



        const vm = new Vue({
            el: "#root",
            template: `
              <app></app>
            `,
            //注册组件(局部)
            components: {
                app
            }
        })
    </script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<!-- 
    关于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。

-->
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <student></student>
        <hello></hello>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
       
        //定义studnet组件
        const student = Vue.extend({
            name: 'student',
            template: `
            <div>
                  <h2>学生名称:{{name}}</h2>
                 <h2>学生组件:{{age}}</h2>
            </div>
            
            `,
            data() {
                return {
                    name: '基哥',
                    age: 18
                }
            },
        })
        const test = Vue.extend({
            name: 'test',
            template: `
            <h2>a</h2>
            `
        })

        //会管理它的子 实例对象
        const hello = Vue.extend({
            name: 'hello',
            template: `
            <div>
                 <h2>{{msg}}</h2>
                  <test></test>
          </div>
            `,
            data() {
                return {
                    msg: '消息'
                }
            },
            components:{test}
        })
       

        console.log(student);
        console.log(hello);
        console.log(student=== hello);

        const vm = new Vue({
            el: "#root",
            components:{student,hello}
        })

    </script>

</body>

</html>

4.一个重要的内置关系

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <school></school>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示





        const hello = Vue.extend({
            name: 'hello',
            template: `
            <div>
                  <h2>学校名称:{{name}}</h2>
                 <h2>学校地址:{{address}}</h2>
                 <button @click='test'>带你我</button>
            </div>
            `,
            data() {
                return {
                    name: '基哥',
                    address: '桂林'
                }
            },
            methods: {
                test(){
                    console.log(this.__proto__);//Vue不是 school验证了 不是继承关系 ，是组合关系
                }
            },

        })
        //定义组件
        const school = Vue.extend({
            name: 'school',
            template: `
            <div>
                  <h2>学校名称:{{name}}</h2>
                 <h2>学校地址:{{address}}</h2>
                 <hello></hello>
            </div>
            `,
            data() {
                return {
                    name: '辽工',
                    address: '锦州'
                }
            },
            components: {
                hello
            }

        })
        const vm = new Vue({
            el: "#root",
            data: {

            },
            components: {
                school
            }
        })

        // console.log(school.prototype.__proto__===Vue.prototype);


    </script>

</body>

</html>

5.单文件组件

第二个推荐的插件

<template>
  <div>
    <School></School>
    <Student></Student>

  </div>
</template>

<script>

        //引入组件
        import School from './School'//在脚手架里 后缀写也行 不写也行

        import Studnet from './Student'
        export default {
          name: "App",
          components: {School,Student},
        };
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习一下单文件组件的语法</title>
</head>
<body>
    

    <div id="root"> </div>
    <script type="text/javascript" src="../js/vue.js"> </script>

    <script type="text/javascript" src="./main.js">
        // 在下面引用，上面引用的话，会找不到dom元素    
    </script>
</body>
</html>


import App from './App'

new Vue({
    el:'#root',
    template:`
    <App></App>
    `,
    components:{App},
    
})

<template>
  <!-- 组件的结构 -->
  <div class="demo">
    <h2>学校名称:{{ name }}</h2>
    <h2>学校地址:{{ address }}</h2>
  </div>
</template>


<script>
//    组件交互相关的代码(数据、方法等等)
//  export const school = Vue.extend({
//     data() {
//       return {
//         name: "辽工",
//         address: "锦州",
//       };
//     }
//   });
// export{school}

// export default school 三种暴露方式

export default {
  name:'School',//在devtools 显示的名字，防止别人乱改,这个名字 在devtools显示不可观!!!
  //因为Vue.extend 在 配置对象传给其他组件实例的 component配置对象的时候，会自动帮我们调用来创建，这个组件的VueComponent构造函数
  data() {
    return {
      name: "辽工",
      address: "锦州",
    };
  },
};
</script>


<style>
/* 组件的样式 */
.demo {
  background-color: orange;
}
</style>

<template>
  <!-- 组件的结构 -->
  <div>
    <h2>学生名称:{{ name }}</h2>
    <h2>学生年龄:{{ address }}</h2>
  </div>
</template>


<script>


export default {
  name:'School',
  data() {
    return {
      name: "基哥",
      age: 13,
    };
  },
};
</script>