根实例
└─ 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. php 对象教程

    [PHP面向对象(OOP)编程入门教程]6.如何去使用对象中的成员 作者:qianyunlai.com  发布于:2012-05-19 15:02  分类:PHP基础  浏览(280) 上面看到PHP ...

  2. Arduino IDE for ESP8266教程（四）网页控制灯 简单页面

    修改ssid和passwd,将程序烧写到8266上,等待串口返回连接成功的消息,连接成功之后可以看到返回有一个ip地址,使用浏览器方位这个ip地址就可以看到这个消息: 连接路由器后,返回IP地址 19 ...

  3. mac版本idea使用(二)-如何安装PlantUML画时序图、类图

    在跟踪spring源码的时候,看见网上的博客好多使用了idea自带的展示类继承关系图的功能,这个地方使用了idea的diagrams-show diagram,就可以显示类的继承图,很神奇的样子,记录 ...

  4. PAT A1112 Stucked Keyboard （20 分）——字符串

    On a broken keyboard, some of the keys are always stucked. So when you type some sentences, the char ...

  5. PAT A1122 Hamiltonian Cycle （25 分）——图遍历

    The "Hamilton cycle problem" is to find a simple cycle that contains every vertex in a gra ...

  6. Android学习之基础知识七—碎片的使用

    碎片(Fragment)是一种可以嵌入在活动中的UI片断,它能让程序更加合理和充分地利用大屏幕的空间,它与活动相似,可以简单的理解为一个迷你型的活动,它也有自己的生命周期.碎片在平板的应用非常广泛. ...

  7. this computer meets the requirements for HAXM,but intel Virtualization Technology (VT-x) is not turned on

    this computer meets the requirements for HAXM,but intel Virtualization Technology (VT-x) is not turn ...

  8. BZOJ 2784 时间流逝

    BZOJ 2784 时间流逝 古典概率论... 可以发现由于能量圈数量限制,所以所构成的必定为树状结构(即便是转成最小能量圈和能量圈权值和之后存在重复状态,但是每个状态的含义不同,而且不能自身转移自身 ...

  9. 把List<T>转换为DataTable

    下面这个学习,把List<T>转换为Datatable. 下面先创建一个对象T: class Ay { private int _ID; public int ID { get { ret ...

  10. Java 面试题 == 和 equals 的区别

    int和Integer的区别 1.Integer是int的包装类,int则是java的一种基本数据类型 2.Integer变量必须实例化后才能使用,而int变量不需要 3.Integer实际是对象的引 ...