Vue学习之--------组件在Vue脚手架中的使用（代码实现）（2022/7/24）

文章目录

1、第一步编写组件
- 1.1 编写一个展示学校的组件
- 1.2 定义一个展示学生的信息组件
2、第二步引入组件
3、制作一个容器
4、使用Vue接管容器
5、实际效果
6、友情提示：
7、项目的目录结构

1、第一步编写组件

template中进行页面结构（必须要有一个根节点（div））
script 中进行数据的交互操作、data、method、watch…
style 进行页面样式设计
注意：需要向外抛出组件

1.1 编写一个展示学校的组件

<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: pink;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

1.2 定义一个展示学生的信息组件

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2、第二步引入组件

1、引入组件
2、注册组件
3、在指定位置使用

<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>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3、制作一个容器

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myvuetitle>
  head>
  <body>
    <div id="app">div>
    
  body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13

4、使用Vue接管容器

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16