首先我们在 src目录下新建一个目录 叫”component”,建一个mycomponent.vue文件,然后也让他打2句话吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
 <div id="mycomponent">
 <h1>我是第一个自定义控件</h1>
 <p>{{ msg }}</p>
 </div>
</template>
 
<script type="text/javascript">
 export default{
 data(){
  return{
  msg : "hi i am wjj"
  }
 }
 }
</script>

然后在我们的app.vue里调用他

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<div id="app2">
 <p>{{ message }}</p>
 <input v-model="message"></input>
 <mycomponent></mycomponent>
</div>
</template>
 
<script>
import mycomponent from './component/mycomponent.vue'
export default {
 name: 'app2',
 data () {
 return {
  message: 'Hello Vue.js!'
 }
 },
components: { mycomponent }
}
</script>

这里 有几个知识点

1.Vue的导入操作是在<script></script>标签里。

2.如果存在子/父控件的概念的话,一定要先初始化/加载子控件 。

效果如下:

VUE -- 自定义控件(标签)的更多相关文章

  1. vue实现标签云效果

    闲扯两句 最近想给自己的博客上加上一个3D标签云的效果,用来表示自己博客文章的分组,网上找到了canvas实现的,还有a元素实现的解析3D标签云,我想让标签可以选择和点击,又不想在标签数量较多时操作a ...

  2. vue - audio标签

    audio 标签 <audio :src="current_music" autoplay controls autoloop @end="next_song&qu ...

  3. vue template标签

    在普通的html里面: template标签默认有个 display:none; 属性,并且其里面的内容是不可见的. 在vue里面: template标签类似一个隐藏的div,在审查元素的时候是找不到 ...

  4. Vue里标签嵌套限制问题解决------解析DOM模板时注意事项:

    受到html本身的一些限制,像<ul>.<ol>.<table>.<select>这样的元素里允许包含的元素有限制,而另一些像<option> ...

  5. 8. vue给标签动态绑定title

    在利用vue开发时,如果标签宽度比较小,我们需要利用overflow:hidden;text-overflow:ellipsis;white-space: nowrap;对其进行隐藏,但隐藏后如何读其 ...

  6. Vue自定义标签页,并且在其中渲染Echarts图表

    目录 一.需求说明 二.标签页功能实现 一.需求说明 1.点击标签按钮切换不同的echarts图表,考虑用Ant Design Vue,但是其样式无法自定义 2.div的整体布局样式使用tailwin ...

  7. vue style标签中使用less

    只需要下载相应的包即可:(前提是使用vue-cli搭建的项目) 1.安装less依赖,npm install less less-loader --save 2.即可在相应的vue文件中使用less操 ...

  8. Vue自定义标签

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  9. WebStorm开发Vue自定义标签提示是未知标签解决办法

    打开 File -> Settings -> File Types 在右侧的窗口中找到Vue.js Template 并选中,在下面的窗口中添加 *.vue 即可解决问题. 修改后

随机推荐

  1. 【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能 (转)

    备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇该问题的解决教程,给各位读者带来困扰,还 ...

  2. airTest 实战之 -- 【征途】自动打怪回城卖物品

    airTest是一个跨平台的.基于图像识别的UI自动化测试框架,适用于游戏和App,支持平台有Windows.Android和iOS 官方文档: http://airtest.netease.com/ ...

  3. P3200 [HNOI2009]有趣的数列

    题目描述 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ai}: (2)所有的奇数项满足a1<a3<...<a2n ...

  4. 架构-UML类图

    在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作<UML Distilled: A Brief Guide to the Standard O ...

  5. 怎样把本地的jar包引入到maven工程里面

    有些jar包在maven库里面查找不到,但是maven项目又有用到,此时最简单的方法就是把该jar包放到工程底下某个目录,然后在pom.xml里面配置dependency引入它. 具体如何操作呢? 假 ...

  6. CSU 2136 ——湖南多校对抗赛 I

    2136: 统帅三军! Submit Page   Summary   Time Limit: 1 Sec     Memory Limit: 128 Mb     Submitted: 55     ...

  7. linxu安装方式

    安装Linux操作系统的5种方法以及心得这几天没有调别的东西,想起自己还不太会在没有安装光盘的时候安装Linux,于是试了一下Linux的五种安装方法,下面是我的一些 篇一:安装Linux操作系统的5 ...

  8. 【CF1017F】The Neutral Zone(Bitset,埃氏筛)

    题意: 思路:From https://blog.csdn.net/CSDNjiangshan/article/details/81536536 #include<cstdio> #inc ...

  9. SpringBoot设置事务管理

    关于事务就不介绍了,前面在研究spring的时候就已经研究过了,参考:https://www.cnblogs.com/qlqwjy/p/7296493.html 这里直接研究springboot中事务 ...

  10. 安装ubuntu配置ssh

    vmware安装ubuntu后,必须配置网卡,重新设置MAC,否则无法连接网络(具体方法百度)NAT直连模式xshell连接时host为ifconfig显示的IP地址,不需要设置端口转发,端口还是22 ...