<!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. 【POJ】3259 Wormholes

    题目链接:http://poj.org/problem?id=3259 题意:n个农场,m条双向路径,w条单向路径(虫洞).单向虫洞路径是负值.农夫想知道自己能不能看到自己(X). 题解:其实刚开始没 ...

  2. 搭建HDFS HA

    搭建HDFS HA 1.服务器角色规划 hd-01(192.168.1.99) hd-02 (192.168.1.100) hd-03 (192.168.1.101) NameNode NameNod ...

  3. Idea中创建maven骨架的命令

    如下:通过命令化在Idea中创建骨架成功后,以后项目直接引用导入骨架直接在依赖框架上面进行相关模块开发: 1.mvn archetype:create-from-project 2.mvn clean ...

  4. Linux和Windows下ping命令详解

    转:http://linux.chinaitlab.com/command/829332.html 一.Linux下的ping参数 用途 发送一个回送信号请求给网络主机. 语法 ping [ -d] ...

  5. php开发面试题---面试常用英语（你能介绍你自己吗？）

    php开发面试题---面试常用英语(你能介绍你自己吗?) 一.总结 一句话总结: Could you please describe yourself? 1.为什么觉得自己适合这份工作? Why do ...

  6. HTTP协议请求篇

    http协议的基本概念 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.是工作在tcp/ip协议基础上的,所有的WWW文件都必须 ...

  7. import time 进度条动态输出26个字母

    # 2018-08-06 19:42:51 import time # 调用时间模块 num = 97 # 字母a while num <= 115: # print(chr(num), end ...

  8. Mysql优化系列之数据类型优化

    本篇是优化系列的第一篇:数据类型 为了不产生赘述,尽量用简洁的语言来描述. 在选择数据类型之前,首先要知道几个原则: 更小的通常更好 尽量使用可以正确存储数据的最小数据类型.更小的数据类型意味着更快, ...

  9. POJ 1269 /// 判断两条直线的位置关系

    题目大意: t个测试用例 每次给出一对直线的两点 判断直线的相对关系 平行输出NODE 重合输出LINE 相交输出POINT和交点坐标 1.直线平行 两向量叉积为0 2.求两直线ab与cd交点 设直线 ...

  10. android ListView 获取点击的选项

    需要调用listView的setOnItemClickListener方法 重写OnItemClickListener类的onItemClick 方法,onItemClick 方法有三个参数 @Ove ...