<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue组件化开发</title>
</head>
<body>
<div id="app">
<!-- 组件使用 -->
<button-counter2></button-counter2>
<hello-world></hello-world>
<hello-wb></hello-wb>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/* 组件注册 */
//组件是可以重用
//每个组件都是封装的概念。独立的实例。
//引用多个组件时。数据不会相互影响。
/* data:必须是一个函数对象 */
/*
命名注意事项
短横线方式:字母全部是小写。而且每个单词之间用-隔开
驼峰式：每个单词首字母用大写
如果使用驼峰式命名组件,那么在使用组件的时候。只能在字符串模板中用驼峰式的方式使用组件。
但是在普通的标签中，必须使用短横线的方式使用组件。
*/
/*----------------全局注册组件--------------------------*/
Vue.component('button-counter',{
data:function(){
return {count:0,name:'按钮'}
},
template:'<button @click="handle">{{name}}</button>',
methods:{
handle:function(){
this.count+=2;
this.name='按钮'+this.count;
}
}
});
Vue.component('button-counter1',{
data:function(){
return {count:0,name:'按钮'}
},
template:'<div><button @click="handle">{{name}}</button><button>按钮2</button></div>',
methods:{
handle:function(){
this.count+=2;
this.name='按钮'+this.count;
}
}
});
//模板字符串
//template必须是反引号
//注意：全局组建是没有办法引用局部组件
Vue.component('button-counter2',{
data:function(){
return {count:0,name:'按钮'}
},
template:
`
<div>
<button @click="handle">{{name}}</button>
<button>按钮2</button>
<HelloWorld></HelloWorld>
</div>
`
,
methods:{
handle:function(){
this.count+=2;
this.name='按钮'+this.count;
}
}
});
Vue.component('HelloWorld',{
data:function(){
return {msg:'Hello World'}
},
template:'<div>{{msg}}</div>'
});
/*----------------局部注册组件--------------------------*/
//局部组件只能在注册他的父组件中使用
var HelleWorld={
data:function(){
return {msg:'HellWorld'}
},
template:'<div>{{msg}}</div>'
}
var HelleWb={
data:function(){
return {msg:'HellWB'}
},
template:'<div>{{msg}}</div>'
}
var vm = new Vue({
el: "#app",
data: {
msg:''
},
//方法
methods:{
},
components:{
'hello-world':HelleWorld,
'hello-wb':HelleWb
}
})
</script>
</html>
