<!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. Java学习路线（完整详细版）

    Java学习路线(完整详细版) https://jingyan.baidu.com/article/c1a3101e110864de656deb83.html

  2. 在docker容器中为elasticsearch配置跨域访问

    一.在docker容器中进入elasticsearch对应的容器 docker exec -it [容器名] /bin/bash 二.安装vim编辑器 因为我们需要更改配置文件,安装过的朋友就不用安装 ...

  3. DataWorks（数据工场）

    一.DataWorks(数据工场) DataWorks系列视频 https://help.aliyun.com/video_list/107549.html?spm=a2c4g.11174359.3. ...

  4. 文件I/O编程 (select)

    Select的I/O多路转接模型是处理I/O复用的一个高效方法.Select函数语法要点所需头文件: #include<sys/types.h> #include<sys/time. ...

  5. C++ 数据类型提高+内存四区

    # 这一章节全部是C语言的内容# 数据类型提高**注意**1.数组作为形参会退化为指针(验证,传参后用sizeof进行打印,可以看出打印出数组的字节为一字节)2.形参在函数上和函数内是一样的,只不过对 ...

  6. OOP三大核心封装继承多态

    OOP支柱 3 个核心:封装 继承 多态 封装就是将实现细节隐藏起来,也起到了数据保护的作用. 继承就是基于已有类来创建新类可以继承基类的核心功能. 在继承中 另外一种代码重用是:包含/委托,这种重用 ...

  7. 【POJ3162】Walking Race 树形dp+单调队列+双指针

    题目大意:给定一棵 N 个节点的无根树,边有边权,现生成一个序列 d,d[i] 表示 i 号节点到树上其他节点距离的最大值.给定一个 m,求 d 序列中最大值和最小值之差不超过 m 的最长连续段的长度 ...

  8. 在HTML页面加载完毕后运行某个js

    js <script type="text/javascript"> window.onload=function(){ //执行} </script> j ...

  9. 在UIScrollView、UICollectionView和UITableView中添加UIRefreshControl实现下拉刷新

    Apple在iOS 6中添加了UIRefreshControl,但只能在UITableViewController中使用,不能在UIScrollView和UICollectionView中使用. 从i ...

  10. 【leetcode】Max Area of Island

    国庆中秋长假过完,又要开始上班啦.先刷个题目找找工作状态. Given a non-empty 2D array grid of 0's and 1's, an island is a group o ...