首页 > Web开发 > 详细

vue.js学习日记-组件篇

时间:2017-09-19 00:00:35      阅读:328      评论:0      收藏:0      [点我收藏+]

组件

自定义组件 全局注册

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学习日记-组件篇

原文:http://www.cnblogs.com/LiuCaoMei/p/7545642.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!