Vue的组件
Vue的组件是Vue最强大的功能之一，封装可重用的代码
分为①局部组件
②全局组件
局部组件---在vue对象里面定义
components:{
'button-one':{//组件名
<!--组件的模板 里面写HTML元素的-->
template:'<button @click="oneclick()">点击了{{count}}</button>',
data:function(){//只能是以这种函数的形式来定义
return {
count:0
}
},
<!--方法（函数）-->
methods:{
oneclick:function(){
//this代表当前的components组件
this.count++;
}
}
}
}调用：
通过组件名调用
<button-one ></button-one>
全局组件：在vue对象的外面定义的
Vue.component('button-two',{
template:'<button @click="oneclick()">点击了{{count}}</button>',
data:function(){
return {
count:0
}
},
methods:{
oneclick:function(){
this.count++;
}
}
});调用
<button-two ></button-two>
通过组件传值
①局部组件传值-----子vue调用父vue 通过方法传数据
在调用组件时在后面调用一个方法onechuanzhi是我自定义的，onemethod是方法名
<button-one @onechuanzhi="onemethod" ></button-one>
然后在组件中的方法oneclick里面加 (上面你定义的名字,传的值)
this.$emit("onechuanzhi","你好呀！！！");后面可以写count，
这是你要调用的方法
onemethod:function(name){
console.log('xxxxx'+name);
}
②全局组件传值
调用时在里面绑定一个值，是data中定义的
<button-two :one-name="name" ></button-two>
然后在组件中接收one-name，加一个属性props，如果你传值时名字是one-name，那接收时是oneName(第二个单词大写)
props:['oneName']
然后下面使用时就直接this.oneName调用就可以了
SPA
single page applicatio 单页web应用
优势：降低了对服务器的压力，加快页面响应的速度，减少了请求体积
引入依赖<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SPA单页web应用</title>
</head>
<body>
<div id="two">
{{name}}
<h3>路由实现单页面应用程序</h3>
<button @click="top()">上一页</button>
<button @click="next()">下一页</button>
<router-link to="/one">go to one</router-link>
<router-link to="/two">go to two</router-link>
<div>
<!--路由器的容器-->
<router-view></router-view>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
<script>
//第一步:创建组件
const One=Vue.extend({
template:'<div><h4>第一个组件</h4>哈哈哈</div>'
});
const Two=Vue.extend({
template:'<div><h4>第二个组件</h4>嘻嘻嘻</div>'
});
//第二步:创建路由 相当于网线
var routesHe=[
{path:'/',component:One},
{path:'/one',component:One},
{path:'/two',component:Two}
]
//第三步:创建路由器对象
var routerHe=new VueRouter({
routes:routesHe
});
var vm=new Vue({
//用了spa,,就不能使用原始的方式
//el:'#two',
//注册路由器
router:routerHe,
data:{
name:'XXX',
},
methods:{
top:function(){
this.$router.go(-1);
},
next:function(){
this.$router.go(1);
}
}
}).$mount('#two');//将vue对象绑定到挂载到指定容器中
</script>
</html>
