vue学习（1）—template

共计 658 个字符，预计需要花费 2 分钟才能阅读完成。

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>