<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title>demo</title>
</head>
<body>
<div id="app">
<!-- <button type="button" @click="isshow=!isshow">click</button> -->
<navbar @myevent="handleEvent"></navbar>
<sidebar v-show="isshow"></sidebar>
</div>
<script type="text/javascript">
Vue.component('navbar', {
template: `<div>
<button type="button" @click="childClick">click</button>
</div>`,
methods: {
childClick() {
this.$emit('myevent')
}
}
})
Vue.component('sidebar', {
template: `
<div style="background:yellow;width:200px">
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
`
})
var vue = new Vue({
el: '#app',
data: { //存放数据
isshow: false
},
methods: { //存放方法
handleEvent() {
this.isshow = !this.isshow
}
},
computed: { //存放计算属性
}
})
</script>
</body>
</html>
网友评论