- 全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<button-counter></button-counter>
<hello-world></hello-world>
</div>
</body>
<script>
Vue.component('hello-world',{
data:function(){
return{
msg:'Hello'
}
},
template:'<div>{
{msg}}</div>'
})
Vue.component('HelloWorld',{
data:function(){
return{
msg:'Hello'
}
},
template:'<div>{
{msg}}</div>'
})
Vue.component('button-counter',{
data:function(){
return {
count:0
}
},
template:'<div><HelloWorld></HelloWorld><button @click="count++">点击了{
{count}}次</button><button @click="count" v-cloak>点击了测试次</button></div>'
})
var v = new Vue({
el:'#app',
data:{
}
})
</script>
</html>
- 局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='js/vue.min.js'></script>
</head>
<body>
<div id="app">
<hello-world></hello-world>
</div>
</body>
<script>
var Hello={
data:function(){
return {
msg:'hello'
}
},
template:'<div>{
{msg}}</div>'
}
var HelloWorld={
data:function(){
return {
msg:'hello,world'
}
},
template:'<div>{
{msg}}</div>'
}
var v = new Vue({
el:'#app',
data:{
},
components:{
'hello-world':HelloWorld
}
})
</script>
</html>
- 组件间数据交互 子组件-父组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='js/vue.min.js'>
</script>
</head>
<body>
<div id="app">
<div :style='{
fontSize:fontSize+"px"}'>{
{parr[0]}}</div>
<item-menu :arr='parr' @enlarge-text='handle($event)'></item-menu>
</div>
</body>
<script>
Vue.component('item-menu',{
props:['arr'],
template:
`<ul>
<li :key='index' v-for='(item,index) in arr'>{
{item}}
</li>
<button @click='arr.push("banana")'>点击</button>
<button @click='$emit("enlarge-text",5)'>扩大</button>
<button @click='$emit("enlarge-text",1)'>扩大</button>
</ul>`
})
var v = new Vue({
el:'#app',
data:{
parr:['apple','orange'],
fontSize:10
},
methods:{
handle:function(step){
this.fontSize += step
}
}
})
</script>
</html>
- 组件间数据交互 父组件-子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='js/vue.min.js'></script>
</head>
<body>
<div id="app">
<input type="text" v-model='pmsg'>
<div pnum='12'></div>
<menu-item :m-s='pmsg' :pnum='12' :pboo='true' :fruits='parr' :obj='pobj'></menu-item>
</div>
</body>
<script>
Vue.component('menu-item',{