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

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

  1. <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>
  1. Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
    })
  2.  
  3. var app7 = new Vue({
    el: '#app-7',
    data: {
    groceryList: [
    { id: 0, text: '蔬菜' },
    { id: 1, text: '奶酪' },
    { id: 2, text: '随便其它什么人吃的东西' }
    ]
    }
    })
  1. 蔬菜
  2. 奶酪
  3. 随便其它什么人吃的东西

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

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

  1. <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. Android 之UI自适应解决方式

    1.概况 作为Android开发者,最头疼的莫过于让自己开发的程序在不同终端上面的显示效果看起来尽量一致(当然.假设要充分利用大屏幕的优势另当别论).在全球范围内来讲.android有着数以亿计的设备 ...

  2. 【Python3 爬虫】10_Beautiful Soup库的使用

    之前学习了正则表达式,但是发现如果用正则表达式写网络爬虫,那是相当的复杂啊!于是就有了Beautiful Soup 简单来说,Beautiful Soup是python的一个库,最主要的功能是从网页抓 ...

  3. Nginx Errors: upstream response cache error

    Nginx Errors upstream response cache error *2470578 an upstream response is buffered to a temporary ...

  4. js知识地图--js大脑图beta01版正式发布

    原文地址 http://zhangyaochun.iteye.com/blog/1682605 原作者:zhangyaochun

  5. nginx环境下启动php-fpm

    nginx环境下启动php-fpm 1.首先查看是否安装了php-fpm 这个我试了好多命令都不行比如 rpm -qa php-fpm , rpm -ql php-fpm , which php-fp ...

  6. I2S与pcm的区别

    I2S仅仅是PCM的一个分支,接口定义都是一样的, I2S的采样频率一般为44.1KHZ和48KHZ做,PCM采样频率一般为8K,16K.有四组信号: 位时钟信号,同步信号,数据输入,数据输出. I2 ...

  7. oracle的一些问题

    好久时间没有用oracle,这次因为有个项目的需要,又重新温习了一下oracle. 我使用的oracle的版本是windows oracle 11g_R2. 首先先说一下安装.这个没有太大的问题,主要 ...

  8. uboot下tftp传输文件

    uboot下通过tftp工具传输文件,tftp与ftp是完全不同的工具或协议. 1) 下载并安装程序 sudo apt-get install tftp-hpa tftpd-hpa tftp-hpa是 ...

  9. Irrelevant Elements UVA - 1635 二项式定理+组合数公式+素数筛+唯一分解定理

    /** 题目:Irrelevant Elements UVA - 1635 链接:https://vjudge.net/problem/UVA-1635 题意:給定n,m;題意抽象成(a+b)^(n- ...

  10. 如何设置esxi的网卡与网络

    很多朋友安装了vmware esxi后,不懂得服务器上的网卡该如何设置以及如何使用,我们在这里来介绍一下vmware esxi的网卡设置 工具/原料   一台服务器,配有两块千兆网卡 在服务器安装好v ...