<!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. 在UITableView中识别左右滑动，实现上下翻页的功能

    目前有三种方案: 1. UIScrollView + UITableView. 实现方法,在UIScrollView中,加入UITableView即可 设置UIScrollView的代理和方法 - ( ...

  2. Java中的各种锁

    .共享锁和排它锁的区别

  3. （九）JavaScript之【JS函数（定义、参数、调用、【闭包】、call(),apply()）】[较深，胆小勿进]

    一].定义: /** * 函数表达式 * * Function() 构造函数 * * 函数提升(Hoisting) * JavaScript默认将当前作用域提升到前面去 * Hoisting应用在变量 ...

  4. Linux 学习 之 bash

    Anything is programmable with defined syntax and common lib. Bash Shell is created to programme to L ...

  5. Ubuntu、Windows 、Linux集合

    一.Ubuntu/Windows双系统修复引导   首先说明:在Windows存在的前提下安装Ubuntu(或者Ubuntu系列)是不需要修复引导的.因为grub会自动搜索存在硬盘中的系统.   而在 ...

  6. Java实习问题记录

    1. $(window).height() 获取屏幕高度2. $("#chartbottomdiv").width() 某个控件的属性 用"."3. // 保留 ...

  7. Django基础--3

    ORM django一对多的操作 获取表单的三种方式:views 获取对象            .all()      html中获取方式为 row.id,row,host 获取字典         ...

  8. RF脚本中的坑1： SyntaxError: invalid token

    话不多说,直接上调试脚本: 执行后${b}=8:没问题.然后${a}改成08继续: 执行后居然报错了: 经过多次尝试08或者09时,都会报SyntaxError错误:后来查阅语法,才恍然大悟:Pyth ...

  9. Radix Sort

    为了完成二维数据快速分类,最先使用的是hash分类. 前几天我突然想,既然基数排序的时间复杂度也不高,而且可能比hash分类更稳定,所以不妨试一下. 在实现上我依次实现: 1.一维数组基数排序 基本解 ...

  10. Linux MySQL 5.1源码安装

    安装必备的软件 yum install ncurses-devel -y yum install pcre pcre-devel -y yum install gcc* -y   解压缩 tar -z ...