学习vue.js-CSDN博客

本文链接：https://blog.csdn.net/qq_65672119/article/details/127110631

该博客展示了如何在Vue.js中创建和使用组件。首先，创建了一个包含学校名称和地址的基本组件，以及一个显示学生姓名和年龄的学生组件。接着，创建了学校组件和课程组件，分别展示学校信息和课程名称，并将学生组件作为子组件嵌套。最后，通过`Vue.extend`创建了应用程序组件，将学校和课程组件组合在一起。在组件中，还定义了点击事件处理函数来展示信息。

摘要由CSDN通过智能技术生成

// 第一步创建模板==html
<template>
<div class="demo">
学校名称：{{name}}
学校地址：{{address}}
<button @click="btn">点击显示学校名称</button>
</div>
</template>
// 第二步创建js模块
<script>
// 向外暴露文件
export default {
name:"school",
data() {
return {
name:"江西信息",
address:"青云谱区",
}
},
methods: {
btn(){
alert(this.name);
}
},

// 学生组件
	const student = Vue.extend({
	name:"student",
	template:`
	<div>
	<h1>学生姓名：{{name}}</h1>
	<h1>学生年龄：{{age}}</h1>
	<button @click="btn">点击</button>
	</div>
	`,
	data() {
	return {
	name:"张三",
	age:18
	}
	},
	methods:{
	btn(){
	console.log("触发了点击");
	console.log(this);
	}
	}
	})
	// 学校组件
	const scholl = Vue.extend({
	name:"scholl",
	template:`
	<div>
	<h1>学校：{{name}}</h1>
	<h1>班级：{{age}}</h1>
	<student></student>
	</div>
	`,
	data() {
	return {
	name:"江西信息",
	age:"就业班"
	}
	},
	components:{
	student
	},
	methods:{
	btn(){
	console.log("触发了点击111111111111");
	console.log(this);
	}
	}
	})
	// 学习课程
	const curriculum = Vue.extend({
	name:"curriculum",
	template:`
	<div>
	<h1>课程：{{name}}</h1>
	</div>
	`,
	data() {
	return {
	name:"学习vue.js",
	}
	},
	components:{
	student
	},
	methods:{

	}
	});
	// 注册app
	const app = Vue.extend({
	name:"app",
	template:`
	<div>
	<scholl></scholl>
	<curriculum></curriculum>
	</div>
	`,
	data() {
	return {

	}
	},
	components:{
	scholl,
	curriculum
	},
	methods:{

	}
	})
	const vm = new Vue({
	// template通过模板形式覆盖掉原本的模板的信息
	// template:`
	// <app></app>
	// `,
	el:"#app",
	data() {
	return {

	}
	},
	// 局部注册
	components:{
	app
	},
	methods: {

	},
	})
	// VueComponents是Vue.extend生成的，并不是创建的
	// 使用定义的组件名称，vue会new VueComponents
	// Vue.extend创建的都是独立的组件
	// 每个组件中的this指向自己的VueComponents
	// new Vue中this指向Vue实例
	// VueComponents简称vc组件实例对象
	// VueComponents.prototype.__proto__ == Vue.prototype
	console.log(student);
	console.log(vm);