one
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script src='js/vue.js'></script>
<script>
//全局组件
Vue.component('my-component',{
template:`
<ul>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">详情页页</a>
</li>
</ul>
`
})
new Vue({
el:'#app'
data:{},
methods:{},
filters:{},
computed:{},
components:{
'my-component':{
template:``
}
}
})
</script>
</body>
</html>
know
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script src='js/vue.js'></script>
<script>
//全局组件
Vue.component('my-component',{
template:`
<ul>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">详情页页</a>
</li>
</ul>
`
})
new Vue({
el:'#app'
data:{},
methods:{},
filters:{},
computed:{},
components:{
'my-component':{
template:``
}
}
})
</script>
</body>
</html>
组件2
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<my-component></my-component>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component('my-component',{
template:`
<div>
<p>{{mess}}</p>
<button @click='alt'>按钮</button>
</div>
`,
data:function(){
return{
mess:'我是组件中的值'
}
},
methods:{
alt:function(){
alert('bdsjjf')
}
}
})
new Vue({
el:"#app",
data:{
msg:'jsdkvg'
},
methods:{
}
})
</script>
</body>
</html>
组件的嵌套
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<my-component></my-component>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component('my-component',{
template:`
<div>
<p>{{mess}}</p>
<button @click='alt'>按钮</button>
</div>
`,
data:function(){
return{
mess:'我是组件中的值'
}
},
methods:{
alt:function(){
alert('bdsjjf')
}
}
})
new Vue({
el:"#app",
data:{
msg:'jsdkvg'
},
methods:{
}
})
</script>
</body>
</html>
组件之间的传值~父传子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<my-father></my-father>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component('my-father',{
template:`
<div>
<my-tit v-bind:tit='title'></my-tit>
<my-fruit v-bind:fruList='list'></my-fruit>
</div>
`,
data:function(){
return{
list:['apple','pear','banana'],
title:'水果列表'
}
}
})
Vue.component('my-tit',{
props:['tit'],
template:`
<h2>{{tit}}</h2>
`
})
Vue.component('my-fruit',{
props:['fruList'],
template:`
<ul>
<li v-for="value in fruList">{{value}}</li>
</ul>
`
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
网友评论