<!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. 02->交互式图形学--用glut库实现Sierpinski镂垫

    Sierpinski图形是一类有趣的图形,本文结合交互式图形学教材,讲解Sierpinski镂垫图形生成,作为入门图形学编程的第一课.为了简便,本文就2D来进行讨论.实验环境见01 算法 主要是根据随 ...

  2. Git查看历史记录的几种方法

  3. Laravel 迁移检查表是否存在

    Schema::hasTable('TableName'); //检查表释放存在 Schema::hasColumn('tableName', 'columeName'); //检查表是否存在某个字段 ...

  4. CSIC_716_20191125【面向对象编程--类以及类的实例化】

    面向对象编程:是一种编程思想 对象的定义:特征与功能的集合体 优点:可扩展性强 缺点:编程复杂度高,难度偏大 类的定义:一系列对象之间相同特征与技能的结合体 调用类的时候(实例化是时候),发生的事情: ...

  5. leetcode-220-存在重复元素③*

    题目描述: 方法一:二叉搜索树+滑动窗口 方法二:桶排序 O(N) class Solution: def containsNearbyAlmostDuplicate(self, nums: List ...

  6. 【JZOJ6342】Tiny Counting

    description analysis 首先不管\(a,b,c,d\)重复的情况方案数是正逆序对之积 如果考虑\(a,b,c,d\)有重复,只有四种情况,下面括号括起来表示该位置重复 比如\(\{a ...

  7. LOIC Download

    { //https://github.com/NewEraCracker/LOIC }

  8. Windows DHCP服务器

    DHCP服务器 编辑 动态主机配置协议是一个局域网的网络协议.指的是由服务器控制一段IP地址范围,客户机登录服务器时就可以自动获得服务器分配的IP地址和子网掩码.首先, DHCP服务器必须是一台安装有 ...

  9. 线段树离散化+区间更新——cf1179C好题

    绝对是很好的题 把问题转化成当第i个询问的答案是数值x时是否可行 要判断值x是否可行,只要再将问题转化成a数组里>=x的值数量是否严格大于b数组里的>=x的值 那么线段树叶子结点维护对于值 ...

  10. 训练计划Day2

    Day2:线段树(可持久化),平衡树(splay,treap),并查集,树链剖分,动态树,树状数组,点分治(可持久). 线段树模板 //区间最大,and,or #include <cstdio& ...