<!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. 关于hibernate save方法未能存储数据入库的处理过程

    关于hibernate save方法未能存储数据入库的处理过程2018年04月18日 10:57:49 守望dfdfdf 阅读数:230更多个人分类: 工作 问题编辑版权声明:本文为博主原创文章,转载 ...

  2. mysql-查询(DQL)

    + 注释:mysql中的+号只有一个作用,就是运算符,没有连接字符串的作用,连接字符串用concat. ;两个操作数都是数值型,则做加法运算. ; :只要其中有一个时字符型,则会试图将字符转换为数值型 ...

  3. webpack打包将配置文件单独抽离不压缩打包

    webpack.config.js: plugins: [ //提取公共模块 new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', ch ...

  4. JQ单双引号转义

    var temp = "${row.address_province}"; alert(temp);——————即变量temp alert("\'"+temp+ ...

  5. mysql的三种索引

    MySQL中的索引分为3种: 1,主键索引:即用主键当唯一索引 2,常规索引:实现方式为B树和哈希表 3,全文索引:实现原理类似倒排索引,常用来查询字段中包含关键字 下面复习下B-TREE和hash- ...

  6. HBuilder中改造console.info

    HBuilder的js中console.info只会输出头一个参数,与谷歌浏览器行为不符合.让人很不习惯. 于是,对其改造一番. window.console.print=window.console ...

  7. django定时任务小插件

    需求 每天请求一封邮件,并读取该邮件 这个其实可以使用linux 自带了crontab实现,但是毕竟是django 开发.想着不知道有没有方法可以从django 中实现. 简单搜索了下,这方面的方法确 ...

  8. sharepoint2010的几个类型字段赋值和取值的方法

    1.日期类型查询,需要转换,方法如下: //转换时间 string startdate = SPUtility.CreateISO8601DateTimeFromSystemDateTime(Date ...

  9. Linux命令之查看日志等实时文件命令（less 、tail）使用

    一.less的使用 1)less  文件名,即可快速打开文件 2)相关查看搜索 3)利用键盘向上向下箭头键盘上的向上和向下箭头,点击一次向下简单,文件内容往下读取一行:点击一次向上箭头,文件内容,往上 ...

  10. Description Resource Path Location Type Java compiler level does not match the version of the installed Java project facet Unknown Faceted Project Problem (Java Version Mismatch)

    project 编译问题,需要三处的jdk版本要保持一致,才能编译通过. 1.在项目上右键properties->project Facets->修改右侧的version  保持一致 2. ...