<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my></my>
<!-- 现在想要我的组件实现的效果和<div><span></span></div>的实现效果一样 -->
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<!--
分类 页面级组件：1.一个页面是一个组件
2.将可复用的部分抽离出来 基础组件
-->
<!-- vue中的组件是一个自定义标签 -->
<!-- vue可以给这些标签赋予一定的意义 -->
<!-- 根据用法划分 全局组件：可以声明一次在任何地方使用 局部组件：必须告诉这个组件属于谁
一般写插件的时候 用全局组件的时候多一些
-->
<script>
// 注意：
// 组件名尽量不要带有大写 多个单词用-
//
Vue.component('my',{
 
//一个对象可以看成一个组件
 
// 这里的意思是 用template这个模板里面的内容 替换标签中的内容
// 这里依然可以在自己的模板中拿到自己的数据
 
template:'<div>{{msg}}</div>',
 
data(){//组件中的数据必须是函数类型 返回一个实例（对象） 作为实例的数据
　　return {msg:'嘻嘻嘻ixixiixixi'}

}

})
let vm=new Vue({
el:'#app',
})
</script>
</body>
</html>

Vue创建全局组件的更多相关文章

  1. vue（3）—— vue的全局组件、局部组件

    组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...

  2. vue通过extend动态创建全局组件（插件）学习小记

    测试环境:nodejs+webpack,例子是看文章的,注释为自己的理解 创建一个toast.vue文件: <template> <div class="wrap" ...

  3. vue 的全局组件和 局部组件

    vue组件局部与全局注册的区别   //局部注册 var mycomponent = new extend({        <!--Vue.extend()是Vue构造器的扩展,调用Vue.e ...

  4. vue定义全局组件

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

  5. vue 注册全局组件

    注册全局组件有啥好处呢? 提高代码的复用性:哪里需要写哪里,贼方便,就写一个标签:减少代码量:可以再配合slot一起使用,咦~~,舒服 为了让整个项目的可读性,我创建一个文件统一存放全局组件 1.创建 ...

  6. vue中全局组件与局部组件的注册，以及动态绑定props值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue创建局部组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. VUE注册全局组件和局部组件

    全局组件 第一步:在components文件夹下建立一个子文件Users.vue <template> <div class="users"> {{msg} ...

  9. vue自定义全局组件(自定义插件)

    有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用elemen ...

随机推荐

  1. Xcode中常用的快捷键(原文链接http://www.cocoachina.com/ios/20141224/10752.html)

    Xcode导航快捷键 1.工程导航器:Command+1 快速浏览代码.图片以及用户界面文件. 2.显示/隐藏导航器面板:Command+0 当你在对屏幕进行截图的时候可能会想要隐藏起与你感兴趣内容的 ...

  2. Delphi 源代码生成器

  3. 查看 MySQL 数据库的编译参数

    grep CONFIGURE_LINE /app/mysql/bin/mysqlbug 提示:还发现很多人先 cat,在 grep,很不专业,应杜绝. 范例 3: [root@VM-001~]# gr ...

  4. python-函数2（调用）

    python-函数2(调用) 1.实参和形参调用 2.默认调用 3.参数驵调用 1.实参和形参调用 def test5(x,y): #形参 print(x) print(y) y=1 x=2 test ...

  5. Linux部署Redis及PHP-redis扩展

    Redis是一个key-value存储系统,属于我们常说的NoSQL.它遵守BSD协议.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.它常用在缓存.队列.P ...

  6. web部署命令简单记录

    非 root 用户设置环境变量:在< .bash_profile >中设置 后台运行:nohup dosomething >> log.out & nginx 启动ng ...

  7. Jmeter线程组间传递参数

    现在做测试和以前不太一样了,以前只要站在一个用户的角度做端到端的UI测试就可以了,现在不会做接口测试,出去都不好意思和别人打招呼.那提到接口测试,就不得不提一下接口测试利器Jmeter,大家也都知道, ...

  8. C++ 6小时刷完面向对象

    **本篇博文参考视频见我上一篇博文的第一行**### 类和对象的声明- 类的声明```class People{ int a; void fun(){ cout<<"fun&qu ...

  9. 关于FileChannel的获取方式之open方法详解

    FileChannel.open(Path path, OpenOption... options); 例子使用JDK1.8 FileChannel open方法源码: public static F ...

  10. 连接gitlab

    https://www.cnblogs.com/mengyu/p/7761340.html 一.PyCharm配置Git的环境 1.PyCharm 连接Git首先需要本机安装Git软件; 2.PyCh ...