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. TC快速搜索在win10下不可用

    今天突然发现TC的快速搜索在win10下突然不可用,按Ctrl + s 呼出快速搜索栏后半天不响应也无法输入文字.论坛里给出来的建议是将 QuickSearch 2.2.3 升级到 2.2.6,目前插 ...

  2. Http协议的断点续传下载器,使用观察者模式监视下载进度,使用xml保存下载进度。

    下载使用Http协议,为了做到断点续传,在点击暂停后,将已下载的大小等数据通过Json存入xml中,当继续传输的时候从xml文件中读取大小继续下载(好几个月前写的,真的想不起来了) bool CHtt ...

  3. 洛谷 【P1252】马拉松接力赛

    洛谷 [P1252]马拉松接力赛 题目描述 某城市冬季举办环城25km马拉松接力赛,每个代表队有5人参加比赛,比赛要求每个的每名参赛选手只能跑一次,一次至少跑1km.最多只能跑10km,而且每个选手所 ...

  4. 5.Zookeeper的两种安装和配置(Windows):单机模式与集群模式

    转自:https://blog.csdn.net/a906998248/article/details/50815031

  5. Android RxBus的实现及简单使用

    RxJava目前已经很火了,如果你尚未了解请看这里.对于RxJava这里不多做介绍.RxBus并不是一个库,而是一种模式.相信大多数开发者都使用过EventBus,作为事件总线通信库,如果你的项目已经 ...

  6. Mine Vison base on VC++ and procilica Gige Vison SDK

    This is my first vision base on VC++6.0. I am so happy to record this time i succesfully create it b ...

  7. 16.用Spring Boot颠覆Java应用开发

    转自:https://www.cnblogs.com/aishangJava/p/5971288.html Java开发概述: 使用Java做Web应用开发已经有近20年的历史了,从最初的Servle ...

  8. 硬件——nrf51822第一篇,GPIO的使用

    未完,待续...... 本实现是基于一个开发箱,包括:综合应用开发系统主板XT-EDU-AK   1套: 手持终端系统 XT-EDU-HK 1套: GPIO操作 工程: 这是一个关于流水灯的程序: 我 ...

  9. Android 蓝牙扫描代码

    /** * Created by rbq on 2016/11/1. */ import android.bluetooth.BluetoothAdapter; import android.blue ...

  10. stm32的串口中断

    下面有很多问题没有验证: 在设置USART_CR1中的TE位时,会发送一个空闲帧作为第一次数据发送, 目前我所了解的串口中断发送,有两种方式: 一个是:TC 一个是:TXE 这是判断两个标志位, 第一 ...