vue.js 组件引用之初级
1. 构造组件，及组件引用：1.1 构造一个组件，1.2 注册一个组件，1.3 实例化Vue()即引用Vue()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./vue/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="box">
<ccc></ccc>
</div>
<ccc></ccc>
<script>
// 构造组件，使用extend()字样进行
var c = Vue.extend({
template: '<h3>这是一个H3标题标签</h3>'
});
// 注册组件，注册一个名称为ccc ,内容为c的组件
Vue.component('ccc', c);
new Vue({
el: "#box",
});
</script>
</body>
</html>
运行结果：
2. 引用几次，就调用几次
<body>
<div id="box1">
<ccc></ccc>
</div>
<div id="box2">
<ccc></ccc>
</div>
<ccc></ccc>
<script>
// 构造组件
var c = Vue.extend({
template: "<h3>这是一个测试字符串</h3>"
});
// 注册组件
Vue.component("ccc", c);
// 引用Vue
new Vue({
el: "#box1",
});
new Vue({
el: "#box2",
});
</script>
</body>
运行结果：
3. 局部注册，只有局部才能引用
<body>
<div id="box1">
<ccc></ccc>
</div>
<div id="box2">
<ccc></ccc>
</div>
<ccc></ccc>
<script>
// 构造组件
var c = Vue.extend({
template: "<h3>这是一个测试字符串</h3>"
});
// 引用Vue + 局部注册
new Vue({
el: "#box1",
components: {
'ccc': c,
},
});
// 虽然有引用，但是没有注册，所以也不会进行替换
new Vue({
el: "#box2",
});
</script>
</body>
运行结果：
4. 父组件与子组件，即在父组件下注册子组件，同样可以实现替换
5.注册全局组件
<body>
<div id="box1">
<ccc></ccc>
</div>
<div id="box2">
<ccc></ccc>
</div>
<ccc></ccc>
<script>
Vue.component('ccc', {
template: "这是一个测试组件，这是ccc",
}); new Vue({
el: "#box1"
});
</script>
</body>
运行结果：
6. 简化组件的注册
<body>
<div id="box1">
<aaa></aaa>
<bbb></bbb>
</div> <ccc></ccc>
<script>
var a = Vue.extend({
template: "<h3>这是组件a 的内容</h3>",
});
var b = Vue.extend({
template: "<h3>这是组件b 的内容</h3>",
});
new Vue({
el: "#box1",
components: {
'aaa': a,
'bbb': b,
}
});
</script>
</body>
运行结果：
7. 使用script 标签分离模板：
<body>
<div id="box1">
<aaa></aaa>
<bbb></bbb>
</div>
<script type="x-template" id="a">
<h3>我是组件a</h3>
<p>我是段落a</p>
</script>
<script type="x-template" id="b">
<h3>我是组件b</h3>
<p>我是段落b</p>
</script>
<script>
new Vue({
el: "#box1",
components: {
'aaa': {
template: '#a',
},
'bbb': {
template: '#b'
}
}
});
</script>
</body>
运行结果：
vue.js 组件引用之初级的更多相关文章
- vue.js 组件引用之初级 之二
1. template 标签也可以实现替换,这样可以省去script标签了 <!DOCTYPE html> <html lang="en"> <hea ...
- 偏前端-vue.js学习之路初级（二）组件化构建
vue.js 组件化构建 组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- 浅尝Vue.js组件(一)
本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...
- 偏前端-vue.js学习之路初级（一）概念
首先--不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时. 新建一个html,引入一下js: <!-- 开发环境版本,包含了有帮助的命令行警告 -- ...
- Vue.js 组件的三个 API：prop、event、slot
组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- Vue.js 组件编码规范
本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...
随机推荐
- vultr上 windows使用pptp拨号来实现冗余双网关的解决方案
rasdial是拨号程序,pptpvpn是网卡拨号名称,后面跟的是帐号和密码.pptpvpn见下图:就是提前创建好一个PPTP的拨号连接 上面是启动时候的计划任务,那么万一拨号中断,要继续重拨还需要做 ...
- Windows 2016 无域故障转移群集部署方法 超详细图文教程 (一)
故障转移群集是一个很实用的功能,而windows在2016版本开始,终于支持不用域做故障转移群集. 在群集中,我们可以设定一个"群集IP" 而客户端只需要根据这个"群集I ...
- gcc 工作流程
gcc常用参数: 1:-v/--version 2:-I :指定头文件包含路径 3:-c :将汇编文件生成一个二级制文件,得到.o文件 4:-o :指定生产的文件名 5:-g :gdb调试的时候需要加 ...
- Java 13 - Java 数组
Java 数组 数组对于每一门编程语言来说都是重要的数据结构之一,当然不同语言对数组的实现及处理也不尽相同. Java语言中提供的数组是用来存储固定大小的同类型元素. 你可以声明一个数组变量,如num ...
- MySQL数据库的高可用方案总结
高可用架构对于互联网服务基本是标配,无论是应用服务还是数据库服务都需要做到高可用.虽然互联网服务号称7*24小时不间断服务,但多多少少有一些时候服务不可用,比如某些时候网页打不开,百度不能搜索或者无法 ...
- Android 6.0动态申请权限时，权限框闪一下就消失的问题；
Android 蓝牙BLE开发需要位置权限,不然扫描不到周围的蓝牙信息: 位置权限申请: if (Build.VERSION.SDK_INT < 23){return;} //判断是否有权限 i ...
- Windows把内存变成快速虚拟硬盘
笔记本电脑安装了8G内存,却装了个Win7 32位系统,结果只能识别2946MB内存,还有5GB多内存白白浪费了,那个闹心啊,别提多不爽,听说能把内存虚拟成硬盘使用,用它缓存系统临时文件,以及缓存网页 ...
- Solr的Filed中indexed与stored属性
摘要: Solr的Filed中有很多参数,其中的index和store参数让人有点犯晕. 消失的Field <field name="description_s" type= ...
- jsfiddle将demo设置为public公开的
jsfiddle的demo虽然可以通过链接分享给所有人,但是进入个人主页是没有的,需要将项目设置为公开public的 根据提示,打开demo项目页==>左侧菜单==>填写标题和描述==&g ...
- WPF 各种绑定写法以及用法
一:{Binding ElementName=grid0, Path=Height} ElementName=grid0:查找到名为grid0的控件. , Path=Height:获取名为grid0的 ...