一、非单文件组件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>非单文件组件</title>
6 <script src="js/vue.js"></script>
7 </head>
8 <body>
9 <!--
10 Vue中使用组件的三大步骤：
11 一、定义组件(创建组件)
12 二、注册组件
13 三、使用组件(写组件标签)
14 一、如何定义一个组件？
15 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
16 区别如下：
17 1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
18 2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
19 备注：使用template可以配置组件结构。
20 二、如何注册组件？
21 1.局部注册：靠new Vue的时候传入components选项
22 2.全局注册：靠Vue.component('组件名',组件)
23 三、编写组件标签：
24 <school></school>
25 -->
26 <!--
27 几个注意点：
28 1.关于组件名:
29 一个单词组成：
30 第一种写法(首字母小写)：school
31 第二种写法(首字母大写)：School
32 多个单词组成：
33 第一种写法(kebab-case命名)：my-school
34 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
35 备注：
36 (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
37 (2).可以使用name配置项指定组件在开发者工具中呈现的名字。
38 2.关于组件标签:
39 第一种写法：<school></school>
40 第二种写法：<school/>
41 备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。
42 3.一个简写方式：
43 const school = Vue.extend(options) 可简写为：const school = options
44 -->
45 <div id="root">
46 <hello></hello>
47 <hr>
48 <h1>{{msg}}</h1>
49 <!-- 第三步：编写组件标签 -->
50 <school></school>
51 <hr>
52 <!-- 第三步：编写组件标签 -->
53 <student></student>
54 </div>
55 </body>
56 <script type="text/javascript">
57
58 // 第一步：创建school组件
59 const school = Vue.extend({
60 template:`
61 <div>
62 <h2>学校名称：{{schoolName}}</h2>
63 <h2>学校地址：{{address}}</h2>
64 <button @click="showName">点我提示学校名</button>
65 </div>
66 `,
67 data(){
68 return{
69 schoolName:"京东",
70 address:"北京"
71 }
72 },
73 methods:{
74 showName(){
75 alert(this.schoolName)
76 }
77 }
78 })
79 // 第一步：创建student组件
80 const student = Vue.extend({
81 template:`
82 <div>
83 <h2>学生姓名：{{studentName}}</h2>
84 <h2>学生年龄：{{age}}</h2>
85 </div>
86 `,
87 data(){
88 return{
89 studentName:"张三",
90 age:18
91 }
92 }
93 })
94
95 //第一步：创建hello组件
96 const hello = Vue.extend({
97 template:`
98 <div>
99 <h2>你好啊！{{name}}</h2>
100 </div>
101 `,
102 data(){
103 return {
104 name:'Tom'
105 }
106 }
107 })
108
109 Vue.component('hello',hello)
110
111 new Vue({
112 el:'#root',
113 data: {
114 msg:'你好啊！'
115 },
116 //第二步：注册组件（局部注册）
117 components:{
118 school,
119 student
120 }
121 })
122 </script>
123 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>非单文件组件2</title>
6 <script src="js/vue.js"></script>
7 </head>
8 <body>
9 <div id="root">
10 <h1>{{msg}}</h1>
11 <app></app>
12 </div>
13 </body>
14 <script type="text/javascript">
15 const student = Vue.extend({
16 template:`
17 <div>
18 <h2>学生姓名：{{name}}</h2>
19 <h2>学生年龄：{{age}}</h2>
20 </div>
21 `,
22 data(){
23 return{
24 name:"张三",
25 age:18
26 }
27 }
28 })
29
30 const school = Vue.extend({
31 template: `
32 <div>
33 <h2>学校名称：{{name}}</h2>
34 <h2>学校地址：{{address}}</h2>
35 <student></student>
36 </div>
37 `,
38 data(){
39 return{
40 name:"京东",
41 address:"北京"
42 }
43 },
44 components:{
45 student
46 }
47 })
48
49 //定义hello组件
50 const hello = Vue.extend({
51 template:`<h1>{{msg}}</h1>`,
52 data(){
53 return {
54 msg:'欢迎来到京东学习！'
55 }
56 }
57 })
58
59 //定义app组件
60 const app = Vue.extend({
61 template:`
62 <div>
63 <hello></hello>
64 <school></school>
65 </div>
66 `,
67 components:{
68 school,
69 hello
70 }
71 })
72
73 new Vue({
74 el:'#root',
75 data: {
76 msg:'你好啊！'
77 },
78 components:{
79 app
80 }
81 })
82 </script>
83 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>非单文件组件3-VueComponent</title>
6 <script src="js/vue.js"></script>
7 </head>
8 <body>
9 <!--
10 关于VueComponent：
11 1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
12 2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
13 即Vue帮我们执行的：new VueComponent(options)。
14 3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
15 4.关于this指向：
16 (1).组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
17 (2).new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
18 5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
19 Vue的实例对象，以后简称vm。
20
21 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype !!!!!!!!!
22 为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
23 -->
24 <div id="root">
25 <h1>{{msg}}</h1>
26 <school></school>
27 <hello></hello>
28 </div>
29 </body>
30 <script type="text/javascript">
31
32 const school = Vue.extend({
33 name:"school",
34 template: `
35 <div>
36 <h2>学校名称：{{name}}</h2>
37 <h2>学校地址：{{address}}</h2>
38 <button @click="showName">点我提示学校名</button>
39 </div>
40 `,
41 data(){
42 return{
43 name:"京东",
44 address:"北京"
45 }
46 },
47 methods: {
48 showName(){
49 console.log('showName',this)
50 }
51 },
52 })
53
54 const test = Vue.extend({
55 template:`<span>jingdong</span>`
56 })
57
58 //定义hello组件
59 const hello = Vue.extend({
60 template:`
61 <div>
62 <h2>{{msg}}</h2>
63 <test></test>
64 </div>
65 `,
66 data(){
67 return {
68 msg:'欢迎来到京东学习！'
69 }
70 },
71 components:{test}
72 })
73
74 // console.log('@',school)
75 // console.log('#',hello)
76
77 const vm = new Vue({
78 el:'#root',
79 data: {
80 msg:'你好啊！'
81 },
82 components:{
83 school,
84 hello
85 }
86 })
87 </script>
88 </html>
二、单文件组件
1、index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 </head> 7 <body> 8 <div id="root"></div> 9 <script type="text/javascript" src="../js/vue.js"></script> 10 <script type="text/javascript" src="./main.js"></script> 11 </body> 12 </html>
2、main.js
1 import App from "./App";
2
3 new Vue({
4 el:'#root',
5 template: `<App></App>`,
6 component:{
7 App
8 }
9 })
3、App.vue
1 <template>
2 <div>
3 <School></School>
4 <Student></Student>
5 </div>
6 </template>
7
8 <script>
9 import School from "./School";
10 import Student from "./Student";
11
12 export default {
13 name:'App',
14 components:{
15 School,
16 Student
17 },
18 data(){
19 return {
20
21 }
22 }
23 }
24 </script>
4、School.vue
1 <template>
2 <div class="demo">
3 <h2>学校名称：{{name}}</h2>
4 <h2>学校地址：{{address}}</h2>
5 <button @click="showName">点我提示学校名</button>
6 </div>
7 </template>
8
9 <script>
10 export default {
11 name:'School',
12 data(){
13 return {
14 name:'京东',
15 address:'北京'
16 }
17 },
18 methods: {
19 showName(){
20 alert(this.name)
21 }
22 },
23 }
24 </script>
25
26 <style>
27 .demo{
28 background-color: orange;
29 }
30 </style>
5、Student.vue
1 <template>
2 <div>
3 <h2>学生姓名：{{name}}</h2>
4 <h2>学生年龄：{{age}}</h2>
5 </div>
6 </template>
7
8 <script>
9 export default {
10 name:'Student',
11 data(){
12 return {
13 name:'张三',
14 age:18
15 }
16 }
17 }
18 </script>
标签：school,Vue,const,name,编程,组件,data From： https://www.cnblogs.com/bijian/p/17537338.html