18.非单文件组件

于 2021-11-27 16:01:06 发布
阅读量135 收藏
点赞数
分类专栏： Vue学习 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ma628991/article/details/121578702
版权

01.基本使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 创建新的页面，记得引入。 -->
    <script type='text/javascript' src="../JS/vue.js"></script>

</head>

<body>
    <div id="root">
        <!-- ③.引入 -->
        <hello></hello>
        <school></school>
        <hr>
        <hello></hello>
        <student></student>
    </div>
    <hr>

    <!-- 全局变量的样式 -->
    <div id='demo'>
        <hello></hello>
    </div>

</body>
<script>
    Vue.config.productionTip = false;

    // ①.创建school组件
    const school = Vue.extend({
        // 在创建组件时，不需要写：el: '#root' 
        template:
            ` <div>
            <h2>学生：{{schoolName}}</h2>
            <h2>年龄：{{address}}</h2>
              </div>
    `,
        data() {  // data要写成函数，方便调用，以及多次调用的时候，修改不影响别的调用者。
            return {
                schoolName: 'vue学习',
                address: '北京'
            }
        }
    })

    //  ①.创建student组件
    const student = Vue.extend({
        // 在创建组件时，不需要写：el: '#root' 
        template:
            ` <div>
        <h2>学校：{{studentName}}</h2>
        <h2>地址：{{age}}</h2>
              </div>
    `,
        data() {  // data要写成函数，方便调用，以及多次调用的时候，修改不影响别的调用者。
            return {
                studentName: '马威',
                age: 18
            }
        }
    })

    // 测试全局变量，写hello组件
    const hello = Vue.extend({
        template:
            ` <div>
        <h2>hello,Tom</h2>
              </div>
    `,
    })

    // 注册组件，全局
    Vue.component('hello', hello)

    // 注册组件（局部）
    new Vue({
        el: '#root',
        data: {

        },
        // ②.components注册组件（局部）
        components: {
            school,
            student
        }
    })

    // 我们重新创建一个vm，测试全局变量
    new Vue({
        el: '#demo',
    })
</script>


</html>

02.几个注意点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>几个注意点</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</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 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>

03.组件嵌套

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JS/vue.js"></script>
</head>

<body>
    <div id='root'>
        <!-- 如果我们不想在结构写app，我们可以在vm的template中写，拉到最底下看吧 -->
        <!-- <app></app> -->
    </div>
</body>
<script>
    Vue.config.productionTip = false;


    // 定义student组件，是school的爸爸
    // 我们把student嵌套在school中,组件代码必须写在school前面
    const student = Vue.extend({
        template: `<div>
        <h2>名字：{{studentName}}</h2>
        <h2>年龄：{{age}}</h2>
            </div>`,
        data() {
            return {
                studentName: '马威',
                age: '18'
            }
        }
    })

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

    // 定义hello组件，是school的兄弟
    const hello = Vue.extend({
        template: `<div>
        <h2>hello：{{friend}}</h2>
            </div>`,
        data() {
            return {
                friend: 'Tom'
            }
        },
    })

    // 拓展：在vue下面其实还有一层，叫app，vue-app-在到下面的组件
    // 定义app组件，管理组件
    const app = Vue.extend({
        // 把在结构想写的东西，有app管理。
        template: `<div>
        <hello></hello>
        <school></school>
    </div>`,
        components: {
            // 可简写school，但是初学，先不简写
            // 把在vm管理的东西，有app管理，让vm管理app
            school: school,
            // 此时我们不用写student，因为她的爸爸是school,管理她爸爸即可
            hello: hello
        }
    })


    new Vue({
        el: '#root',
        template: `<app></app>`,
        data: {

        },
        components: { app }

    })
</script>

</html>

04.VueComponent

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>VueComponent</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</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 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('@',school)
	// console.log('#',hello)

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

</html>

05.一个重要的内置关系

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>一个重要的内置关系</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
				2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<school></school>
		</div>
	</body>

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

M丶GentleMan
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值