<!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://blog.csdn.net/V0218/article/details/74945203 Java的进制转换 进制转换原理 十进制 转 二进制: ...

  2. git 计算commit

    转自:https://www.cnblogs.com/jwentest/p/8186712.html#!/bin/bash f1="$1*" f2="$2*" ...

  3. 上载和下载CSV文件

    sap中把txt .excel .文件上载到内表中,txt和csv速度最快. excel文件导出的csv是用,分隔符分隔的,如果单元格的文本中就有逗号,这样会和分隔符逗号混淆,最好abap产生csv文 ...

  4. linux的安全--Selinux，tcp_wrappers，iptables使用

    一.linux安全 安全主要是端口与服务的对应配置 1.1 linux安全主要通过下面三个进行加固 Selinux----主要是对内核的访问权限加以控制 tcp_wrappers---一定程度上限制某 ...

  5. 关于session和cookie的区别

    以前对于session和cookie的认识,就只是粗略的知道cookie保存在客户端,而session则保存在服务端. 如今查了些资料,对session和cookie也有了一个初步的认识,现在来总结一 ...

  6. Wine-Staging 4.9 发布，增添一些新补丁

    Wine-Staging的工作还在继续,到4.9版为止,在上游Wine代码库上有超过830个补丁. 在上周五的Wine 4.9发布之后,Wine-Staging 4.9已经发布了,之前的一些暂存工作现 ...

  7. 【gin-vue-admin】 使用go和vue 快速搭建一个项目模板

    gin-vue-admin gin+vue开源快速项目模板 项目地址:https://github.com/piexlmax/gin-vue-admin 增加了 micro-service-test分 ...

  8. idea 新手入门配置

    1.配置新建类时,创建者信息 2.配置svn 1. 在idea中不显示无用的内容,配置如下  .hprof;.iml;.pyc;.pyo;.rbc;.yarb;~;.DS_Store;.git;.hg ...

  9. java 集合之ArrayList、Vector、LinkedList、CopyOnWriteArrayList

    ArrayList 线程不安全. 底层Object[]数组实现,用transient关键字修饰,防止序列化,然后重写了readObject和writeObject方法,为了提高传输效率. 插入时会判断 ...

  10. ZROI 19.08.11模拟赛

    传送门 写在前面:为了保护正睿题目版权,这里不放题面,只写题解. dlstql,wsl A \(10pts:\) \(a=100,T=100\),对每个排列构造一个反的,一步到位即可. \(20pts ...