根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics
 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <title></title>
 <style>

 </style>
 <script src="js/vue.js"></script>
</head>
<body>
<div id="app-7">
 <ol>
  <!--
      现在我们为每个 todo-item 提供待办项对象
      待办项对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，晚些时候我们会做个解释。
    -->
  <todo-item
   v-for="item in groceryList"
   v-bind:todo="item"
   v-bind:key="item.id">
  </todo-item>
 </ol>
</div>
<script>
 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: '随便其他什么人吃的东西' }
   ]
  }
 })
</script>
</body>
</html>

Vue 组件化的更多相关文章

  1. vue组件化的应用

    前言:vue组件化的应用涉及到vue-cli的内容,所以在应用之前是需要安装node和vue-cli的,具体如何安装我就不一一赘述了.可能一会儿我心情好的时候,可以去整理一下. 1.应用的内容:在一个 ...

  2. Vue组件化开发

    Vue的组件化 组件化是Vue的精髓,Vue就是由一个一个的组件构成的.Vue的组件化设计到的内容又非常多,当在面试时,被问到:谈一下你对Vue组件化的理解.这时候又有可能无从下手,因此在这里阐释一下 ...

  3. vue组件化之模板优化及注册组件语法糖

    vue组件化之模板优化及注册组件语法糖 vue组件化 模板 优化  在 https://www.cnblogs.com/singledogpro/p/12054895.html 这里我们对vue.js ...

  4. vue组件化初体验 全局组件和局部组件

    vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件  关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...

  5. 4.VUE前端框架学习记录四：Vue组件化编码2

    VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  6. 3.VUE前端框架学习记录三：Vue组件化编码1

    VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  7. 三. Vue组件化

    1. 认识组件化 1.1 什么是组件化 人面对复杂问题的处理方式 任何一个人处理信息的逻辑能力都是有限的,所以当面对一个非常复杂的问题时我们不太可能一次性搞定一大堆的内容. 但是我们人有一种天生的能力 ...

  8. 二、vue组件化开发（轻松入门vue）

    轻松入门vue系列 Vue组件化开发 五.组件化开发 1. 组件注册 组件命名规范 组件注册注意事项 全局组件注册 局部组件注册 2. Vue调试工具下载 3. 组件间数据交互 父组件向子组件传值 p ...

  9. vue - Vue组件化编程

    今天是对vue组件化的一个理解,最主要的单文件组件,然后就可以脚手架的学习了,本来昨晚就该上传的,但是用的那个上传博客园的Python脚本不行了,换了一个新的. 组件化让我越来越感觉到框架的力量了 一 ...

  10. 06Vue.js快速入门-Vue组件化开发

    组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...

随机推荐

  1. WIN10刚开机任务管理显示CPU占用100%问题

    针对WIN10更新后出现的问题!!! 现象: 电脑刚开机,直接打开任务管理器,CPU占用100%! 但是电脑运行速度正常,按道理这时候应该卡死!(排除病毒) 下载鲁大师查看只是显示CPU 3%!而网上 ...

  2. 查询rman 备份信息集

    SELECT TRIM(START_TIME||'#'),       TRIM(END_TIME||'#'),       TRIM(CASE OUTPUT_DEVICE_TYPE         ...

  3. 常用zookeeper命令

    服务管理 启动ZK服务: zkServer.sh start 查看ZK状态: zkServer.sh status 停止ZK服务: zkServer.sh stop 重启ZK服务: zkServer. ...

  4. 【Codeforces 1120C】Compress String

    Codeforces 1120 C 题意:给一个串\(S\),将这个串分成\(t_1..t_m\),如果\(t_i\)在\(t_1..t_{i-1}\)中作为子串出现过,那么这个的代价是\(b\),否 ...

  5. 3分钟学会做智能插座（DIY）

    转载请注明:@小五义http://www.cnblogs.com/xiaowuyiQQ群:64770604 感谢博达科技提供的技术支持,博达科技新出了turnip智能插座,通过微信控制,实现了语音控制 ...

  6. MySQL（十三）事务处理和字符集

    一.事务处理 事务处理(transaction processing):是一种机制,用来维护数据库的完整性,管理必须成批执行的MySQL操作,以保证数据库不包含不完整的操作结果. 这样可以保证一组操作 ...

  7. Linux下Samba详解及安装配置

    1.简介 2.安装配置 3.在windows和linux系统上验证 一.简介 早期网络想要在不同主机之间共享文件大多要用FTP协议来传输,但FTP协议仅能做到传输文件却不能直接修改对方主机的资料数据, ...

  8. STL语法——集合：set 安迪的第一个字典（Andy's First Dictionary,UVa 10815）

    Description Andy, , has a dream - he wants to produce his very own dictionary. This is not an easy t ...

  9. Django 学习 （第五部）

    表设计: from django.db import models # Create your models here. # class Foo(models.Model): # name = mod ...

  10. 字符串中去除多余的空格保留一个(C#)

    在C#的字符串,其中有许多空格,现要求是把多余的空格去除保留一个.原理是使用Split()方法进行分割,分割有一个选项是RemoveEmptyEntries,然后再把分割后的字符串Join起来. st ...