9.Vue组件

组件(Component)是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素,封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:

VUE组件-小白菜博客

9.1全局组件

所有实例都能用全局组件。

案例1:

    <div id="app">
        <mycomponent></mycomponent>
    </div>
     <script>
 	    //注册组件
         Vue.component("mycomponent",{
             template:'<li>这里是组件的内容</li>'
         });
         var v= new Vue({
             el:"#app",
         });
     </script>

说明:

注册组件
Vue.component("组件名称",{组件的属性})

案例2:

     	<div id="app">
			 <mymenu></mymenu>
		</div>
		
		<script>
			
		//注册组件	  mymenu:组件的名字  {}里面是组件的属性配置
		Vue.component("mymenu",{
			
			
		//data数据,这里的数据和vue实例中的数据不同,这里data类型是函数而非对象。	
		data:function(){
			return{
				count:0
			}
		},
		
		//组件的模板只能有一个根元素 
	    template:'<div><input type="button" value="-" @click="sub" />'+
	    '<input type="num" :value="count" /><input type="button" value="+" @click="plus" /></div>',
	    
	    //需要用到的方法
	    methods:{
	    	sub:function(){
	    		this.count--;
	    	},
	    	plus:function(){
	    		this.count++;
	    	}
	    	
	    }
	})
		
		
	var  v=new Vue({
		el:"#app"
	})
	</script>

9.2 如何在其它html页面访问vue组件

1.将组件内容写入一个vue页面中

welcome.vue

<template>
	<div>欢迎您!!{{msg}}</div>
</template>

<script>
module.exports = {
	
	data:function(){
		return {
				msg:"daimenglaoshi"
				}
		}
}
</script>


2.在html页面中导入vue组件并使用

因为html中不能直接使用vue页面的内容,需要用到插件http-vue-loader。

下载http-vue-loader.js文件 或者在线调用:

<script src="https://unpkg.com/http-vue-loader"></script>

html中调用:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/http_vue_loader.js" ></script>
	</head>
	<body>
		
		<div id="app">
			<welcome></welcome>
			<welcome></welcome>
			<welcome></welcome>
		</div>
		
		<script>
			
			var v=new Vue({
				
				el:"#app",
				components:{
					"welcome":httpVueLoader("welcome.vue")
				}
				
			})
			
			
		</script>
		
	</body>
</html>

9.3 局部组件

一旦全局注册,就意味着即便以后你不再使用这个组件,它依然会随着Vue的加载而加载。

因此,对于一些并不频繁使用的组件,我们会采用局部注册。

案例代码:

      <div id="app">
			
			<welcome></welcome>
			
		</div>
	
	    <script>
	    	
	    	var msg = {
			    template:"<div>您好,{{name}}</div>",
			    data(){
			        return{
			            name:"呆萌老师"
			        }
			    }
			}
	    	
	    	//该组件只在本Vue实例中使用
	    	
	    	var v=new Vue({
	    		
	    		el:"#app",
	    		
	    		components:{
	    			
	    			welcome:msg
	    		}
	    		
	    	})
	    	
	    </script>

9.4 父子组件

组件可以嵌套,父组件中可以套入一个子组件

测试代码:

        <div id="app">
			
			<father></father>
			
		</div>
		
		<script>
		
		    //注册父组件
			
			Vue.component("father",{
				
				template:"<div style='background-color:red'><p>我是一个父组件</p><son></son></div>",
				
				//父组件中添加子组件
				
				components:{
					
					son:{
						
						template:"<span style='background-color:yellow'>我是一个子组件</span>"
					}					
				}				
				
			})
			
			var v=new Vue({
				
				el:"#app"
				
			})
			
			
		</script>

9.5使用 props 属性动态传递参数

格式:props:['value']    data里面的数据会传递到组件里的props属性

案例代码1:

   <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		
		<div id="app">
			
			<show v-for="item in items" v-html="item" ></show>
			
		</div>
		
		<script>
			
			Vue.component("show",{
				
				props:['value'],
				template:"<li>{{value}}</li>"				
			})
			
			var v=new Vue({
				
				el:"#app",
				data:{
					items:['吃饭','睡觉','打豆豆']
				}
				
			})
			
		</script>
		
		
	</body>
</html>

案例代码2:

	<div id="app">
	
	       <!-- 改变文本框的值,组件中的值也会变 -->
			<input type="text" v-model="item" />
	
	        <mydiv v-html="item"></mydiv>
        </div>
        
        
     <script>
         Vue.component("mydiv",{
             props:['value'],
             template:'<li>{{value}}</li>'
         });
         var app = new Vue({
             el:"#app",
             data:{
                 item:'呆萌'
             }
         });
     </script>
VUE组件-小白菜博客

10.Watch 选项

vue的选项很多,除了前面用到的el,data,methods等,还有其它的。比如Watch

数据变化的监控经常使用,例如天气预报的穿衣指数,它主要是根据温度来进行提示的。温度大于25度时,我们建议穿T恤短袖,温度小于25度大于0度时,我们建议穿毛衣外套,温度小于0度时我们建议穿棉衣羽绒服。

测试案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>		
		
		输入温度,显示穿衣指数
		<div id="app">			
			<p>温度:{{temperature}}</p>
			<p>穿衣建议:{{advise}}</p>			
			输入温度:<input type="text" v-model="temperature"  />			
		</div>
		
		<script>
			
			var v=new Vue({
				
				el:"#app",
				data:{
					temperature:"",
					advise:""
				},
				//监控温度的变化
				watch:{
					temperature:function(newVal,oldVal){
						
						  if (newVal > 25) {
		                        this.advise ="建议穿T恤短袖";
		                    } else if (newVal >= 0 && newVal <= 25) {
		                        this.advise ="建议穿毛衣外套";
		                    } else {
		                       this.advise ="建议穿棉服羽绒服";
		                    }								
					}
				}
			})			
		</script>		
	</body>
</html>

测试结果:

VUE组件-小白菜博客