[Vue] Import component into page
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的更多相关文章
- vue之component
因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data.computed.watch.methods 以及生命周期钩子等.仅有的例外是像 el 这样根实例特有的选 ...
- vue & child component & props
vue & child component & props vue pass data to child component https://vuejs.org/v2/guide/co ...
- 前端性能优化成神之路--vue组件懒加载(Vue Lazy Component )
---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...
- Vue dynamic component All In One
Vue dynamic component All In One Vue 动态组件 vue 2.x https://vuejs.org/v2/guide/components-dynamic-asyn ...
- [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 ...
- Vue.js——component(组件)
概念: 组件(Component)是自定义元素. 作用: 可以扩展HTML元素,封装可重用的代码. <div id="myView"> <!-- 把学生的数据循环 ...
- 关于Vue的component制作dialog组件
其实原理很简单,兴个粟子, 点击按钮出现 dialog 弹出杠, 将dialog做成一个组件,components/dialog.vue 就是在components里面新建一个vue.将这个vue做为 ...
- vue19 组建 Vue.extend component、组件模版、动态组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue组件component创建及使用
组件化与模块化的区别 什么是组件:组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块 ,将来我们需要什么功能,就可以去调用对应的组件即可 组件化与模块化的不同: ...
随机推荐
- BZOJ5137: [Usaco2017 Dec]Standing Out from the Herd(广义后缀自动机,Parent树)
Description Just like humans, cows often appreciate feeling they are unique in some way. Since Farme ...
- hibernate 注解配置<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/X
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- CentOS下利用Docker部署Surging
原文:CentOS下利用Docker部署Surging 1. 安装Centos, 配置固定ip配置文件地址vi /etc/sysconfig/network-scripts/ifcfg-ens33`` ...
- 使用mybatis generator 生成annotation形式的mapper
最近使用mybatisgenerator时,希望生成annotation的mapper,在网上基本桑没有相关配置,记录,做以下记录: <?xml version="1.0" ...
- MySql开发之函数
1,在mySql常见的文本函数中常见的文本函数例如以下表所看到的: 2,数字函数例如以下: 3,日期和时间函数: 4,格式化日期和时间 使用的函数例如以下DATE_FORMAT()和TIME_FORM ...
- [Angular] Stagger animation v4.3.3
For example, when we open a form, we want to see all the inputs fields comes into one by one. Code f ...
- php课程 10-35 php实现文件上传的注意事项是什么
php课程 10-35 php实现文件上传的注意事项是什么 一.总结 一句话总结:记得限制大小和类型,还有就是用move_uploaded_file($sfile,$dfile);函数把上传到php临 ...
- linux 查询制定目录的制定内容
//.点为查找当前目录 下 的 所有 *.php 文件里 有 hello 的文件 find . -name "*.php" | xargs grep "hello&quo ...
- 每日技术总结:setInterval,setTimeout,文本溢出,小程序,wepy
前言: 项目背景:vue,电商,商品详情页 1.倒计时,倒计到0秒时停止 data () { return { n: 10 } }, created () { let int = setInterva ...
- ECMAScript5和ECMAScript6_浏览器支持情况
ECMAScript5浏览器支持情况: Opera 11.60 Internet Explorer 9* Firefox 4 Safari 5.1** Chrome 13 * IE9不支持严格模式 - ...