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. NuGet 使用及dll管理

    NuGet学习笔记(1)——初识NuGet及快速安装使用 作者: 懒惰的肥兔  来源: 博客园  发布时间: 2012-05-20 21:33  阅读: 53168 次  推荐: 33   原文链接  ...

  2. 6.CPP风格数组

    //数组初始化 1 #include <iostream> using namespace std; void main() { //C int a[5] = { 1,2,3,4,5 }; ...

  3. Jquery+Ajax+Bootstrap Paginator实现分页的拼接

    效果图如下 jsp页面引入bootstrap样式,jquery和bootstrap-paginator.js <link type="text/css" rel=" ...

  4. 00099_commons-IO

    1.导入classpath (1)加入classpath的第三方jar包内的class文件才能在项目中使用: (2)创建lib文件夹: (3)将commons-io.jar拷贝到lib文件夹: (4) ...

  5. COGS——C2274. [HEOI 2016] tree

    http://www.cogs.pro/cogs/problem/problem.php?pid=2274 ★☆   输入文件:heoi2016_tree.in   输出文件:heoi2016_tre ...

  6. uvaoj-1595:symmetry

    1595 - Symmetry The figure shown on the left is left-right symmetric as it is possible to fold the s ...

  7. (转)DOS批处理的字符串功能

    批处理有着具有非常强大的字符串处理能力,其功能绝不低于C语言里面的字符串函数集.批处理中可实现的字符串处理功能有:截取字符串内容.替换字符串特定字段.合并字符串.扩充字符串等功能.下面对这些功能一一进 ...

  8. loadrunne-- Analysis 分析器

    本文转自:https://www.cnblogs.com/Chilam007/p/6445165.html Analysis简介 分析器就是对测试结果数据进行分析的组件,它是LR三大组件之一,保存着大 ...

  9. 【例题 6-15 UVA - 10129】Play on Words

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 拓扑大水题 [代码] #include <bits/stdc++.h> using namespace std; con ...

  10. Unity3d 布娃娃系统

    选中带骨骼的3d模型 GameObject->Create Other->Ragdoll... 点开发现弹出了一个Create Ragdoll的窗体 前面的基础transform把骨骼拖进 ...