vue组件

超、凢脫俗 2024-03-30 10:07 13阅读 0赞

#### 9.Vue组件 ####

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

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

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

![在这里插入图片描述][251dec5f50a4491aacec00e4f4ac771f.png_pic_center]

##### 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文件 或者在线调用：

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>

![在这里插入图片描述][34664c1eb8534d52915127b27461057d.png_pic_center]

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

测试结果：

![在这里插入图片描述][7f74628e80bb41ffb3a05581581cc0fe.png_pic_center]

[251dec5f50a4491aacec00e4f4ac771f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/70ef544d1cef4cb8ac9eb6870f18bab6.png
[34664c1eb8534d52915127b27461057d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/01c28c6f54584cfd9ac624dd766d6e80.png
[7f74628e80bb41ffb3a05581581cc0fe.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b93b85552b454f498f5fdec2665fcbaa.png