根实例
└─ 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. JS面向对象之工厂模式

    js面向对象 什么是对象 "无序属性的集合,其属性可以包括基本值.对象或者函数",对象是一组没有特定顺序的的值.对象的没个属性或方法都有一个俄名字,每个名字都映射到一个值. 简单来 ...

  2. oracle 查询 磁盘使用率

    SELECT d.tablespace_name "Name",        TO_CHAR(NVL(a.bytes / 1024 / 1024 / 1024, 0), '99, ...

  3. day06数据类型----元组、字典、集合

    一.元组(tuple):     python中将一些不能修改的值称为不可变的,而不可变的列表则被称之为元组. 注意元组一旦被定义则不可修改,因此一般我们不定义空元组. 元组是有序的,可存放多个数据| ...

  4. ubuntu 环境下的QT程序打包

    很多的时候 需要将自己写的QT 程序发布一下  所以今天教一下 怎么在ubuntu 环境下将自己的写的Qt 程序打包打包是为了不依赖 开发环境 和开发的库. 1. QtCreate使用Release版 ...

  5. 有哪些操作会使用到TempDB；如果TempDB异常变大，可能的原因是什么，该如何处理（转载）

    有哪些操作会使用到TempDB:如果TempDB异常变大,可能的原因是什么,该如何处理:tempdb的用途: 存储专用和全局临时变量,不考虑数据库上下文: 与Order by 子句,游标,Group ...

  6. 3.1《想成为黑客，不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)——下载文件

    首先,为了不手动创建一个长文件(这太麻烦了),我们将使用强大的curl(有时也写作"cURL")工具从网上下载一个文件,这个命令可以让命令行与URL交互.尽管这不是Unix核心命令 ...

  7. UOJ224 NOI2016 旷野大计算 构造、造计算机

    传送门——UOJ 传送门——Luogu 这段时间请不要找Itst聊天,Itst已经做疯了 事实证明大模拟题不可做 query 1 送分,加起来一起乘即可 I I + < - O query 2 ...

  8. 手机端@media的屏幕适配

    @media only screen and (width: 320px) { html { font-size: 16px; }} @media only screen and (width: 36 ...

  9. Luogu P3390 【模板】矩阵快速幂&&P1939 【模板】矩阵加速（数列）

    补一补之前的坑 因为上次关于矩阵的那篇blog写的内容太多太宽泛了,所以这次把一些板子和基本思路理一理 先看这道模板题:P3390 [模板]矩阵快速幂 首先我们知道矩阵乘法满足结合律而不满足交换律的一 ...

  10. Quartz.net 定时任务之储存与持久化和集群（源码）

    一.界面 1.这篇博客不上教程.直接看结果(包括把quartz任务转换成Windows服务) (1).主界面 (2).添加任务(默认执行) (3).编辑(默认开启) (4).关闭和开启 2.代码说明 ...