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> < ...
随机推荐
- spring整合web的ssh（springMVC、hibernate）
1. tomcat启动时,加载配置文件,将bean装在 导入jar包spring-web..jar 2.确定配置文件位置 3.spring整合hibernate <!-- 加载hibernate ...
- C# 字节数组和十六进制字符串之间转换的另类写法
今天从http://www.cnblogs.com/NanaLich/archive/2012/05/24/2516860.html看到的,记录下来 主要是XmlSerializationReader ...
- Hibernate课程 初探一对多映射4-2 cascade级联属性
1 级联属性:hibernate一方和多方设置关联关系,当一方发生相应修改时(见下表),多方不用进行显式修改,也能进行相应修改. 级联在一方和多方xml中都可以设置 属性值 含义和作用 all 对 ...
- 粗看ES6之数组
标签: javascript es6 数组新增方法 map(可以理解为是映射,以一定规则修改数组每一项并返回全新数组) reduce(可以理解为是汇总,一堆出来一个) filter(可以理解为过滤,筛 ...
- IDEA中的一些常用的设置与快捷键
idea 清屏(控制台)快捷键 eclipse清屏快捷键为鼠标右键+R 而在idea中默认并没有清屏console的快捷键 所以需要我们自行设置: 1,ctrl+alt+s打开settings 2,找 ...
- CSS选择器备忘录
CSS选择器备忘录 基本选择器 Selector Meaning Example 通用选择器 匹配任何元素 * 标签选择器 CSS1中称之为元素选择器,匹配为指定标签的所有元素 div 伪元素选择器 ...
- 关于css实现单行、多行省略标记
实现单行: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 实现多行: display: -webkit-box; -we ...
- （一）JavaScript之[数据类型]与[对象]
1].数据类型字符串(String).数字(Number).布尔(Boolean).数组(Array).对象(Object).空(Null).未定义 (Undefined). //极大或极小的数字可以 ...
- 青石B2C商城
平台: Windows 类型: 虚拟机镜像 软件包: azure commercial ecbluestone ecommerce ecommerce solution 服务优惠价: 按服务商许可协议 ...
- Spring配置文件详细分析
XML Schema命名空间作用: 1.避免命名冲突,像Java中的package一样 2.将不同作用的标签分门别类(像Spring中的tx命名空间针对事务类的标签,context命名空间针对组件的标 ...