vue2基础知识点（5）组件化编程

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量108 收藏
点赞数
分类专栏： # vue2基础知识点 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44242181/article/details/124964147
版权

王元肉==>个人主页

大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。

推荐阅读

文章结构

非单文件组件

基本使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>基本使用</title>
</head>

<body>
    <!-- 
			Vue中使用组件的三大步骤：
					一、定义组件(创建组件)
					二、注册组件
					三、使用组件(写组件标签)

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

			二、如何注册组件？
							1.局部注册：靠new Vue的时候传入components选项
							2.全局注册：靠Vue.component('组件名',组件)

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

    <div id="root2">
        <hello></hello>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script type="text/javascript">
    Vue.config.productionTip = false

    //第一步：创建school组件
    const school = Vue.extend({
        template: `
				<div class="demo">
					<h2>学校名称：{{schoolName}}</h2>
					<h2>学校地址：{{address}}</h2>
					<button @click="showName">点我提示学校名</button>	
				</div>
			`,
        // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
        // data一定要写成函数返回值的形式，写成函数返回值的形式每次调用都会返回一个新的对象，
        // 当在别处修改对象的时候，不会连带着连锁反应修改掉所有的对象
        data() {
            return {
                schoolName: '尚硅谷',
                address: '北京昌平'
            }
        },
        methods: {
            showName() {
                alert(this.schoolName)
            }
        },
    })

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

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

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

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

    new Vue({
        el: '#root2',
    })
</script>

</html>

在这里插入图片描述

组件命名规则与声明简写

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>几个注意点</title>
</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">
        <h1>{{msg}}</h1>
        <school></school>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script type="text/javascript">
    Vue.config.productionTip = false

    //定义组件
    const s = Vue.extend({
        name: 'atguigu',
        template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
				</div>
			`,
        data() {
            return {
                name: '尚硅谷',
                address: '北京'
            }
        }
    })

    new Vue({
        el: '#root',
        data: {
            msg: '欢迎学习Vue!'
        },
        components: {
            school: s
        }
    })
</script>

</html>

组件的嵌套

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>组件的嵌套</title>
</head>

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

    </div>
</body>
<!-- 引入Vue -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

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

    //定义school组件
    const school = Vue.extend({
        name: 'school',
        template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<student></student>
				</div>
			`,
        data() {
            return {
                name: '尚硅谷',
                address: '北京'
            }
        },
        //注册组件（局部）
        components: {
            student
        }
    })

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

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

    //创建vm
    new Vue({
        template: '<app></app>',
        el: '#root',
        //注册组件（局部）
        components: {
            app
        }
    })
</script>

</html> app } })
</script>

</html>

VueComponent

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>VueComponent</title>
</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(options)配置中：
											data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

						5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
							Vue的实例对象，以后简称vm。
		-->
    <!-- 准备好一个容器-->
    <div id="root">
        <school></school>
        <hello></hello>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script type="text/javascript">
    Vue.config.productionTip = false

    //定义school组件
    const school = Vue.extend({
        name: 'school',
        template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showName">点我提示学校名</button>
				</div>
			`,
        data() {
            return {
                name: '尚硅谷',
                address: '北京'
            }
        },
        methods: {
            showName() {
                console.log('showName', this)
            }
        },
    })

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

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

    console.log("hello", hello);
    console.log("school", school);

    //创建vm
    const vm = new Vue({
        el: '#root',
        components: {
            school,
            hello
        }
    })

    console.log("vm", vm);
</script>

</html>

在这里插入图片描述

VueComponent.prototype.proto === Vue.prototype

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>一个重要的内置关系</title>
</head>

<body>
    <!-- 
				1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
				2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
		-->
    <!-- 准备好一个容器-->
    <div id="root">
        <school></school>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    Vue.prototype.x = 99

    //定义school组件
    const school = Vue.extend({
        name: 'school',
        template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showX">点我输出x</button>
				</div>
			`,
        data() {
            return {
                name: '尚硅谷',
                address: '北京'
            }
        },
        methods: {
            showX() {
                console.log(this.x)
            }
        },
    })

    //创建一个vm
    const vm = new Vue({
        el: '#root',
        data: {
            msg: '你好'
        },
        components: {
            school
        }
    })


    //定义一个构造函数
    /* 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__)

    //程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
    Demo.prototype.x = 99

    console.log('@',d) */
</script>

</html>

在这里插入图片描述

单文件组件

Student单文件组件

<template>
	<div>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>

<script>
	 export default {
		name:'Student',
		data(){
			return {
				name:'张三',
				age:18
			}
		}
	}
</script>

School单文件组件

<template>
	<div class="demo">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="showName">点我提示学校名</button>	
	</div>
</template>

<script>
	 export default {
		name:'School',
		data(){
			return {
				name:'尚硅谷',
				address:'北京昌平'
			}
		},
		methods: {
			showName(){
				alert(this.name)
			}
		},
	}
</script>

<style>
	.demo{
		background-color: orange;
	}
</style>

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主入口文件

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

index.html单页面文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>练习一下单文件组件的语法</title>
</head>


<body>
    <!-- 准备一个容器 -->
    <div id="root"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script src="./src/main.js" type="module"></script>
</body>

</html>

在这里插入图片描述

原生script标签不支持js文件使用es6版本的语法，需要使用脚手架进行打包编译转换，也就是我们下一节需要学习的内容，vue-cli脚手架。

结束啦！

LiuJie_Boom
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue组件化编程-todoList案例.zip
07-14
在“vue组件化编程-todoList案例.zip”中，我们可以深入学习如何使用Vue进行组件化开发，构建一个基本的待办事项（Todo List）应用。这个案例将涵盖以下关键知识点： 1. **Vue组件基础**： - 组件是Vue的核心特性...
vue 3.0 基础知识点
01-14
通过上述知识点的学习，我们可以了解到 Vue 3.0 在前端开发领域的重要性和应用价值。无论是指令、数据绑定还是组件通信等方面，Vue 3.0 都提供了强大的工具和机制，帮助开发者构建高效、可维护的前端应用程序。
vue2快速安装环境，创建vue2项目教程(windows)
热门推荐
爱吃雪糕的小布丁的博客
05-06 2万+
1、安装环境   首先首先进入node.js（v12.13.0.msi版本，最新版可能npm版本太高了，会报错，不过卸载重新装低版本也行）官网安装node.js，node.js自带npm，node.js相当于后端的tomcat,是一个运行前端的服务器，npm相当于maven,是一个前端的包管理工具。自动帮配置好了环境变量。   官网地址：https://nodejs.org/en/   直接下载第一个即可，第一个时最多用户使用的版本，第二个时最新版。   下载之后，安装即可。全部默认安装就行了。该软件自动
vu2搭建框架-封装axios-router
pythonwork的博客
12-07 449
vue框架基础搭建
【前端项目】时间不够？刚学完vue2应该练的项目--todoList项目
薇z的博客
07-26 1278
该项目是一个非常简易的vu2项目,适合刚学习完vue2,或者是刚接触vue2的新手使用，但是又不想花费大量时间练大型项目的小伙伴。项目虽然小，但是涉及了最常用的增删改查功能，以及各组件之间进行传数据的方式。父子组件，自定义事件。全局事件总线等，有一定的练手意义............
vu2和vue3的区别
m0_72759446的博客
10-10 133
【代码】vu2和vue3的区别。
Vu2安装脚手架、创建项目以及库
Dteamdoat的博客
03-02 406
vue2安装脚手架以及插件
Vue3基础知识点速记图解
04-19
以上只是Vue3众多新特性的一部分，实际学习过程中，你还需要了解`setup`中的`return`、`emit`的使用、`Suspense`组件的深入理解、以及如何在项目中逐步迁移Vue2到Vue3等知识点。通过深入学习和实践，你将能熟练掌握...
十四天学会Vue-Vue 组件化编程（理论+实战）（第四天）
06-01
在Vue.js框架中，组件化编程是其核心特性之一，它极大地提高了代码的复用性和组织性。在“十四天学会Vue-Vue组件化编程”的学习过程中，第四天的主题可能是深入理解和实践单文件组件（Single File Component，简称...
Vue实现图形化积木式编程Vue前端源码
08-31
在这个项目中，Vue.js作为主要的前端框架，负责数据绑定、组件化、路由管理等核心功能，提供了一个高效且易于维护的开发环境。 2. **Vuetify**：Vuetify是基于Vue.js的Material Design组件库，它提供了丰富的预定义...
vu2响应式原理 代码分析
lzfengquan的博客
06-13 303
vue2响应式原理 代码分析
从0开始创建vue2项目
LlanyW的专栏
11-06 1833
1.安装称手工具 webstorm官网下载安装，然后重启系统，买个学习账号开始。2.安装Node.js官网，node -v可以查看安装的node.js版,我这里安装是16.18.0。
Vue2之常用指令
qq_73339471的博客
02-17 665
若不阻止，点击子盒子时，弹窗会同时弹出“父盒子”。而我们想要的效果是：点击子盒子时，只弹出“子盒子”。：v-show = “表达式”      表达式值 true表示显示，false表示隐藏。：v-if = “表达式”      表达式值 true表示存在，false表示不存在。：动态设置html中的标签属性，如src，href，title…：不频繁进行切换的场景，即：要么存在，要么不存在。：多次渲染整个元素，可以是数组，对象，数字…：v-html=“表达式”：v-model=“变量”
Vu2任何组件之间的传递参数方法（父子，兄弟，甚至其他）
weixin_43343144的博客
01-10 368
方案之一：Vue空实例+vm.$emit 和 vm.$on   实现原理：组件之间可以通过vm.$emit发射数据，通过vm.$on接收数据，在处理brother01 和brother02的时候，创建一个空Vue对象来发射与接收数据，任何组件之间，都可以来处理！  当然，父子关系的 建议用系统标签来完成，更简单：参考文档：https://blog.csdn.net/weixin_433431...
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 883
本文介绍了电子签名、图片合成、及预览功能
unplugin-vue-components 的作用是什么
前端原创分享，常年坚持记录和分享，全网阅读量超百万
07-25 376
总的来说,unplugin-vue-components 通过自动化组件的导入过程,大大简化了 Vue 项目的开发流程,提高了开发效率和代码质量。自动导入组件:无需手动 import 和注册组件,插件会自动识别并按需导入使用到的组件。支持第三方UI库:内置了多个流行UI库的解析器,可以自动导入第三方组件库的组件。灵活的配置:可以通过配置文件自定义导入行为,如排除某些组件或添加自定义解析器。支持全局组件:可以设置某些组件为全局组件,在所有地方都可以直接使用。支持自定义组件目录:可以配置多个自定义的组件目录。
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 652
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 79
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 430
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Vue2入门指南：从零开始到精通必备知识点
2. **组件化编程**：讲解了Vue组件的两种基本用法，一是通过`el`属性直接指定元素ID挂载，二是通过`vm.$mount()`将模板挂载到Vue实例上。强调了在组件化开发中，数据处理应该使用函数式数据选项，避免箭头函数导致`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LiuJie_Boom

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值