局部组件：
通过Vue实例创建的组件，只能在此Vue实例的作用范围内起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>局部组件</title>
<script src="../File/vue.js"></script>
</head>
<body>
<div id="test">
<!-- 这里直接写入自定义标签即可实现自定义标签中的效果 -->
<xx_xx></xx_xx>
<hr>
<xxx_xx></xxx_xx>
<xxx_xx></xxx_xx>
<xxx_xx></xxx_xx>
</div>
<script>
/*
组件---
组件的本质也是一个vue实例
组件可以理解为自定义标签，例如一部分标签某些效果需要重复的写好多次，
这时候我们可以利用组件去自己定义一个标签来实现这些效果，达到一个代码复用的效果
*/
new Vue({
el:"#test",
data:{},
//components参数是定义组件的参数，可以定义多个自定义标签
components:{
//xx_xx是组件名字的规范一般由下划线连接两个单词作为名字
xx_xx:{
/*
因为组件的本质也是一个vue实例，可以添加data(组件中的data必须是一个函数)、methods、各种钩子函数、计算属性、侦听器、但是组件中不可以写el参数
*/
methods:{
e:function(){
alert("点击了第一个按钮,触发了组件中的函数啦~")
}
},
/*template是组件的模板，可以理解为给自定义标签赋予的效果
template中的内容注意： 只允许有一个根标签
例如：<h1>这是第一个根标签h1</h1>
<p>这是第二个根标签p标签</p>
--------上述例子中含有h1标签和p标签且都是最外层根标签，这样运行起来会报错-------
如果想运用多个标签实现效果，可以在最外层使用div标签作为根标签
*/
template:`
<div>
<button @click="e">这是组件中的一个按钮</button></br></br>
<button>这是组件中的第二个按钮</button>
<div>
`
},
xxx_xx:{
//在组件中使用data不可以使用的data：{}的形式，必须是以方法的形式，方法的return值作为data中的数据
data:function(){
return{
count:0
}
},
methods:{
add:function(){
this.count++
}
},
//在组件中无论是调用方法还是使用属性，都必须是使用本组件内的方法或者参数
template:`
<button @click="add">这个按钮被点击了{{count}}次</button>
`
}
}
})
</script>
</body>
</html>效果图：
