vue.js學習日記-組件篇
組件
自定義組件 全局註冊：
var question={name:‘MR Liu‘}
Vue.component(‘my-header‘,{
template:‘<p>hello world{{name}}</p>
‘,
data:function(){//data必須是函數 且一般只能返回一個對象
return question//沒有‘;’這個結束符
}
})
註意 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‘
vue.js學習日記-組件篇