<!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. 榨取kkksc03

    题目描述 洛谷的运营组决定,如果一名oier向他的教练推荐洛谷,并能够成功的使用(成功使用的定义是:该团队有20个或以上的成员,上传10道以上的私有题目,布置过一次作业并成功举办过一次公开比赛),那么 ...

  2. 客户端IAP二次验证

    1.首先苹果IAP把每次购买抽象成了一个事务(SKPaymentTransaction), - (void)productsRequest:(SKProductsRequest *)request d ...

  3. 2018-9-29-Roslyn-通过-Nuget-引用源代码-在-VS-智能提示正常但是无法编译

    title author date CreateTime categories Roslyn 通过 Nuget 引用源代码 在 VS 智能提示正常但是无法编译 lindexi 2018-09-29 1 ...

  4. JS事件 鼠标移开事件（onmouseout）鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。

    鼠标移开事件(onmouseout) 鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序. 当把鼠标移动到"登录"按钮上,然后再移开时,触发onmouseout ...

  5. UVALive7461 - Separating Pebbles 判断两个凸包相交

    //UVALive7461 - Separating Pebbles 判断两个凸包相交 #include <bits/stdc++.h> using namespace std; #def ...

  6. Sublime Text最舒服的主题

    Theme - Afterglow (官网链接) 贴上 preferences -> settings 里面的配置 { "theme": "Afterglow-gr ...

  7. PHP缓存技术简单介绍

    一.数据缓存 这里所说的数据缓存是指数据库查询缓存,每次访问页面的时候,都会先检测相应的缓存数据是否存在,如果不存在,就连接数据库,得到数据,并把查询结果序列化后保存到文件中,以后同样的查询结果就直接 ...

  8. ImageMagick convert多张照片JPG转成pdf格式，pdfunite合并PDF文件

      在认识ImageMagick之前,我***的图像浏览软件是KuickShow,截图软件是KSnapShot,这两款软件都是KDE附带的软件,用起来也是蛮方便的.在一次偶然的机会中,我遇到了Imag ...

  9. 框架前期准备篇之AutoFac常见用法总结 转载

    框架前期准备篇之AutoFac常见用法总结 一. 说在前面的话 凡是大约工作在两年以上的朋友们,或多或少都会接触到一些框架搭建方面的知识,只要一谈到框架搭建这个问题或者最佳用法这个问题,势必会引起一点 ...

  10. 接着上回，导包正确之后，出现javabean.Friend cannot be cast to java.util.List，的错误。找了很久。以为是User user0作为参数，改成了String username还是错误，看了看listFriend.jsp没有错误，我想会不会是包多了，导致类型复杂。最后发现包少了一个：

    import org.apache.commons.dbutils.handlers.BeanListHandler;这个包,BeanListHandler让我发现List<Friend> ...