其他分享
首页 > 其他分享> > Vue学习第四天(组件的相关操作)

Vue学习第四天(组件的相关操作)

作者:互联网

Vue学习第四天(组件的相关功能)
,今天写了两个博文,第一篇补上了昨天的知识点,这一篇简单总结下,今天的学习内容,今天主要学习了vue中的组件的概念,说起组件化的创作理念,就要在提一提我们之前的分层概念,也就是模块化思想,这种思想在后端代码中很常见

  1. 模块化,将每一层的代码功能细化
  2. 组件化,按照前台的网页结构进行的网页拆分
    下面简单写一下,vue中组件究竟是如何使用的吧
    第一种方法,我们先进行继承模板的制作,在此基础上进行容器的制作
var com1 = Vue.extend({
			   //模板即我们要渲染的html结构
			   template: '<h3>我的一个道姑朋友</h3>'
		   })
		   //如果此处使用了驼峰命名,我们在页面使用时应该去掉驼峰加上-
		   Vue.component('mycpm1', com1)

不难看出,在继承模板中,我们定义了一个属性template,这个属性,我们在后面会经常提到,这是当前组件的html结构,在得到这个继承模板以后,我们在使用vue的内置方法制作组件,组件名为mycpm1,继承自模板com1,在使用时,我们只需要将标签放入到网页中即可

<div id="app1">
	<mycpm1></mycpm1>
</div>

挺简单的吧
下面介绍第二种方式创建实例,我们将使用更简洁的方式,那就是,将两步合成一步

Vue.component('mycpm3', {
			   template:'#emp1'
		   })

不难看到,此时的template属性后面跟上了一个选择器,我们在网页上新建一个template标签,让他的id等于emp1,然后就能调用了

<template  id="emp1">
			<div>
				<input type="text" name="" id="" value="" />
				<button type="button">戳我</button>
			</div>
		</template>

这里顺便提一下,我们的组件理论上只能有一个根,即根元素是单一的,否则,vue会报错,上面这种定义方法,和第一种的调用方法,完全一致
另外,对于组件而言,她也有自己的数据,但是这里的data,不再是一个属性,而是一个方法,为的是,多个实例使用同一个模板时,它们之间的数据不会混乱,就像这样

var vue = new Vue({
			   el:'#app1',
			   data:{
				   
			   },
			   methods:{
				   
			   },
			   components:{
				   //可以自定义一个私有化的组件,仅供当前vue实例使用
				   login:{
					   template:'<h3>误杀</h3>'
				   },
				   //也可以在组件中定义一个data方法,用于处理个性化的数据
				   mytext:{
					   template:'<h3>南朝四百八十寺,多少楼台烟雨中-->{{msg}}</h3>',
					   data:function(){
						   return {
							   msg:"金光闪闪的五个字"
						   }
					   }
				   }
			   }
		   })

而且,我们还可以在组件中带哦用,我们的数据,可以直接使用插值表达式的方式进行操作
对于昨天的动画效果,我们也可以搬到组件中来使用,同样,我们首先要把使用动画的html结构使用标签包裹住,就像下面这样

<div id="app4">
			<button v-on:click="denglu">登陆</button>
			<button v-on:click="zhuce">注册</button>
			<!--可以使用v-bind:is指定不同的组件id,用一个元素,切换两个不同组件-->
			<!--通过mode属性控制组件切换,先出后进,不会冲突-->
			<transition mode="out-in">
				<component v-bind:is="com1"></component>
			</transition>
		</div>

这个组件这里,还是用了一个新的知识点,那就是v-bind:is,这里是我们为当前组件绑定了一个组件,细心的读者可能已经发现,我们使用的标签是通配标签,也就是说,这个地方可以是任何我们定义过的组件,此时,这个地方是什么标签取决于com1的值。我们不妨在vue实例中定义一个数据com1,在定义一个函数,用来切换com1的值,就能使用一个标签完成两个标签的切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页</title>
		<script src="js/vue.js" type="text/javascript"></script>
		<style>
			
			.v-enter{
				opacity: 0;
				transform: translateZ(150px);
			}
			.v-leave-to{
				opacity: 0;
				transform: translateX(150px);
			}
			
			.v-enter-active,
			.v-leave-active{
				transition: all 0.6s ease;
			}
		</style>
	</head>
	<body>
		<div id="app3">
			<button v-on:click="denglu">登陆</button>
			<button v-on:click="zhuce">注册</button>
			<login v-if="flag"></login>
			<register v-else="flag"></register>
		</div>
		<div>-----------------------------------------------</div>
		<div id="app4">
			<button v-on:click="denglu">登陆</button>
			<button v-on:click="zhuce">注册</button>
			<!--可以使用v-bind:is指定不同的组件id,用一个元素,切换两个不同组件-->
			<!--通过mode属性控制组件切换,先出后进,不会冲突-->
			<transition mode="out-in">
				<component v-bind:is="com1"></component>
			</transition>
		</div>
		<template id="emp1">
			<h2>我的是登录页</h2>
		</template>
		<template id="emp2">
			<h2>先生需要注册哦</h2>
		</template>
		<script>
			var vue = new Vue({
				el:'#app3',
				data:{
					flag:true
				},
				methods:{
					denglu:function(){
						this.flag = true
					},
					zhuce:function(){
						this.flag = false
					}
				},
				components:{
					login:{
						template:'#emp1'
					},
					register:{
						template:'#emp2'
					}
				}
			})
			var vue1 = new Vue({
				el:'#app4',
				data:{
					com1:"login"
				},
				methods:{
					denglu:function(){
						this.com1 = "login"
					},
					zhuce:function(){
						this.com1 = "register"
					}
				},
				components:{
					login:{
						template:'#emp1'
					},
					register:{
						template:'#emp2'
					}
				}
			})
		</script>
	</body>
</html>

最后,我们讲一些父子标签的问题,在子标签中,我们可以使用父组件中的数据和函数,不过要通过一些特殊的方式,当我们要使用数据时,我们需要三步

  1. 在引用时使用v-bind:xxx=“data”,将数据传送过来
  2. 在组件中使用props接受一下绑定的属性
  3. 在组件模板中使用即可,但是传递过来的数据都是只读的
    在html中
<div id="app1">
			<!--在组件上绑定函数,用来传递实例的方法给组件-->
			<login v-bind:pmsg="msg" v-on:fun="show"></login>
		</div>
		<template id="emp1">
			<div>
				<h3>{{pmsg}}, 牧童遥指杏花村<h3>
				<button v-on:click="push">push</button>
			</div>
		</template>

在VUE实例中

var vue = new Vue({
				el:'#app1',
				data:{
					msg:"借问酒家何处有"
				},
				methods:{
					show:function(){
						console.log("我是父容器的一个方法,我会输出666");
					}
				},
				components:{
					//理论上,私有组件无法访问到所在实例的内容
					//但是我们可以通过属性绑定的方式,将数据传递过来
					//1. 在引用时使用v-bind:xxx="data",将数据传送过来
					//2. 在组件中使用props接受一下绑定的属性
					//3. 在组件模板中使用即可,但是传递过来的数据都是只读的
					login:{
						template:'#emp1',
						props:['pmsg'],
						methods:{
							push:function(){
								//在组件自身的方法中,我们可以调用传入的方法
								//不过必须使用this.$emit触发
								this.$emit('fun')
							}
						}
					}
				}
			})

使用父组件的方法,则需要先进行事件绑定,在使用组件内置的方法this.$emit(‘方法名’)即可调用
希望生活早日恢复正轨,为之则易,不为则难

zzuli_xiaomingke 发布了53 篇原创文章 · 获赞 3 · 访问量 1万+ 私信 关注

标签:vue,com1,第四天,Vue,template,使用,组件
来源: https://blog.csdn.net/zzuli_xiaomingke/article/details/104201416