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. js--递归详解

    1 函数的调用 eg1:阶乘算法 var f = function (x) { if (x === 1) { return 1; } else { return x * f(x - 1); } }; ...

  2. JavaScript学习总结(2)——JavaScript数据类型判断

    最近做项目中遇到了一些关于javascript数据类型的判断处理,上网找了一下资料,并且亲自验证了各种数据类型的判断,在此做一个总结吧! 一.JS中的数据类型  1.数值型(Number):包括整数. ...

  3. 使用JOTM实现分布式事务管理(多数据源)

    使用spring和hibernate可以很方便的实现一个数据源的事务管理,但是如果需要同时对多个数据源进行事务控制,并且不想使用重量级容器提供的机制的话,可以使用JOTM达到目的. JOTM的配置十分 ...

  4. 用py2exe打包成一个exe文件

    用py2exe打包成一个exe文件 http://blog.csdn.net/franktan2010/article/details/46514607

  5. CORS原理

    http://blog.csdn.net/renfufei/article/details/51675148 https://html.spec.whatwg.org/multipage/infras ...

  6. 14.inline与namespace使用

    #include <iostream> using namespace std; namespace all { //inline作用为默认调用 inline namespace V201 ...

  7. 117.C语言实现桌面输出图片,桌面输出文字,桌面画线

    通过获取窗口句柄,然后获取窗口DC,然后画图 #include <Windows.h> #include <stdio.h> //桌面画线 void drawLine() { ...

  8. CSS3常用属性及用法

    1.transition: 过渡属性,可以替代flash和javascript的效果 兼容性:Internet Explorer 9 以及更早的版本,不支持 transition 属性. Chrome ...

  9. Android车载导航的一些困境

    车载导航从最初的用解码芯片,过渡到用WinCE系统,已经形成了一个较大的产业.车载导航使用上的一些大原则,基本上被固定了下来.如今WinCE走到了尽头,Android车载导航開始发力,但由于Andro ...

  10. iOS开发RunLoop学习:一:RunLoop简单介绍

    一:RunLoop的简单介绍 #import "ViewController.h" @interface ViewController () @end @implementatio ...