<!DOCTYPE html>

<html lang="zh">

<head>

    <title></title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <link href="../css/style.css" rel="stylesheet"> </head>

<body>

<div id="myApp">

  <ol>

    <game-item v-for="item in games" v-bind:game="item"></game-item>

  </ol>

</div>

<script>

/* 组件定义：game-item */

Vue.component('game-item', {

  props: ['game'],

  template: '<li>{{ game.title }}</li>'

});

/* Vue对象实例化 */

var myApp = new Vue({

  el: '#myApp',

  data: {

    games: [

      { title: '斗地主' },

      { title: '打麻雀' },

      { title: 'UNO' }

    ]

  }

});

</script>

</body>

</html>

组件component的更多相关文章

  1. 小程序-组件component和模版template的选择和使用

    小程序提供了组件component和模版template那什么时候 选择哪一个使用呢?我总结了一下 template主要是模版,对于重复的展示型模块进行展示,其中调用的方法或者数据data都是需要引用 ...

  2. vue从入门到进阶：组件Component详解（六）

    一.什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功 ...

  3. Vue教程：组件Component详解（六）

    一.什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功 ...

  4. Container类是Component的子类，它也是一个抽象类，它允许其他的组件(Component)加入其中

    在AWT中,所有能在屏幕上显示的组件(component )对应的类,均是 抽象类 Component 的子类或子孙类. 这些类均可继承Component类的变量和方法. Container类是Com ...

  5. Unity3d基础组件 (Component) 和脚本 (Script) 关系

    原版的:http://edu.china.unity3d.com/learning_document/getData?file=/Manual/TheComponent-ScriptRelations ...

  6. Vue组件component创建及使用

    组件化与模块化的区别 什么是组件:组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块 ,将来我们需要什么功能,就可以去调用对应的组件即可 组件化与模块化的不同: ...

  7. vue学习之组件(component)(一)

    组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下, ...

  8. Angular(二) - 组件Component

    1. 组件Component示例 2. Component常用的几个选项 3. Component全部的选项 3.1 继承自@Directive装饰器的选项 3.2 @Component自己特有的选项 ...

  9. Vue组件（35）动态组件 component 的 is 到底可以是啥？

    component 动态组件 Vue官网上提供了一个动态组件 <component :is="currentTabComponent"> ,那么这里的 is 到底是什么 ...

  10. openfire的组件(Component)开发

    在之前的文章<Openfire阶段实践总结>中提到过一种openfire的扩展模式Compoent.本文将主要探讨对这种模式的应用与开发方法. 内部与外部组件介绍 在openfire中的许 ...

随机推荐

  1. 1-电脑C盘（系统盘）清理

    推荐,亲测有效! 转自: https://baijiahao.baidu.com/s?id=1612762644229315967&wfr=spider&for=pc

  2. Nginx常用功能配置一

    Nginx常用功能配置 参数include配置 说明:如果日常工作中server标签存在太多,可以采用include配置模式,Nginx的主配置文件包含的所有虚拟主机的子配置文件会统一放入extra目 ...

  3. 机器突然宕机导致hdfs启动一直超时的行为

    今天手里其中一个集群几个机器突然宕机,启动hdfs一直超时. clouder-scm-agent主要报了这个错RROR: Unexpected error 'getpwuid(): uid not f ...

  4. Python全栈开发：django网络框架(二)

    Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行 ...

  5. 思维题+栈的应用——cf1092D有意思

    第一例很简单,把两个差为偶数的列不断合并即可 这种不需要撤销的合并相连数直接用栈来做 /* 如果相邻两列高度差为偶数 那么可以直接消去 */ #include<bits/stdc++.h> ...

  6. NOIP2016 解题报告

    D1T1 玩具谜题 xjb模拟即可 #include<bits/stdc++.h> #define N (100000+5) using namespace std; inline int ...

  7. 实用的 atom 插件

    推荐几款我喜欢的Atom插件 时间 2017-05-05 09:00:00  Hi Linux 原文  http://www.hi-linux.com/posts/28459.html 主题 Atom ...

  8. spring 中常用的设计模式

    一. Spring 中常见的设计模式 工厂模式 : BeanFactory 装饰器模式: BeanWrapper 代理模式: AopProxy 单例模式: ApplicationContext 委派模 ...

  9. python模块（转自Yuan先生）

    模块&包(****)                                                                模块(modue)的概念: 在计算机程序的开 ...

  10. Apache服务器性能如何优化

    配置网站,要充分的把系统资源利用出去,榨干系统的一切潜能,让网站速度发挥到极致.Apache,是用户浏览和网站数据的一个中间桥梁.但是在这里,我们虽然做得并不是很多,但是如果心细打理,有些设置也会起到 ...