在components新建一个vue组件:

<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template> <script>
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped>
h1, h2 {
font-weight: normal;
}
</style>

然后  在app.vue中引用

import Hello from './components/Hello'

如果加注释的话   :  需要注意//(中间需要有一个空格 语法) inport

然后使用:

export default {
name: 'app',
components: {
Hello
}
}

Vue 1组件的使用的更多相关文章

  1. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  2. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  3. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  4. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  5. Vue动态组件

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...

  6. vue中组件的四种方法总结

    希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...

  7. 如何抽象一个 Vue 公共组件

    之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...

  8. vue的组件和生命周期

    Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...

  9. 为什么VUE注册组件命名时不能用大写的?

    这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...

  10. vue的组件化运用(数据在两个组件互传,小问题总结)

    一.vue的组件化应用 首先,知道有哪些相关的属性需要用到,再慢慢去理解,运用. 1.两个vue页面 2. slot占位符(可用可不用) 3.props内置属性 4.watch监听函数 5.impor ...

随机推荐

  1. Five Great .NET Framework 4.5 Features (五大特性)

    [译].Net 4.5 的五项强大新特性   本文原文:Five Great .NET Framework 4.5 Features译者:冰河魔法师 目录 介绍 特性一:async和await 特性二 ...

  2. HashMap与TreeMap按照key和value排序

    package com.sort; import java.util.ArrayList; import java.util.Collections; import java.util.Compara ...

  3. redis系列--主从复制以及redis复制演进

    一.前言 在之前的文章已经详细介绍了redis入门基础已经持久化相关内容包括redis4.0所提供的混合持久化. 通过持久化功能,Redis保证了即使在服务器宕机情况下数据的丢失非常少.但是如果这台服 ...

  4. hibernate查询oracle数据库表报错SQL state [null]; error code [17027]; 流已被关闭; nested exception is java.sql.SQLException: 流已被关闭

    把表字段类型 long 修改为 number类型即可

  5. Linux alias别名命令

    首先介绍一下命令的别名,怎么查看的呢? 咱们使用which命令就可以查看的到它完整的命令是怎样的 [root@master ~]# which ls alias ls='ls --color=auto ...

  6. http协议相关

    HTTP请求方法 HTTP消息头 HTTP请求头 HTTP响应头 HTTP cookie机制和实现原理 HTTP请求方法 超文本传输协议(HTTP, HyperText Transfer Protoc ...

  7. 『转』android官网翻译好的蓝牙API接口说明

    Develop API Guides 连接 蓝牙 本文内容 基础知识 蓝牙权限 设置蓝牙 查找设备 查询配对的设备 发现设备 连接设备 连接为服务器 连接为客户端 管理连接 使用配置文件 供应商特定的 ...

  8. kbmMWLog同时输出日志到多个日志管理器

    kbmMWLog日志框架,针对不同的业务情况,提供了多种日志管理器: TkbmMWStreamLogManager TkbmMWLocalFileLogManager TkbmMWSystemLogM ...

  9. 下载从网页里面提取出来的图片(将url指向的图片下载并保存、从命名)

    import os #创建文件夹 from urllib import request #下载图片 if not os.path.exists('文件夹名字'): #创建文件夹名字 os.mkdir( ...

  10. Golang福利爬虫

    没事的时候跑两把,穷人专用. package main import ( "bytes" "fmt" "github.com/PuerkitoBio/ ...