Vue组件化编程

最新推荐文章于 2024-08-23 10:26:27 发布
最新推荐文章于 2024-08-23 10:26:27 发布
阅读量352 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44230693/article/details/130666905
版权
本文详细介绍了Vue.js中模块和组件的概念，包括它们的作用、定义和使用方法。通过Vue.extend创建组件，局部和全局注册组件，并演示了组件的嵌套使用。同时，讨论了组件名的命名规则以及VueComponent的特性，强调了组件实例对象与Vue实例对象的区别和联系。
摘要由CSDN通过智能技术生成

2.1. 模块与组件、模块化与组件化

在这里插入图片描述
在这里插入图片描述

模块：

  1. 理解：向外提供特定功能的 js 程序，一般就是一个 js 文件
  2. 为什么：js 文件很多很复杂
  3. 作用：复用、简化 js 的编写，提高 js 运行效率

组件：

  1. 定义：用来实现局部功能的代码和资源的集合（html/css/js/image…）
  2. 为什么：一个界面的功能很复杂
  3. 作用：复用编码，简化项目编码，提高运行效率

模块化：

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

组件化：

  • 当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用

2.1.非单文件组件

非单文件组件：一个文件中包含有 n 个组件

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

2.2.1. 基本使用

Vue中使用组件的三大步骤

  1. 定义组件
    1. 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别
      1. el不要写，因为最终所有的组件都要经过一个vm的管理，由vm中的el才决定服务哪个容器
      2. data必须写成函数，避免组件被复用时，数据存在引用关系
  2. 注册组件
    1. 局部注册：new Vue()的时候options传入components选项
    2. 全局注册：Vue.component(‘组件名’,组件)
  3. 使用组件
    1. 编写组件标签如 <school></school>
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>基本使用</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        Vue中使用组件的三大步骤：
            一、定义组件(创建组件)
            二、注册组件
            三、使用组件(写组件标签)
        
        一、如何定义一个组件?
            使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别
            区别如下:
                1.el不要写，为什么? ----最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
                2.data必须写成函数，为什么?  ----避免组件被复用时，数据存在引用关系。
            备注:使用template可以配置组件结构。
            
        二、如何注册组件?
            1.局部注册: 靠new Vue的时候传入components选项
            2.全局注册: 靠Vue.component( 组件名,组件)
        
        三、编写组件标签:
            <school></school>
    -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>{{msg}}</h2><hr>
        <!-- 第三步：编写组件标签 -->
        <school></school><hr>
        <school></school><hr>
        <hello></hello><hr>
    </div>

    <div id="root2"> 
        <hello></hello> 
    </div>

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

        // 第一步：创建school组件
        const school = Vue.extend({ 
			// el: '#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
            template: `
                <div class="demo">
                    <h3>学校名称：{{schoolName}}</h3>
                    <h3>学校地址：{{address}}</h3>
                    <button @click="showName">点我提示学校名</button>
                </div>     
            `,
            data() {
                return {
                    schoolName: '莆田学院',
                    address: '福建莆田'
                }
            },
            methods: {
                showName() {
                    alert(this.schoolName);
                }
            }
		});

        // 第一步：创建student组件
        const student = Vue.extend({
            template: `
                <div> 
                    <h3>学生姓名：{{studentName}}</h3> 
                    <h3>学生年龄：{{age}}</h3> 
                </div>  
            `,
            data() { 
                return {
                    studentName: '张三',
                    age: 18
                }
            }
        });

        //第一步：创建hello组件
        const hello = Vue.extend({
            template: `
                <div> 
                    <h3>你好啊！{{name}}</h3> 
                 </div>
            `,
            data() {
                return {
                    name: 'liqb'
                }
            }
        })

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

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

        // 创建vm 
        new Vue({ 
            el: '#root2'
        })
    </script>
</body>
</html>

在这里插入图片描述

2.2.2. 组件注意事项

关于组件名

  • 一个单词组成
    • 第一种写法（首字母小写）：school
    • 第二种写法（首字母大写）：School
  • 多个单词组成
    • 第一种写法（kebab-case 命名）：my-school
    • 第二种写法（CamelCase 命名）：MySchool（需要Vue脚手架支持）
  • 备注
    • 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
    • 可以使用name配置项指定组件在开发者工具中呈现的名字

关于组件标签

  • 第一种写法：<school></school>
  • 第二种写法：<school/>（需要Vue脚手架支持）
  • 备注：不使用脚手架时，会导致后续组件不能渲染

一个简写方式：const school = Vue.extend(options)可简写为const school = options，因为父组件components引入的时候会自动创建

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>几个注意点</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        几个注意点:
            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
    -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>{{msg}}</h2>
        <school></school>
    </div>

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

        // 定义组件
        const school = Vue.extend({
            name: 'liqb', // 组件给自己起个名字，用于在浏览器开发工具上显示
            template: `
                <div>
                    <h3>学校名称：{{name}}</h3>
                    <h3>学校地址：{{address}}</h3>
                 </div>
            `,
            data() {
                return {
                    name: '莆田学院',
                    address: '福建莆田'
                }
            }
        });
		
		new Vue({ 
			el: '#root',  	  
			data:{
                msg: '欢迎学习Vue!'
			},
            components: {
                school
            }
		});
    </script>
</body>
</html>

在这里插入图片描述

2.2.3. 组件的嵌套

在这里插入图片描述

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>组件的嵌套</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
		
    </div>

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

        // 定义student组件
        const student = Vue.extend({
            name: 'student',
            template: `
                <div>
                    <h4>学生姓名：{{name}}</h4>
                    <h4>学生年龄：{{age}}</h4>
                </div>
            `,
            data() {
                return {
                    name: 'liqb',
                    age: 18
                }
            }
        });

        // 定义school组件
        const school = Vue.extend({ 
            name: 'school',
            template: `
                <div>
                    <h3>学校名称：{{name}}</h3>
                    <h3>学校地址：{{address}}</h3>
                    <student></student>
                </div>   
            `,
            data() {
                return {
                    name: '莆田学院',
                    address: '福建莆田'
                }
            },
            // 注册组件（局部）
            components: { 
                student
            }
        });

        // 定义hello组件
        const hello = Vue.extend({
            template: `<h3>{{msg}}</h3>`,
            data() {
                return {
                    msg: '欢迎来到莆田学院学习！'
                }
            }
        });

        // 定义app组件
        const app = Vue.extend({ 
            template: ` <div> <hello></hello> <school></school> </div> `,
            components: { 
                school, 
                hello 
            } 
        });
        
        
		new Vue({ 
			el: '#root',
            template: '<app></app>',
            //注册组件（局部）
            components: { 
			    app 
			}
		});
    </script>
</body>
</html>

在这里插入图片描述

2.2.4. VueComponent

关于 VueComponent

  • school 组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，而是** Vue.extend() **生成的
  • 我们只需要写 <school/> 或 <school></school>，Vue 解析时会帮我们创建 school 组件的实例对象，即Vue帮我们执行的new VueComponent(options)
  • 每次调用Vue.extend，返回的都是一个全新的VueComponent，即不同组件是不同的对象
  • 关于 **this **指向
    • 组件配置中data函数、methods中的函数、watch中的函数、computed中的函数 它们的 **this **均是 VueComponent实例对象
    • **new Vue(options)**配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的 **this **均是 Vue实例对象
  • VueComponent的实例对象，以后简称vc（组件实例对象）Vue的实例对象，以后简称vm
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>VueComponent</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        关于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。
    -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <school></school>
        <hello></hello>
    </div>

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

        // 定义school组件
        const school = Vue.extend({
            name: 'school',
            template: `
                <div>
                    <h3>学校名称：{{name}}</h3>
                    <h3>学校地址：{{address}}</h3>
                    <button @click="showName">点我提示学校名</button>
                </div>   
            `,
            data() {
                return {
                    name: '莆田学院',
                    address: '福建莆田'
                }
            },
            methods: {
                showName() {
                    console.log('showName', this)
                }
            }
        });

        const test = Vue.extend({
            template: `<span>liqb</span>`
        });

        // 定义hello组件
        const hello = Vue.extend({
            template: ` 
                <div> 
                    <h2>{{msg}}</h2> 
                    <test></test> 
                </div> 
            `, 
            data() {
                return {
                    msg: '你好啊！'
                }
            }, 
            components: { 
                test 
            }
        });

        // console.log('@',school);
        // console.log('#',hello);
        
		new Vue({ 
			el: '#root',
            components: { 
			    school,
                hello
			}
		});
    </script>
</body>
</html>

2.2.5. 一个重要的内置关系

在这里插入图片描述

  1. 一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype
  2. 为什么要有这个关系：让组件实例对象vc可以访问到 Vue原型上的属性、方法
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>一个重要的内置关系</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
        2.为什么要有这个关系：让组件实例对象vc可以访问到 Vue原型上的属性、方法
    -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <school></school>
    </div>

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

        // 定义school组件
        const school = Vue.extend({
            name: 'school',
            template: `
                <div>
                    <h3>学校名称：{{name}}</h3>
                    <h3>学校地址：{{address}}</h3>
                    <button @click="showX">点我显示x</button>
                </div>   
            `,
            data() {
                return {
                    name: '莆田学院',
                    address: '福建莆田'
                }
            },
            methods: {
                showX() {
                    console.log(this.x);
                }
            }
        });

        // 创建一个vm
        new Vue({
            el: '#root',
            data:{
                msg: '你好'
            },
            components: {
                school
            }
        });
        
        console.log(school.prototype.__proto__ === Vue.prototype);
		
		// 定义一个构造函数
        // function Demo() {
        //     this.a = 1;
        //     this.b = 2;
        // }
        // // 创建一个Demo的实例对象
        // const d = new Demo();
        // 
        // console.log(Demo.prototype); // 显示原型属性
        // console.log(d.__proto__); // 隐示原型属性
        // 
        // console.log(Demo.prototype === d.__proto__); // true
        // 
        // // 程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
        // Demo.prototype.x = 99; 
        // 
        // console.log('@', d.x);
    </script>
</body>
</html>

2.3. 单文件组件

  • School.vue
    <template>
    <!-- 组件的结构 -->
    <div id='Demo'> 
        <h2>学校名称：{{name}}</h2> 
        <h2>学校地址：{{address}}</h2> 
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script> 
    /* 组件交互相关的代码(数据、方法等等) */
    export default { 
        name:'School', 
        data() { 
            return { 
                name:'UESTC', address:'成都' 
            } 
        }, 
        methods: { 
            showName() { 
                alert(this.name); 
            } 
        }, 
    } 
</script>

<style>
    /* 组件的样式 */
    #Demo{
        background: orange;
    }
</style>
  • Student.vue
    <template> 
    <div> 
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2> 
    </div> 
</template>

<script> 
    export default { 
        name:'Student', 
        data() { 
            return { 
                name:'cess', 
                age:20 
            } 
        },
    } 
</script>
  • App.vue
    <template> 
    <div> 
        <School></School> 
        <Student></Student> 
    </div> 
</template> 

<script> 
    import School from './School.vue';
    import Student from './Student.vue';

    export default { 
        name:'App', 
        components:{ 
            School,
            Student 
        } 
    }
</script>
  • main.js
    import App from './App.vue';

new Vue({ 
    template: `
        <App></App>
    `, 
    el: '#root', 
    components: {
        App
    } 
})
  • index.html
    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>单文件组件练习</title>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root"></div>

    <script src="../js/vue.js"></script>
    <script src="./main.js"></script>
</body>
</html>
怀梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
.vue 组件代码段
岁月如歌去，十年弹指间
07-19 938
{ "Print to console": { "prefix": "vuee", "body": [ "&lt;template&gt;", " ", "&lt;/template&gt;", "&lt;script&gt;&quo
【Vue2从入门到精通】认识Vue组件化，这篇文章就够了
全栈弄潮儿
03-18 510
当我们在构建Vue应用程序时，组件化是一个非常重要的概念。Vue组件化将应用程序划分为更小、更可重用的部分，从而使应用程序更易于维护、测试和扩展。
如何在vscode中创建自己的vue3组件代码块
qq_61233877的博客
05-25 4504
使用时可以一步生成组件的基本结构，可以极大方便我们的开发。包含 composition api 的组件模板和 setup语法糖组件的模板
vue展示代码块，提供显示行数，复制功能
漫漫L路的博客
03-31 3430
实现展示代码块功能组件，使用highlight.js完成高亮显示，clipboard插件完成复制功能，并且提供行数展示。
vue组件化编程-todoList案例.zip
07-14
在“vue组件化编程-todoList案例.zip”中，我们可以深入学习如何使用Vue进行组件化开发，构建一个基本的待办事项（Todo List）应用。这个案例将涵盖以下关键知识点： 1. **Vue组件基础**： - 组件是Vue的核心特性...
十四天学会Vue-Vue 组件化编程（理论+实战）（第四天）
06-01
在“十四天学会Vue-Vue组件化编程”的学习过程中，第四天的主题可能是深入理解和实践单文件组件（Single File Component，简称SFC）。今天我们将详细探讨这一重要知识点。 1. **Vue组件基础** Vue组件是可重用的...
vue - Vue组件化编程.doc
07-08
总结，Vue组件化编程让开发者能够以模块化的方式组织和管理代码，提高开发效率和代码质量。通过单文件组件，我们可以清晰地看到组件的全貌，同时利用组件的复用性和嵌套性构建出灵活多变的用户界面。理解和熟练运用...
Vue组件化开发思考
08-28
Vue组件化开发是一种高效、可复用且易于维护的编程方式，它将应用程序的不同部分划分为独立的组件，每个组件负责特定的功能。组件可以像拼积木一样组合在一起，构建出复杂的用户界面。在深入讨论Vue组件化之前，我们...
Vue.extend 编程式插入组件的实现
10-15
### Vue.extend 编程式插入组件的实现 在使用Vue.js框架开发Web应用时，组件是构建...Vue.extend提供了一种灵活的方式来动态创建和管理Vue组件，使得组件的使用和维护更加方便，特别适用于动态内容或复杂的交互场景。
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
10-20
主要介绍了Vue.js实现一个漂亮、灵活、可复用的提示组件示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
Vue 页面高亮显示代码块
weixin_38984353的博客
08-16 4294
Vue 页面可以基于 vue-prism-editor 实现高亮显示代码块，支持 Vue 2.x 和 Vue 3.x。
什么是Vue组件？如何创建和使用组件？
2301_77795034的博客
05-26 1872
组件就是Vue应用中的小模块，可以重复使用的代码块。组件使得开发大型应用更加容易，因为你可以把代码分成多个小块，每个小块都负责特定的任务，就像搭乐高积木一样。
Vue组件开发（初学者也能学会）
rousongxiaobei_的博客
08-10 1588
<hr>二娃 ---{{age}}---{{shuxing}}<button @click="jiaoName">叫爷爷</button><button @click="dogxi">给爷爷送东西</button>
前端通过Vue-Code-Highlight插件让代码块高亮
weixin_48674314的博客
02-20 2032
前端通过Vue-Code-Highlight插件让代码块高亮
vue中显示代码块 vue-prism-editor
c_qianxia5040的博客
04-07 6772
实现效果： 可输入代码，并且代码语法高亮 支持编辑和不可编辑模式 提交到后端到代码内容为字符串格式 搜了很多资料，大都是复制粘贴，写的都一样，还有错的地方，所以整理出一个稍微比较完善的方便你我 ⭐⭐ 实现步骤：⭐⭐ 1、安装依赖 npm install vue-prism-editor vue-prism-editor需要依赖 prismjs，所以需要安装prismjs npm install prismjs 2、在需要使用vue-prism-editor的组件中引入 import { Pri
vue 常用代码块个人笔记
yh8899abc的博客
11-25 1466
vue 工作中常用的代码块懒加载组件懒加载路由懒加载 懒加载 组件懒加载 components: { try: () => import(/* webpackChunkName: 'try' */ './try.vue'), }, 路由懒加载 { path: '/try', name: 'try', component: () => import(/* webpackChunkName: 'try' */ '@/components/tr
vue如何快速创建单文件组件（类似react的rcc操作）? || vue自定义代码块！
Dark_programmer的博客
12-10 1083
创建Vue代码片段 1.code -> 首选项 -> 用户片段 2.输入 vue -> 选择 vue.json 3.自定义所需要的模版 需要注意一下几点： 所有代码片段都只在.vue文件中才生效 一个代码片段对应 JSON 对象的一个属性 单个代码片段自身也是一个 JSON 对象，包含prefix、body、description等属性 代码片段的语法也很简单： prefix表示识别符（前缀），编辑器会根据识别符的输入插入代码片段body中的内容 body表示最终插入到文档中的代码内
vscode设置自动生成vue组件代码块
会写Bug的攻城狮
10-10 963
ctrl+shift+p -> 输入snippet -> 首选项：配置用户代码片段 -> 输入vue 在里面添加如下内容 "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>\n", " </div>", "&lt...
基于vue3和audio封装的简易音频播放器
最新发布
weixin_43734732的博客
08-23 192
【代码】基于vue3和audio封装的简易音频播放器。
Vue的组件化编程的实例
04-25
好的，下面是一个Vue组件化编程的实例： ``` <template> <div> <h1>{{ title }}</h1> <p>{{ message }}</p> </div> </template> <script> export default { name: "example-component", props: { title: String, message: String, }, }; </script> ``` 在这个例子中，我们定义了一个名为example-component的Vue组件。通过props属性我们可以传递数据进来，并在组件中进行渲染。在这个组件中我们传递了title和message两个字符串类型的数据，分别在h1和p标签中进行展示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值