38.VUE学习之-全局组件和局部组件 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>vue</title>
	<link rel="stylesheet" href="">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!-- <script type="text/javascript" src="../js/vue.js"></script> -->

</head>
<body>
<div id="hdcms">
	<hd-slide></hd-slide>
	<hd-news></hd-news>
	<hdcomtent></hdcomtent>

</div>
<script>
	//全局组件,必需要放在new Vue的上面
   Vue.component('hdSlide',{
       template:'<h1>hellow Vue,slide.</h1>',
   });


    var hdNews = {
        template: "<h2>你好后盾人</h2>",
    };
    var hdcomtent = {
        template: "<h2>测试内容</h2>",
    };
    new Vue({
        el: '#hdcms',
		//局部组件 注册组件的名字
        components: {hdNews,hdcomtent}

    });
</script>
</body>
</html>
posted @ 2019-01-14 09:46  HaimaBlog  阅读(141)  评论(0)  编辑  收藏  举报