<!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. linux 配置环境变量三种方式

    一:用于当前终端: export PATH=$PATH:<你的要加入的路径> 此方式仅用于当前终端,一旦该终端关闭,则配置失效 二:用于当前用户: vi ~/.bashrc 然后加入:ex ...

  2. React Native 底部导航栏

    首先安装:npm install react-native-tab-navigator   然后再引入文件中    import TabNavigator from 'react-native-tab ...

  3. 自用|DDoS防御产品集合

    这是笔者对国内外的DDoS云防御产品做的一个集合,之前存在自己的文档里很久了,现在修改后发出来大家可以一起看看,有需要的也方便比较按需选择.有免费版的我会放在前面,遇到微量攻击时可以应急,并且也可以感 ...

  4. Django 解决跨域问题（写入到中间件中）

    class MiddlewareMixin(object): def __init__(self, get_response=None): self.get_response = get_respon ...

  5. Codeforces 984 扫雷check 欧几里得b进制分数有限小数判定 f函数最大连续子段

    A /* Huyyt */ #include <bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a)) #define mkp(a,b) ...

  6. 百度贴吧自动回帖的两种方式，使用requests（urllib2）和selenium两种方式回帖

    本文介绍,回复贴吧指定某楼层主的帖子的方法.在这里不介绍无限发主贴和无限回复主贴的方法,无限发主题帖会爆吧,引起别人的反感,并且很容易遭到吧主的封杀:无限回主题帖,会让整个帖子的每楼的回复充满了自己的 ...

  7. Python修炼之路-装饰器、生成器、迭代器

    装饰器 本质:是函数,用来装饰其他函数,也就是为其他函数添加附加功能. 使用情景 1.不能修改被装饰的函数的源代码:        2.不能修改被装饰的函数的调用方式. 在这两种条件下,为函数添加附加 ...

  8. 第三篇：解析库之re、beautifulsoup、pyquery

    BeatifulSoup模块 一.介绍 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Be ...

  9. Tronado【第2篇】：tronado自定义Form组件

    Tronado自定义Form组件 一.获取类里面的静态属性以及动态属性的方法 方式一: # ===========方式一================ class Foo(object): user ...

  10. git学习补充

    关系图 git checkout -- target 放弃 cached 中 对 target 文件内容已作的修改 git checkout . 放弃当前目录下对于 cached 的所有修改. 对比: ...