标签：技术 属性 创建 自定义属性 div 循环语句 应用程序 代码 code
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例
一个组件实例
<div id="app1"> <ol> <!-- 创建一个com1组件实例 --> <com1 v-for="item in list" v-bind:todo="item"></com1> </ol> </div>
//注册一个名为com1的组件 Vue.component("com1", { props: ["todo"], template: "<li>{{todo.text}}</li>" }); new Vue({ el: "#app1", data: { list: [ {text: "大碗喝酒"}, {text: "大块吃肉"}, {text: "大刀向鬼子的头上砍去"} ] } });
运行结果
这个效果和我在循环语句中编写的实例效果是一样的。
也就是说，可以尝试用v-for指令来代替这个组件。
<div id="app1"> <ol> <li v-for="item in list">{{item.text}}</li> </ol> </div>
new Vue({ el: "#app1", data: { list: [ {text: "大碗喝酒"}, {text: "大块吃肉"}, {text: "大刀向鬼子的头上砍去"} ] } });
通过两端代码的比较，尝试分析一下构建组件的过程：
在一个大型应用中，有必要将整个应用程序划分为多个组件，以便开发管理。
标签：技术 属性 创建 自定义属性 div 循环语句 应用程序 代码 code
原文地址：http://www.cnblogs.com/jiaoxuanwen/p/6920298.html
