Components are one of the most powerful features of Vue. Let's take a look at how to write our first components and make use of them in a parent component.

Create a component:

// item-description.vue

<template>
<h1>
This is item description
</h1>
</template> <script>
export default {
name: 'item-description'
}
</script>

Page:

<template>

    <section class="container">
<item-description></item-description>
</section>
</template> <script>
import ItemDescription from '../components/item-description';
export default {
components: {
ItemDescription
}
}
</script>

[Vue] Import component into page的更多相关文章

  1. vue之component

    因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data.computed.watch.methods 以及生命周期钩子等.仅有的例外是像 el 这样根实例特有的选 ...

  2. vue & child component & props

    vue & child component & props vue pass data to child component https://vuejs.org/v2/guide/co ...

  3. 前端性能优化成神之路--vue组件懒加载(Vue Lazy Component )

    ---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...

  4. Vue dynamic component All In One

    Vue dynamic component All In One Vue 动态组件 vue 2.x https://vuejs.org/v2/guide/components-dynamic-asyn ...

  5. [Vue] Use Vue.js Component Computed Properties

    You can add computed properties to a component to calculate a property on the fly. The benefit of th ...

  6. Vue.js——component(组件)

    概念: 组件(Component)是自定义元素. 作用: 可以扩展HTML元素,封装可重用的代码. <div id="myView"> <!-- 把学生的数据循环 ...

  7. 关于Vue的component制作dialog组件

    其实原理很简单,兴个粟子, 点击按钮出现 dialog 弹出杠, 将dialog做成一个组件,components/dialog.vue 就是在components里面新建一个vue.将这个vue做为 ...

  8. vue19 组建 Vue.extend component、组件模版、动态组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Vue组件component创建及使用

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

随机推荐

  1. Django快速搭建博客

    准备工作: 1.Python 2.Django 3.Git 安装Python: 官网下载 安装Django: #安装最新版本的Django $ pip install django #或者指定安装版本 ...

  2. Direct2D开发:Direct2D 和 GDI 互操作性概述

    本主题说明如何结合使用 Direct2D 和 GDI(可能为英文网页).有两种方法可以结合使用 Direct2D 和 GDI:您可以将 GDI 内容写入与 Direct2D GDI 兼容的呈现器目标, ...

  3. Android中的帧动画与补间动画的使用

    前言 在日常开发中,我们有时候须要一些好看的动画效果,这时能够充分利用Android提供的这几种动画来实现. Android提供了3种类型的动画: 补间动画:补间动画能够应用于View,让你能够定义一 ...

  4. POJ1308——Is It A Tree?

    Is It A Tree? Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 22631   Accepted: 7756 De ...

  5. 关于查看域名A记录,MX记录,CNAME记录-NSLOOKUP用法介绍

    关于查看域名A记录,MX记录,CNAME记录-NSLOOKUP用法介绍 用ping查看域名的IP地址,这样只能查到域名的A记录,要查询域名的MX记录.CNAME记录或NS记录,可用nslookup命令 ...

  6. opencv cvPreCornerDetect

    关于OpenCv中cvPreCornerDetect 运行出错解决方法 http://m.blog.csdn.net/blog/wode0239 由于书本上示例的不全,相信大家在做的时候,肯定是无从下 ...

  7. 洛谷 P1727 计算π

    P1727 计算π 题目背景 <爱与愁的故事第二弹·compute>第一章. 题目描述 中秋至,博饼声铿锵不断.爱与愁大神兴致勃勃地到学校博饼,结果抱回家的只有一秀二举.爱与愁大神十分生气 ...

  8. 优雅地使用Retrofit+RxJava(二)

    前言 在我上一篇讲Retrofit+RxJava在MVP模式中优雅地处理异常(一)中,发现非常多网友发邮箱给我表示期待我的下一篇文章,正好趁着清明假期.我就写写平时我在使用RxJava+Retrofi ...

  9. SQLite header and source version mismatch解决方案

    SQLite header and source version mismatch 最近需要用到sqlite,去官网下了一个编译安装后打开sqlite3出现SQLite header and sour ...

  10. [Redis专辑][1]ubuntu12.04下安装php-redis的方法和步骤

    首次公布路径:phpredis的安装 非常久非常久没有写博文了,好多博文都没有整理完成,今天才抽时间整理完这一篇博文,希望能对大家有一定的帮助 首先对redis做个简单的介绍: Redis 是全然开源 ...