vue组件化编程

最新推荐文章于 2024-08-21 22:17:11 发布

灯莘

最新推荐文章于 2024-08-21 22:17:11 发布

阅读量285

点赞数 5

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/2201_75867247/article/details/138299871

版权

一、模块与组件的定义

1、模块——
模块定义：模块即向外提供特定功能的js程序，一般一个模块就是一个js文件
模块作用: 复用js,简化js的编写,提高js运行效率

2、组件的定义——
组件是实现应用中局部功能代码和资源的集合
代码：html、css、js
资源：mp3 mp4 ttf .zip
局部：将所有功能写在一个组件中是没有意义的所以要分开写。
组件的作用:复用编码,简化项目编码,提高运行效率

3、传统方式和组件的对比
传统方式：
依赖关系混乱，不好维护
代码复用率不高

4、模块化
当应用中的js都以模块来编写的,那这个应用就是一个模块化的应用。
将一个大的js拆分成多个小的js以实现模块化、

5、组件化
当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。
将应用按功能点拆分，一个功能就是一个组件。
组件中的js也可以拆分成多个js，实现js的模块化。

二、单文件组件与非单文件组件
1、单文件组件
一个文件中只包含有1个组件。
该文件名的后缀就是.vue
.vue文件格式

栗子：

<template>
<!-- 组件的结构 -->
</template>
<script>
// 组件交互的代码（数据、方法）
</script>
<style>
/* 组建的样式 */
</style>

1）、组件一般需要暴露出去
可以将Vue.extend()省略，直接将组件的配置对象暴露出去
eg：

栗子：

// 组件交互的代码（数据、方法），相当于非单文件中的除了template的配置
<script>
// export default Vue.extend(
// {
//     name:'School',
//     data() {
//     },
// })
export default {
    name:'School',
    data() {
    },
}
</script>

2、非单文件组件：
一个文件中包含有n个组件。
一个html文件中可以包含多个组件
组建的编写需要分成3步：创建组件、注册组件

1）创建组件
栗子：

//   创建school组件
      const school = Vue.extend({
        //     el: "#root",不要写el配置项,由vm决定该组件给谁用
        data() {
          return {
            schoolName: "nefu",
            address: "哈尔滨",
          };
        },
        template: `
        <div>
            <h2>学校名字:{{schoolName}}</h2>
            <h2>地址:{{address}}</h2>
        </div>`,
      });

2）、注册组件
注册局部组件
在vue实例中注册组件，靠new Vue的时候传入components选项

栗子：

new Vue({
          components:{
				组件名:定义的组件
          }
        });

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

3）、注册全局组件
全局注册靠Vue.component(‘组件名’,组件位置)

栗子：

 Vue.component("school", school);

4）、使用组件
在html中编写组件标签

栗子：

<div id="root">
        <school></school>
</div>

5）、局部注册：
栗子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <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>

    <script type="text/javascript">
      Vue.config.productionTip = false;
      //   创建school组件
      const school = Vue.extend({
        //     el: "#root",不要写el配置项,由vm决定该组件给谁用
        data() {
          return {
            schoolName: "nefu",
            address: "哈尔滨",
          };
        },
        template: `
        <div>
            <h2>学校名字:{{schoolName}}</h2>
            <h2>地址:{{address}}</h2>
        </div>`,
      });

      const student = Vue.extend({
        //     el: "#root",不要写el配置项,由vm决定该组件给谁用
        data() {
          return {
            studentName: "🐏",
            age: 18,
          };
        },
        template: `
        <div>
            <h2>名字:{{studentName}}</h2>
            <h2>年龄:{{age}}</h2>
        </div>`,
        
      });


        const vm = new Vue({
          el: "#root",
        //   第二步，注册组件
          components:{
            school:school,
            student:student,
          }
        });
    </script>
  </body>
</html>

6）全局注册：

栗子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <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>
    <h2>实例1:</h2>
    <div id="root">
      <school></school>
      <hr />
      <student></student>
    </div>
    <h2>实例2:</h2>
    <div id="root2">
      <school></school>
      <hr />
      <student></student>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      //   创建school组件
      const school = Vue.extend({
        //     el: "#root",不要写el配置项,由vm决定该组件给谁用
        data() {
          return {
            schoolName: "nefu",
            address: "哈尔滨",
          };
        },
        template: `
        <div>
            <h2>学校名字:{{schoolName}}</h2>
            <h2>地址:{{address}}</h2>
        </div>`,
      });

      const student = Vue.extend({
        //     el: "#root",不要写el配置项,由vm决定该组件给谁用
        data() {
          return {
            studentName: "🐏",
            age: 18,
          };
        },
        template: `
        <div>
            <h2>名字:{{studentName}}</h2>
            <h2>年龄:{{age}}</h2>
        </div>`,
      });

      //   第二步，注册组件(全局注册)
      Vue.component("school", school);
      Vue.component("student", student);

      const vm = new Vue({
        el: "#root",
        //   第二步，注册组件
        //   components:{
        //     school:school,
        //     student:student,
        //   }
      });
      new Vue({
        el: "#root2",
      });
    </script>
  </body>
</html>

灯莘

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
vue组件化编程

模块定义：模块即向外提供特定功能的js程序，一般一个模块就是一个js文件。当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。当应用中的js都以模块来编写的,那这个应用就是一个模块化的应用。局部：将所有功能写在一个组件中是没有意义的所以要分开写。模块作用: 复用js,简化js的编写,提高js运行效率。组件中的js也可以拆分成多个js，实现js的模块化。将一个大的js拆分成多个小的js以实现模块化、将应用按功能点拆分，一个功能就是一个组件。组建的编写需要分成3步：创建组件、注册组件。
复制链接

扫一扫