初学vue之路- 全局组件和局部组件注意点

最新推荐文章于 2022-05-15 21:07:02 发布

记录杂文

最新推荐文章于 2022-05-15 21:07:02 发布

阅读量215

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/ShenYouRong/article/details/106372790

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>review vue 1 not template</title>
	<script src="../vuejs/vue.js"></script>	
</head>
<body>
	<div id="app1">
		<!--  {{}} mustache v-text v-html   :attrs v-model v-for(arrys, object!) -->
		<p>{{msg}}</p>
		<p v-text="msg"></p>
		<p v-html="msg"></p>
		<input type="text" :value="msg" />
		<input type="text" v-model="msg" />
		<audio src="../video/公子向北走.mp3" autoplay controls ></audio>
					<ul>
						<li v-for= "item in musicList ">
							<h3>{{item.id}}</h3>
						</li>
					</ul>
		

	</div>
	<script>
		// 共同点 1 组件名第一个字母大写
		// 不同点 1 局部组件需要挂在 (App或者Vue的components内 而全局组件不需要

		// 创建全局组件
		Vue.component("Father",{
				data(){return{}},
				components:{},
				template:``,
				methods:{},
		});
		// 创建局部组件
		var  Child = {
				data(){return{}},
				components:{},
				template:``,
				methods:{},
		};


		var  menus= [	
				 {id:1,name:'公子向北走',author:'李春花',songSrc:'../video/公子向北走.mp3'},
				 {id:2,name:'talk',author:'jgaukd',songSrc:'../video/talk.mp3'},
				 {id:3,name:'songbie',author:'song',songSrc:'../video/songbie.mp3'},]
		var App ={
				data(){return{

					musicList: menus,
					
				}},
				components:{Child},
				template:`
				
				
					
				`,
				methods:{},
		}
		 
		var vm = new Vue({
			el:"#app1",
			data(){return{
				msg:"helo",
				musicList: menus,

			}},
			
			});
			
	</script>

</body>
</html>