<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>vue</title>

	<link rel="stylesheet" href="">

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<!-- <script type="text/javascript" src="../js/vue.js"></script> -->

</head>

<body>

<div id="hdcms">

	<hd-slide></hd-slide>

	<hd-news></hd-news>

	<hdcomtent></hdcomtent>

</div>

<script>

	//全局组件,必需要放在new Vue的上面

   Vue.component('hdSlide',{

       template:'<h1>hellow Vue,slide.</h1>',

   });

    var hdNews = {

        template: "<h2>你好后盾人</h2>",

    };

    var hdcomtent = {

        template: "<h2>测试内容</h2>",

    };

    new Vue({

        el: '#hdcms',

		//局部组件 注册组件的名字

        components: {hdNews,hdcomtent}

    });

</script>

</body>

</html>

38.VUE学习之-全局组件和局部组件的更多相关文章

  1. Vue基础学习 --- 全局组件与局部组件

    组件分为 全局组件 局部组件 全局组件 // 语法---Vue.component('组件名', {组件参数}) Vue.component('com1', { template: '<butt ...

  2. 详解vue全局组件与局部组件使用方法

    这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...

  3. Vue 组件&组件之间的通信 之全局组件与局部组件

    在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...

  4. vue -全局组件和局部组件

    1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...

  5. vue组件化初体验 全局组件和局部组件

    vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件  关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...

  6. 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  7. vue中的全局组件和局部组件的应用

    1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...

  8. TZ_16_Vue定义全局组件和局部组件

    1.定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <co ...

  9. VUE3 之 全局组件与局部组件

    1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法  <body> < ...

随机推荐

  1. C#遍历匿名对象的所有属性、value

    Object obj = ,pwd=" }; //遍历匿名对象 foreach (System.Reflection.PropertyInfo p in obj.GetType().GetP ...

  2. Oracle数据库触发器使用（删除触发）

    当我们需要用到触发器的时候,还是很方便,你会指定当我在操作某一事件时触发效果完成我所希望完成的事情:这就是触发器, 下面我给大家上一串代码,这是一个当我在操作删除事件操作时候,我希望把即将删除那条数据 ...

  3. cf914D. Bash and a Tough Math Puzzle(线段树)

    题意 题目链接 Sol 直接在线段树上二分 当左右儿子中的一个不是\(x\)的倍数就继续递归 由于最多递归到一个叶子节点,所以复杂度是对的 开始时在纠结如果一段区间全是\(x\)的两倍是不是需要特判, ...

  4. 关于修改test9ui布局的一些小笔记

    今早,上IT修真园里,看到师兄大娃很负责任的将我任务里的项目的排版,3,6,7的列了出来. 谢谢师兄,那么负责任的照看师弟. 言归正传,我一开始,直接按照师兄的指示,选择性的优先修改底部.效果也达到了 ...

  5. While, DoWhile in WorkFlow.

    On 03/03/2010, in 4.0, WF, by bcakiroglu While Activity In a While activity, the activity in the Bod ...

  6. EF--Model First

    Model First先设计Model对象,再由对象生成数据库. 1.新建控制台项目,名称ModelFirst,确定. 2.点击选中项目,右键-->添加-->新建项目--选择数据模板--& ...

  7. Row_number() OVER(PARTITION BY xxx ORDER BY XXX）分组排序

    --//创建一个信息表 ,) ,),st_name ),class ),score ,)) --//插入测试数据============start=================== insert ...

  8. JavaScript 闭包的详细分享（三种创建方式）（附小实例）

    JavaScript闭包的详细理解 一.原理:闭包函数--指有权访问私有函数里面的变量和对象还有方法等:通俗的讲就是突破私有函数的作用域,让函数外面能够使用函数里面的变量及方法. 1.第一种创建方式 ...

  9. golang 2行代码在基于arm linux的树莓派、orangepi上运行http web服务

    go语言(golang)简化了跨平台交叉编译步骤,支持在windows系统下交叉编译基于arm+linux平台的应用,运行时无需其它依赖库.以下以一个简单的http server为例,先上源码: ** ...

  10. 利用批处理结合Msbuild实现快速编译

    我们经常在用vs2005做项目的时候会把一个项目分成几个模块(不管是对于功能上,还是系统构架上面),为的是以后部署,还有修改维护时候的方便.这样就会带来一个问题,随着模块的增加(这里所说得每个模块就是 ...