https://cn.vuejs.org/v2/guide/#起步

现在,我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中:

<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量,即其内容可以是动态的。
我们也需要为每个组件提供一个“key”,稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
}) var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
  1. 蔬菜
  2. 奶酪
  3. 随便其它什么人吃的东西

尽管这只是一个刻意设计的例子,但是我们已经设法将应用分割成了两个更小的单元。子单元通过 prop 接口与父单元进行了良好的解耦。我们现在可以进一步改进 <todo-item> 组件,提供更为复杂的模板和逻辑,而不会影响到父单元。

在一个大型应用中,有必要将整个应用程序划分为组件,以使开发更易管理。在后续教程中我们将详述组件,不过这里有一个 (假想的) 例子,以展示使用了组件的应用模板是什么样的:

<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>

抽象不应该依赖于具体,具体应该依赖于抽象。 要针对接口编程,而不是针对实现编程。

子单元通过 prop 接口与父单元进行了良好的解耦的更多相关文章

  1. Swift - 实现点击UITableView单元格时自动展开单元格

    下面是一个列表单元格cell的折叠展开效果的demo.当点击单元格时会展开该单元格,便于显示一些详情什么的.点击其他单元格原来的会关闭,同时有动画效果. 效果如如下:   代码如下: 1 2 3 4 ...

  2. NPOI扩展--判断指定单元格是否为合并单元格和输出该单元格的行列跨度(维度)

    因工作需要用到跨合并单元格获取数据,所以写了个NPOI扩展类. 主要方法如下: 1.判断指定行/列索引(单元格)是否为合并单元格. 2.获取指定列索引的实际含有数据的单元格. 3.返回指定行/列索引的 ...

  3. mysql GROUP_CONCAT 函数 将相同的键的多个单元格合并到一个单元格

    mysql GROUP_CONCAT 函数 将相同的键的多个单元格合并到一个单元格 MemberID MemberName FruitName -------------- ------------- ...

  4. 个人永久性免费-Excel催化剂功能第52波-相同内容批量合并单元格,取消合并单元格并填充内容

    在高级Excel用户群体中无比痛恨的合并单元格,在现实的表格中却阴魂不散的纠缠不断.今天Excel催化剂也来成为“帮凶”,制造更多的合并单元格.虽然开发出此功能,请使用过程中务必要保持节制,在可以称为 ...

  5. Devexpress Winform Gridcontrol 中根据条件单元格的值改变单元格的颜色等属性。

    提供一下三种方法 1.使用设计器 点击gridcontrol控件,run designer,format Condtions, add,然后进行各种条件的设置. 2.用代码代替设计器. 实例代码: p ...

  6. C#导出Excel,并且设置Excel单元格格式,合并单元格.

    注:要添加COM组件 Microsoft Excel 11.0 Object Library  引用. 具体代码如下: using System; using System.Collections.G ...

  7. DEV gridview根据单元格值改变其他单元格格式

    string style = ""; private void gridView1_RowCellStyle(object sender, DevExpress.XtraGrid. ...

  8. 如何隐藏Excel中单元格公式且其他单元格可修改

    需求:1.隐藏指定单元格公式.2.非公式单元格可修改,不影响公式计算. 操作步骤:1.全选工作表.右键.单元格格式.保护.锁定勾选取消. 2.编辑.定位(或按F5弹出该对话框).定位条件.公式(勾选) ...

  9. Easyui的datagrid的行编辑器Editor中添加事件(修改某个单元格带出其他单元格的值)

    项目中有个datagrid需要编辑行时,用到Editor的属性,那么如何添加一个事件 问题:同一个编辑行中的某个单元格值改变时,修改其他单元格的值 页面用到的datagrid <table id ...

随机推荐

  1. zh-cn en-uk表示语言(文化)代码与国家地区对照表

    af 公用荷兰语 af-ZA 公用荷兰语 - 南非 sq 阿尔巴尼亚 sq-AL 阿尔巴尼亚 -阿尔巴尼亚 ar 阿拉伯语 ar-DZ 阿拉伯语 -阿尔及利亚 ar-BH 阿拉伯语 -巴林 ar-EG ...

  2. 语言那点事,crt

    C语言标准(不管是ANSI 还是ISO)包含2部分,一部分是语言本身的标准,另一部分是C标准函数库.C标准函数库规定了函数的原型和功能,但是并没限定这些函数要怎么实现.所谓满足标准C规定的C编译器,不 ...

  3. IOS 应用程序路径

    -- 获取资源文件目录 .app/下的图片,音频等资源文件 print("bundlePath" + NSBundle.mainBundle().bundlePath) //以下是 ...

  4. 【MyBatis学习04】mapper代理方法开发dao

    上一篇博文总结了mybatis使用 原始dao的方法存在的一些弊端,我们肯定不会去用它,那么mybatis中该如何开发dao呢?如题所述,这篇博文主要来总结一下使用mapper代理的方法来开发dao的 ...

  5. linux 查看cpu相关信息命令

  6. 使用 %matplotlib inline 出错?

    %matplotlib inline 是一个魔法函数(Magic Functions).官方给出的定义是:IPython有一组预先定义好的所谓的魔法函数(Magic Functions),你可以通过命 ...

  7. Windows内存管理的方式

    一.内存的概念 1. 物理内存:即插在主板上的内存条.他是固定的,内存条的容量多大,物理内存就有多大(集成显卡系统除外). 但是如果程序运行很多或者程序本身很大的话,就会导致大量的物理内存占用,甚至导 ...

  8. C++之栈、队列基本用法

    1.C++栈的基本用法: #include<stack> (1)push():向栈内压入一个成员: (2)pop():栈顶弹出一个成员: (3)empty():栈为空返回true,否则返回 ...

  9. hadoop_百科

    一.发音是:[hædu:p]. 二.简介:Hadoop是一个由Apache基金会所开发的分布式系统基础架构.用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储 ...

  10. IOS设计模式的六大设计原则之依赖倒置原则(DIP,Dependence Inversion Principle)

    定义 高层模块不应该依赖于低层模块,二者都应该依赖于抽象:抽象不应该依赖细节:细节应该依赖抽象. 定义解读 依赖倒置原则在程序编码中经常运用,其核心思想就是面向接口编程,高层模块不应该依赖低层模块(原 ...