vue005——vue组件入门（非单文件组件和单文件组件）

痛定思痛。 2024-02-18 13:34 79阅读 0赞

## 一、非单文件组件 ##

### 1.1、单文件组件的使用 ###

#### 1.1.1、局部注册 ####

1、第一步：创建school组件  
2、第二步：注册组件（局部注册）  
3、第三步：使用组件（编写组件标签）

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>基本使用</title>
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		
    		<div id="root">
    			<h1>{
       {msg}}</h1>
    			<hr>
    			
    			<school></school>
    		</div>
    	</body>
    
    	<script type="text/javascript">
    		Vue.config.productionTip = false
    
    		//第一步：创建school组件
    		const school = Vue.extend({
          
    			template:`
    				<div class="demo">
    					<h2>学校名称：{
           {schoolName}}</h2>
    					<h2>学校地址：{
           {address}}</h2>
    					<button @click="showName">点我提示学校名</button>	
    				</div>
    			`,
    			// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
    			data(){
          //注意：这里的data要写成函数式
    				return {
          
    					schoolName:'Vue学堂',
    					address:'大牛岭'
    				}
    			},
    			methods: {
          
    				showName(){
          
    					alert(this.schoolName)
    				}
    			},
    		})
    
    		//创建vm
    		new Vue({
          
    			el:'#root',
    			data:{
          
    				msg:'你好啊！'
    			},
    			//第二步：注册组件（局部注册）
    			components:{
          
    				school
    			}
    		})
    	</script>
    </html>

![在这里插入图片描述][bddc865fc4914186b192011a2476338a.png]

#### 1.1.2、全局注册 ####

<!DOCTYPE html>
    <html>
    
    <head>
    	<meta charset="UTF-8" />
    	<title>基本使用</title>
    	<script type="text/javascript" src="../js/vue.js"></script>
    </head>
    
    <body>
    	
    	<div id="root">
    		
    		<hello></hello>
    		<h1>{
       {msg}}</h1>
    	</div>
    	<hr>
    	<div id="root2">
    		
    		<hello></hello>
    	</div>
    </body>
    
    <script type="text/javascript">
    	Vue.config.productionTip = false
    
    	//第一步：创建hello组件
    	const hello = Vue.extend({
          
    		template: `
    				<div>	
    					<h2>你好啊！{
           {name}}</h2>
    				</div>
    			`,
    		data() {
          //注意：这里的data要写成函数式
    			return {
          
    				name: 'Tom'
    			}
    		}
    	})
    
    	//第二步：全局注册组件
    	Vue.component('hello', hello)
    
    	//创建vm
    	new Vue({
          
    		el: '#root',
    		data: {
          
    			msg: '你好啊！'
    		}
    	})
    
    	new Vue({
          
    		el: '#root2',
    	})
    </script>
    
    </html>

![在这里插入图片描述][b5af25cb1b60445dbd0392f9494eab4b.png]

### 1.2、几个注意点 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>几个注意点</title>
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		
    		
    		<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:'DGUT',
    					address:'北京'
    				}
    			}
    		})
    
    		new Vue({
          
    			el:'#root',
    			data:{
          
    				msg:'欢迎学习Vue!'
    			},
    			components:{
          
    				school:s
    			}
    		})
    	</script>
    </html>

### 1.3、VueComponent的构造函数 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>VueComponent</title>
    		<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:`
    				<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>

![在这里插入图片描述][76623f8974584e00a43d6b4b4f7ae21f.png]

## 二、单文件组件 ##

### 2.1、前置知识 ###

分别暴露  
![在这里插入图片描述][f4b5c62e7d514cbd8e4c703b8073f5f7.png]  
统一暴露  
![在这里插入图片描述][6516c42440ea4dbca1dc8d43fd7832a0.png]  
默认暴露  
![在这里插入图片描述][e2f2110efe37444ebdb0404e0185fec2.png]  
![在这里插入图片描述][fe988d7876c24aafa3c97405911a1b62.png]

### 2.2、组件 ###

![在这里插入图片描述][3301f305f9ba40c2addd88527d388b31.png]  
![在这里插入图片描述][9c6b511f86eb4b5183735f9ab0e07b39.png]

[bddc865fc4914186b192011a2476338a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/bfd6648759f844eaad60c6a092325fbe.png
[b5af25cb1b60445dbd0392f9494eab4b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/282384c714e4454388eb9fe90b997332.png
[76623f8974584e00a43d6b4b4f7ae21f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/465c3af9fbe244ecb4c7de502da9827e.png
[f4b5c62e7d514cbd8e4c703b8073f5f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/dff2241276a745199a1d24872a301db1.png
[6516c42440ea4dbca1dc8d43fd7832a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/75f4c4732b554eadad8bcc6cf4a62b94.png
[e2f2110efe37444ebdb0404e0185fec2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/ba7975692f5c47689b6e7c13c3187829.png
[fe988d7876c24aafa3c97405911a1b62.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/f1669b599fb9452d91d1ea934cdca4df.png
[3301f305f9ba40c2addd88527d388b31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/34e83ad1269b4634a848599bc9eaa455.png
[9c6b511f86eb4b5183735f9ab0e07b39.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/81589b9dc0de49f7ab770605eb17bcef.png