vue.js学习日记-组件篇
组件
自定义组件 全局注册：
var question={name:'MR Liu'}
Vue.component('my-header',{
template:'<p>hello world{{name}}</p>
',
data:function(){//data必须是函数 且一般只能返回一个对象
return question//没有‘;’这个结束符
也可以return {
name:'MR Liu'
}
}
})
注意 question和template之间的关系一定要自己明确
局部注册：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<two></two>
</div>
<script type="text/javascript">
var ask={age:25}
var three={
template:'<h1>我是第THREE</h1>'，
data：function(){
return ask;}
}//这个结尾这里没有‘，’号，因为这个是在，一个对象外部，不需要语句分割符
var two={
template:'<p><three></three>我是第TWO{{age}}</p>',
components:{
'three':three
}
}
var vm=new Vue({
el:'#app',
data:{
holidary:'WELCOME COME TO 自定义组件'
},
components:{//el所挂0载 的元素是根元素，<two><two>只能在<div id='app'><div>之内有效
'two':two
}
})
</script>
</body>
</html>
props自定义属性props['hello'] 不能使用v-bind：hello='X' 只能使用hello='x'
