组件
自定义组件 全局注册:
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‘