38.VUE学习之-全局组件和局部组件
<!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学习之-全局组件和局部组件的更多相关文章
- Vue基础学习 --- 全局组件与局部组件
组件分为 全局组件 局部组件 全局组件 // 语法---Vue.component('组件名', {组件参数}) Vue.component('com1', { template: '<butt ...
- 详解vue全局组件与局部组件使用方法
这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...
- Vue 组件&组件之间的通信 之全局组件与局部组件
在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...
- vue -全局组件和局部组件
1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...
- vue组件化初体验 全局组件和局部组件
vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件 关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...
- 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- vue中的全局组件和局部组件的应用
1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...
- TZ_16_Vue定义全局组件和局部组件
1.定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <co ...
- VUE3 之 全局组件与局部组件
1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法 <body> < ...
随机推荐
- 电路中GND和GROUND、VCC,VDD,VEE,VSS
电路解析:GND和GROUND.VCC,VDD,VEE,VSS 参考: http://www.elecfans.com/dianzichangshi/20160822432514.html 一.解释版 ...
- HBuilder中改造console.info
HBuilder的js中console.info只会输出头一个参数,与谷歌浏览器行为不符合.让人很不习惯. 于是,对其改造一番. window.console.print=window.console ...
- PagerAdapter相关
FragmentPagerAdapter 特点: 应用于少数的(10个以下)fragment:保存在内存中: 只需实现 getItemgetCount()两个方法 FragmentStatePager ...
- linux脚本的source和reload
什么时候用reload?有些程序, 当你修改了配置文件后, 需要重启之后, 配置才能生效,但是 这个程序又不能 重启 , 如大公司的httpd服务 因此, 当你修改完了之后, 需要在不重启服务的情况下 ...
- html：<link> 标签中的 media 属性
HTML <link> 标签的 media 属性 定义和用法 media 属性规定被链接文档将显示在什么设备上. media 属性用于为不同的媒介类型规定不同的样式. media属性值 ( ...
- MongoDB 安装笔记
一.MongoDB的安装 1.在MongoDB的官网下载对应的安装文件() 2.解压安装文件 #解压tgz文件 tar -zxvf mongodb-linux-x86_64-ubuntu1604-3. ...
- CentOS6.8上安装epel
实验环境: [root@bogon zhi]# uname -a Linux bogon -.el6.i686 # SMP Fri Nov :: UTC i686 i686 i386 GNU/Linu ...
- vue - 绑定css、style
1.绑定html css1.1对象语法: 传给 v-bind:class 一个对象,以动态地切换 class <div v-bind:class="{ active: isActive ...
- java文件
File类 为了很方便的代表文件的概念,以及存储一些对于文件的基本操作,在java.io包中设计了一个专门的类——File类. 在File类中包含了大部分和文件操作的功能方法,该类的对象可以代表一个具 ...
- I2C总线协议学习笔记 （转载）
1.I2C协议 2条双向串行线,一条数据线SDA,一条时钟线SCL. SDA传输数据是大端传输,每次传输8bit,即一字节. 支持多主控(multimastering),任何时间点只能有一 ...