<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件之WEB开发中组件使用场景与定义组件的方式</title>
<script src="vue.js"></script>
</head>
<body>
<!--
组件：可互用、维护省力
-->
<div id="lantian">
<!--全局组件的调用-->
<slide></slide>
<slide></slide>
<!--局部组件的调用：使用组件的名时，如果是驼峰式的写法，需要用 - 分开-->
<hd-News></hd-News>
</div>
<script>
//定义全局组件： component:组件。它是在根组件中使用的。必须在根组件声明之前使用。
Vue.component('slide',{ //子组件：
//定义模板：
template:"<h1>wo shi zujian de moban</h1>"
});
//把局部组件的数据提取出来：
var news={
template:"<h2>你好，我是局部组件</h2>"
};
var app = new Vue({
el:"#lantian", //根组件，其他的就是子组件
//定义局部组件：
components:{hdNews:news} //如果定义的变量名与数据的变量名一致，可以简写成一个：news 。这是es6的写法
});
</script>
</body>
</html>
