<!DOCTYPE html>

<html lang='en'>

<head>

 <meta charset='UTF-8'>

 <meta http-equiv='X-UA-Compatible' content='IE=edge'>

 <meta name='viewport' content='width=device-width, initial-scale=1.0'>

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

 <title></title>

</head>

<body>

 <div id='app'>

  <blog-list :books="books"></blog-list>

 </div>

 <script>

    Vue.component("blog-list",{

      props:{

        books:{

          type:Array

        }

      },

      template: `

        <table>

          <thead>

            <tr>

              <th>序号</th>

              <th>书名</th>

              <th>作者</th>

            </tr>

          </thead>

          <tbody>

            <tr v-for="(book,index) in books">

              <th>{{index+1}}</th>

              <td>{{book.title}}</td>

              <td>{{book.author}}</td>

            </tr>

          </tbody>

        </table> `

      })

     new Vue({

      el:'#app',

      data:{

        books:[{

          'title':"三国演义",

          'author':"罗贯中",

        },

        {

          'title':"水浒传",

          'author':"施耐庵",

        },

        {

          'title':"红楼梦",

          'author':"曹雪芹",

        },

        {

          'title':"西游记",

          'author':"吴承恩",

        }],

      }

    }

 )

</script>

</body>

</html>

vue学习14-自定义组件添加属性的更多相关文章

  1. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  2. NO.08--VUE之自定义组件添加原生事件

    前几篇给大家分享了我的业余的“薅羊毛”的经历,回归正题,讲回vue吧: 许多vue新手在工作开发中会遇到一个问题,直接使用 button 添加原生事件是没有问题的,但是使用自定义组件添加原生事件时,就 ...

  3. form-create教程:给内置组件和自定义组件添加事件

    本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...

  4. vue自定义组件添加原生事件监听

    注:全局或局部注册的组件称为子组件,其中声明的组件名称(如下demo中的child)是一个自定义组件 Demo1-直接给父组件添加事件监听 <!DOCTYPE html> <html ...

  5. vue.js2.0 自定义组件初体验

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

  6. Android学习：自定义组件，DrawView

    布局文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to ...

  7. vue框架之自定义组件中使用v-model

    通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...

  8. Vue学习系列(二)——组件详解

    前言 在上一篇初识Vue核心中,我们已经熟悉了vue的两大核心,理解了Vue的构建方式,通过基本的指令控制DOM,实现提高应用开发效率和可维护性.而这一篇呢,将对Vue视图组件的核心概念进行详细说明. ...

  9. Vue.extend提供自定义组件的构造器

    Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器.经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元 ...

随机推荐

  1. [WPF] 实现 WPF 的 Inner Shadow

    在 WPF 中,我们通常用 DropShadow 做阴影效果,但都是做外阴影.内阴影(Inner Shadow)的话其实也不是不可以,就是有些曲折.这篇文章介绍几种做内引用的做法. 文章涉及到以下概念 ...

  2. 【LeetCode】405. Convert a Number to Hexadecimal 解题报告（Java & Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 Java解法 Python解法 日期 题目地址:ht ...

  3. 【九度OJ】题目1087：约数的个数 解题报告

    [九度OJ]题目1087:约数的个数 解题报告 标签(空格分隔): 九度OJ 原题地址:http://ac.jobdu.com/problem.php?pid=1087 题目描述: 输入n个整数,依次 ...

  4. 【LeetCode】207. Course Schedule 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/course-s ...

  5. 食物链(poj1182)

    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 57387   Accepted: 16781 Description ...

  6. WebRTC下 的 NAT 穿透技术

    NAT的概念模型 NAT名字很准确,网络地址转换,就是替换IP报文头部的地址信息.NAT通常部署在一个组织的网络出口位置,通过将内部网络IP地址替换为出口的IP地址提供公网可达性和上层协议的连接能力. ...

  7. Java初学者作业——编写Java程序，在控制台中输入一个数字，要求定义方法实现找出能够整除该数字的所有数字。

    返回本章节 返回作业目录 需求说明: 编写Java程序,在控制台中输入一个数字,要求定义方法实现找出能够整除该数字的所有数字. 实现思路: 定义方法findNums(),用于实现查找所有能够整除指定数 ...

  8. Notepad++快速选中多行

    我们在编辑文章的时候, 通常需要选择多行连续的文本, 可以使用Shift+鼠标选择多行文本, 如果一次需要选择的文本太多, 比如选择10000到20000行之间的文本, 鼠标要拉好久,手一累一抖,又要 ...

  9. 【Redhat系列linux防火墙工具】firewalld与iptables防火墙工具的激烈碰撞

    前言 iptables与firewalld防火墙管理工具在linux发行版Redhat7系列使用较为广泛. UFW则是在linux发行版Ubuntu下进行管理防火墙的一款管理工具. 在选用防火墙工具的 ...

  10. python 插入mysql数据库字符串中含有单引号或双引号报错

    出现问题场景:使用mysql数据库管理接口测试用例,新增接口用例时,传入的paras内容,有多层嵌套的时候,就会有["]双引号括住[']单引号的情况,可能在插入单双引号的数据到数据库的时候, ...