一、Vue的自定义事件
点击任何一个按钮，按钮本身计数累加，但是每点击三个按钮中的一个，totalCounter 都要累加。
<body>
<div id="app">
<my_btn @total="allCounter()"></my_btn>
<my_btn @total="allCounter()"></my_btn>
<my_btn @total="allCounter()"></my_btn>
<p>所有的按钮一共点击了{{totalCounter}}次</p>
</div>
<template id="my_btn">
<button @click="total()">点击了{{counter}}次</button>
</template>
<script src="js/vue.js"></script>
<script>
Vue.component('my_btn',{
template:'#my_btn',
data(){
return {counter : 0}
},
methods:{
total(){
this.counter += 1;
// 通知外部，这个方法执行过了
this.$emit('total'); // 这里把total 传出去，也可以叫别的名字，外面通过@total来监听
}
}
});
new Vue({
el:'#app',
data:{
totalCounter:0,
},
methods:{
allCounter(){
this.totalCounter += 1;
}
}
})
</script>
</body>二、插槽
1.匿名插槽
<body>
<div id="app">
<my_slot></my_slot>
</div>
<template id="my_slot">
<div id="panel">
<header>header.....</header>
<!--这里放一个插槽占位-->
<slot>我是插槽，如果不插入内容，就显示默认的内容。</slot>
<footer>footer......</footer>
</div>
</template>
<script src="js/vue.js"></script>
<script>
Vue.component('my_slot',{
template: '#my_slot',
});
new Vue({
el:'#app',
data:{}
})
</script>
</body>
如果改为
<div id="app">
<my_slot>
<img src="img/img_01.jpg" width="200px" alt="">
</my_slot>
</div>那新增加的 img 通过插槽显示出来了。
2.实名插槽
实名插槽就是，每个插槽都已经限制好要插入什么样的内容，只有插槽的name符合才会被正常显示
<body>
<div id="app">
<my_computer>
<p slot="cpu">因特尔 酷睿i8</p>
<p slot="memory">16g 金士顿</p>
<p>当当当，这些内容都不会显示的，因为插槽对不上</p>
<p slot="hard-disk">西部数据</p>
</my_computer>
</div>
<template id="computer">
<div id="pc">
<p>电脑组件:</p>
<slot name="cpu">cpu插槽</slot>
<slot name="memory">内存条插槽</slot>
<slot name="hard-disk">硬盘插槽</slot>
<p>end.......</p>
</div>
</template>
<script src="js/vue.js"></script>
<script>
Vue.component('my_computer',{
template:'#computer'
});
new Vue({
el:'#app',
data:{}
})
</script>
</body>
三、VueRouter
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
功能：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为