vue-vue2核心8-组件化编程-非单文件组件(2)

vue核心

组件化编程

组件的嵌套

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>组件的嵌套title>
		
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		<div id="root">
			
		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//定义student组件
		const student = Vue.extend({
			name:'student',
			template:`
				

学生姓名:{{name}}

学生年龄:{{age}}

`
, data(){ return { name:'尚硅谷', age:18 } } }) //定义school组件 const school = Vue.extend({ name:'school', template:`

学校名称:{{name}}

学校地址:{{address}}

`
, data(){ return { name:'尚硅谷', address:'北京' } }, //注册组件(局部) components:{ student } }) //定义hello组件 const hello = Vue.extend({ template:`

{{msg}}

`
, data(){ return { msg:'欢迎来到尚硅谷学习!' } } }) //定义app组件 const app = Vue.extend({ template:`
`
, components:{ school, hello } }) //创建vm new Vue({ template:'', el:'#root', //注册组件(局部) components:{app} })
script> html>

关于VueComponent

  	关于VueComponent:
					1.school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。

					2.我们只需要写,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。
DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>VueComponenttitle>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		
		<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:`
				

学校名称:{{name}}

学校地址:{{address}}

`
, data(){ return { name:'尚硅谷', address:'北京' } }, methods: { showName(){ console.log('showName',this) } }, }) const test = Vue.extend({ template:`atguigu` }) //定义hello组件 const hello = Vue.extend({ template:`

{{msg}}

`
, data(){ return { msg:'你好啊!' } }, components:{test} }) // console.log('@',school) // console.log('#',hello) //创建vm const vm = new Vue({ el:'#root', components:{school,hello} })
script> html>

一个重要的内置关系

1.一个重要的内置关系:VueComponent.prototype.proto === Vue.prototype
2.为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>一个重要的内置关系title>
		
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		
		<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:`
				

学校名称:{{name}}

学校地址:{{address}}

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

vue-vue2核心8-组件化编程-非单文件组件(2)_第1张图片

你可能感兴趣的:(#,vue基础,vue.js,javascript,前端)