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> < ...
随机推荐
- springmvc+spring+mybatis+sqlserver----查询sqlserver----有返回参数
<resultMap type="java.util.HashMap" id="resultMap"> <result column=&quo ...
- ActiveMQ实例1--简单的发送和接收消息
一.环境准备 1,官网http://activemq.apache.org/下载最新版本的ActiveMQ,并解压 2,打开对应的目录,在Mac环境下,一般可以运行命令: cd /Users/***/ ...
- position 的属性值
理论上来说,全部 position 的取值有8个 包括:position:static | relative | absolute | fixed | sticky | initial | inhe ...
- 【翻译】Best Practices for User interface android 适配不同屏幕、不同分辨率
地址:http://developer.android.com/training/multiscreen/screendensities.html#TaskProvideAltBmp 安卓支持不同的屏 ...
- jQuery-prepend、append、before、after的区别
举例说明,原始html代码如下: <ol> <li>List item 1</li> <li>List item 2</li> <li ...
- User Agent字符串列表
User Agent字符串列表 --之心 User Agent中文名为用户代理,是Http协议中的一部分,属于头域的组成部分,User Agent也简称UA.它是一个特殊字符串头,是一种向访问网站提供 ...
- Linux 初学者：移动文件
你学习了有关目录和访问目录的权限是如何工作的.你在这些文章中学习的大多数内容都可应用于文件 -- Paul Brown 在之前的该系列的部分中, 你学习了有关目录 和 访问目录 的权限 是如何工作的. ...
- P1424 小鱼的航程(改进版)
题目背景 原来的题目太简单,现改进让小鱼周末也休息,请已经做过重做该题. 题目描述 有一只小鱼,它上午游泳150公里,下午游泳100公里,晚上和周末都休息(实行双休日),假设从周x(1<=x&l ...
- sqlserver 使用小技巧总结
1. 在数据库 查询中 在表名后面 加 英文字母,可以方便 查询 select a.name ,b.hobbynamefrom student as a, hobby as bwhere a ...
- CUDA线性内存分配
原文链接 概述:线性存储器可以通过cudaMalloc().cudaMallocPitch()和cudaMalloc3D()分配 1.1D线性内存分配 1 cudaMalloc(void**,int) ...