前端入门之VUE--vue组件化编程

前言

VUE是前端用的最多的框架；
这篇文章是本人大一上学习前端的笔记；
欢迎点赞 + 收藏 + 关注，本人将会持续更新。

文章目录

- - 2、Vue组件化编程

2、Vue组件化编程

2.1、组件

组件：用来实现局部功能的代码和资源的集合

2.2、基本使用

三大步骤：
1. 定义组件（常见组件）
2. 注册组件
3. 使用组件（写组件标签）

html 复制代码

<div id="root">
    //3.写组件标签
    <school></school>
    <student></student>
</div>
<script>
    //1.创建school组件
    const school = Vue.extend({
        //不要写el
        template: `
			<div class="demo">
			<h2>学校名称：{{schoolName}}</h2>
			<h2>学校地址：{{address}}</h2>	
			</div>
		`,
        data(){
            return {
                schoolName: '尚硅谷',
                address: '北京昌平'
            }
        }
    })，
    //1.创建student组件
    const student = Vue.extend({
        template:`
				<div>
					<h2>学生姓名：{{studentName}}</h2>
					<h2>学生年龄：{{age}}</h2>
				</div>
		`,
        data() {
            return {
                studentName: 'cy',
                age: 20
            }
}
    })
    
    //创建vm
    new Vue({
        el: '#root',
        
        //2.注册组件（局部注册）
        components: {
            school,
            student
        }
    })
</script>

关于组件名：

一个单词组成
- 第一种写法（首字母小写）
- 第二种写法（首字母大写）
多个单词组成：
- 第一种写法：如：my-school
- 第二种写法：如：MySchool（需要Vue脚手架支持）

注意：组件名尽可能避免HTML已经有的元素名称

关于组件标签：
- 第一种写法：
- 第二种写法：

html 复制代码

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

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义student组件
		const student = Vue.extend({
			template:`
				<div>
					<h2>学生名称：{{name}}</h2>	
					<h2>学生年龄：{{age}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'JOJO',
					age:20
				}
			}
		})

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

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

		//定义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>

2.2.1、VueComponent

school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！
关于this指向：
1. 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是VueComponent实例对象
2. new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed`中的函数它们的this均是Vue实例对象

VueComponent.prototype.proto === Vue.prototype