乐趣区

vue学习(1)—template

template 的使用
template 中只能有一个根元素;错误使用:

template 都是用于组件中。
其他写法:如果将 template 用 div 替换,发现是可以用的。

注意:组件必须有且仅有一个根元素。
组件的 data 必须是函数
好处:自己维护自己的,以免一个改动导致其他组件变动。互不影响。
data: function () {
return {
count: 0
}
}

data 和 props
1、data 就是固定的值,可以在组件中进行变动。2、props 可以给子组件传递数据。(data): 点击的时候改变了 title 值,但是不可以在引用组件的时候,给 title 赋值。
<script>
Vue.component(‘first-com’,{
data:function(){
return{
title:0
}
},
template:'<div v-on:click=”title++”>{{title}}</div>’
});
new Vue({
el:’#app’
})
</script>

(props):(父向子传值)
<script>
Vue.component(‘first-com’,{
props:[‘title’],
template:'<div>{{title}}</div>’
});
new Vue({
el:’#app’
})
</script>

注意:props 中的属性要有单引号。
使用方法:
<div id=”app”>
<first-com title=”123″></first-com>
<first-com title=”ddd”></first-com>
</div>

退出移动版