Vue可以自定义组件 在组件中自己设置组件内容
注意 :自定义组件的名字不能有大写字母 否则无效!!!
自定义组件在script标签中定义 使用Vue.component来定义 它有两个参数,第一个是自定义组件的名字,第二种是一个对象 里面存放一些自定义组件的信息 这个对象中有一些属性 常用的有 : template属性 它表示自定义组件中的内容(HTML代码). props属性 代表接受的数据 因为要实现数据的双向绑定 它无法直接访问到我们new Vue中定义的 data中的变量值 而前端可以拿到 new Vue’中 data的值 所以需要通过前端来向它传递这些值 (听起来很拗口 仔细理解一下 就是 你Vue.component中 无法获取 new Vue中的变量值 而前前端HTML可以获取到 所以需要通过前端绑定一个属性 将这个属性值传递给自定义组件中去 仔细看一下下面这个例子 理解一下)
<div id='d2'>
<myconponent v-for="book in bookList" v-bind:field='book'></myconponent>
</div>
<script>
//自定义组件的名字不能有大写字母 否则无效!!!
Vue.component('myconponent',{
props : ['field'],
template : '<li>{{field}}</li>'
});
var v = new Vue({
el : '#d2',
data : {
bookList : ['数据库基础','Linux','数据结构与算法','Hadoop']
}
})
</script>