Vue21 组件
1 模块及组件简介
组件（component）是vue.js最强大的功能之一。组件的作用就是封装可重用的代码，通常一个组件就是一个功能体，便于在多个地方都能够调用这个功能体。 每个组件都是Vue的实例对象。 我们实例化的Vue对象就是一个组件，而且是所有组件的根组件。
组件可以很好地把代码分成一块块的，清洗明了，并且能够提高复用性
2 定义组件语法
2.1 全局组件
<body>
<div id="app">
<my-header></my-header>
<my-header></my-header>
<my-header></my-header>
</div>
</body> <script>
Vue.component("my-header", {
data: function() {
return {
title: "头部标题内容"
};
},
template: `
<div>
<button @click='handle'>点击</button>
<div>{{title}}</div>
</div>
`,
methods: {
handle: function() {
console.log(this.title);
}
}
});
var vue = new Vue({
el: "#app",
data: {},
methods: {},
computed: {}
});
</script>
2.2 局部组件
<body>
<div id="app">
<my-header></my-header>
<my-footer></my-footer>
</div>
</body> <script>
let myHeader = {
data: function() {
return {
title: "头部标题的内容"
};
},
template: `
<div>
<button @click="handle">点击</button>
<p>{{title}}</p>
</div>
`,
methods: {
handle: function() {
console.log(this.title);
}
}
};
let myFooter = {
data: function() {
return {
title: "底部标题的内容"
};
},
template: `
<div>
<button @click="handle">点击</button>
<p>{{title}}</p>
</div>
`,
methods: {
handle: function() {
console.log(this.title);
}
}
};
var vue = new Vue({
el: "#app",
data: {},
methods: {},
computed: {},
components: {
"my-header": myHeader,
"my-footer": myFooter
}
});
</script>
2.3 注意
1）组件中的data是一个函数，不是对象，这样子可以保证不同地方是有同一个组件data都是新的对象
2）组件中必须有一个唯一的根元素
3）模板中内容较多时候建议使用模板字符串
4）局部注册的子组件只能在注册过的父组件中使用
5）components是注册组件的意思
6）组件名推荐全部小写或者首字母大写
3 组件的嵌套
<title>组件的嵌套</title>
<script type="text/javascript" src="../js/vue.js"></script> <div id="root"></div> <script type="text/javascript">
Vue.config.productionTip = false //定义student组件
const student = Vue.extend({
name: 'student',
template: `
<div>
<h4>学生姓名：{{name}}</h4>
<h4>学生年龄：{{age}}</h4>
</div>
`,
data() {return {name: '尚硅谷',age: 18}}
}) //定义school组件
const school = Vue.extend({
name: 'school',
template: `
<div>
<h3>学校名称：{{name}}</h3>
<h3>学校地址：{{address}}</h3>
<student></student>
</div>
`,
data() {return {name: '尚硅谷',address: '北京'}},
//注册组件（局部）
components: { student }
}) //定义hello组件
const hello = Vue.extend({
template: `<h3>{{msg}}</h3>`,
data() {return {msg: '欢迎来到尚硅谷学习！'}}
}) //定义app组件
const app = Vue.extend({
template: `
<div>
<hello></hello>
<school></school>
</div>
`,
components: { school, hello }
}) //创建vm
new Vue({
el: '#root',
template: '<app></app>',
//注册组件（局部）
components: { app }
})
</script>
4 VueComponent
1）组件的本质是一个名为VueComponent的构造函数，并且不是程序员定义的，而是Vue.extend函数生成的。并且每次生成的都是不一样的VueComponent的构造函数。
2）每当我们使用组件（写组件标签时，<school></school>）,vue解析到组件标签时，会帮我们使用VueComponent构造函数创建一个VueComponent实例对象，帮我们执行 new VueComponent(options)
3）在组件配置中，data函数，methods中配置的函数，watch中配置的函数，computed中配置的函数的this指向的都是VueComponent组件对象。
5 VueComponent.prototype.__proto__===Vue.prototype
这个内置关系让组件实例对象可以访问到Vue原先上的属性和方法。因为Vue和VueComponent在很大程度上都是相同的（95%），所以像$mount和$watch方法，定义在Vue的原型对象上，然后VueComponent的原型对象的原型对象指向Vue的原型对象，VueComponent和Vue的实例就可以使用同一份方法和属性，而不用写两份一样的。
6 单文件组件示例
1）school组件
<template>
<div id='Demo'>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
</template> <script>
export default {
name:'School',
data() {
return {
name:'UESTC',
address:'成都'
}
},
methods: {
showName(){
alert(this.name)
}
},
}
</script> <style>
#Demo{
background: orange;
}
</style>
2）student组件
<template>
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
</template> <script>
export default {
name:'Student',
data() {
return {
name:'cess',
age:20
}
},
}
</script>
3）app组件，作为龙头老大
<template>
<div>
<School></School>
<Student></Student>
</div>
</template> <script>
import School from './School.vue'
import Student from './Student.vue' export default {
name:'App',
components:{
School,
Student
}
}
</script>
4）main.js
import App from './App.vue'
new Vue({
template:`<App></App>`,
el:'#root',
components:{App}
})
5）index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单文件组件练习</title>
</head>
<body>
<div id="root"></div>
<script src="../../js/vue.js"></script>
<script src="./main.js"></script>
</body>
</html>
Vue21 组件的更多相关文章
- ExtJS 4.2 评分组件
上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
- react-router 组件式配置与对象式配置小区别
1. react-router 对象式配置 和 组件式配置 组件式配置(Redirect) ----对应---- 对象式配置(onEnter钩子) IndexRedirect -----对应-- ...
- Angular2入门系列教程3-多个组件，主从关系
上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...
- Angular2入门系列教程2-项目初体验-编写自己的第一个组件
上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着 ...
- .NET Core 首例 Office 开源跨平台组件（NPOI Core）
前言 最近项目中,需要使用到 Excel 导出,找了一圈发现没有适用于 .NET Core的,不依赖Office和操作系统限制的 Office 组件,于是萌生了把 NPOI 适配并移植到 .NET C ...
- .NetCore中的日志（1）日志组件解析
.NetCore中的日志(1)日志组件解析 0x00 问题的产生 日志记录功能在开发中很常用,可以记录程序运行的细节,也可以记录用户的行为.在之前开发时我一般都是用自己写的小工具来记录日志,输出目标包 ...
- BootStrap_02之全局样式及组件
1.BootStrap指定的四种屏幕尺寸: ①超大PC屏幕--lg(large):w>=1200px: ②中等PC屏幕--md(medium):1200px>w>=992px: ③P ...
- ExtJS 4.2 组件介绍
目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...
- ExtJS 4.2 组件的查找方式
组件创建了,就有方法找到这些组件.在DOM.Jquery都有各自的方法查找元素/组件,ExtJS也有自己独特的方式查找组件.元素.本次从全局查找.容器内查找.form表单查找.通用组件等4个方面介绍组 ...
随机推荐
- 2022-11-14 Acwing每日一题
本系列所有题目均为Acwing课的内容,发表博客既是为了学习总结,加深自己的印象,同时也是为了以后回过头来看时,不会感叹虚度光阴罢了,因此如果出现错误,欢迎大家能够指出错误,我会认真改正的.同时也希望 ...
- 软件开发-客观综合(GO）
1 对从go源码和汇编源码生成可执行程序的过程,下面描述错误的是() A. 使用go tool compile可以将go源码编译成目标文件 B. 使用go tool asm可以将go源码编译成汇编代 ...
- 重学c#系列——逆变和协变[二十四]
前言 简单整理一下逆变和协变. 正文 什么是逆变和协变呢? 首先逆变和协变都是术语. 协变表示能够使用比原始指定的派生类型的派生程度更大的类型. 逆变表示能够使用比原始指定的派生类型的派生程度更小的类 ...
- vue3.0使用tui.image-editor图片编辑组件报错TypeError: Cannot convert undefined or null to object
在vue3.0的项目中使用tui.image-editor组件.一直都是报错.查看报错位置发现代码 addEventListener() { Object.keys(this.$listeners). ...
- Docker 工作原理分析
docker 容器原理分析 docker 的工作方式 Namespace 容器对比虚拟机 Cgroups 容器看到的文件 Mount namespace chroot rootfs Volume(数据 ...
- redis集群之分片集群的原理和常用代理环境部署
上篇文章刚刚介绍完redis的主从复制集群,但主从复制集群主要是为了解决redis集群的单点故障问题,通过整合哨兵能实现集群的高可用:但是却无法解决数据容量以及单节点的压力问题,所以本文继续介绍red ...
- uni 结合vuex 编写动态全局配置变量 this.baseurl
在日常开发过程,相信大家有遇到过各种需求,而我,在这段事件便遇到了一个,需要通过用户界面配置动态接口,同时,因为是app小程序开发,所以接口中涉及到了http以及websocket两个类型的接口. 同 ...
- 云数据库FinOps实战复盘
历时三个多月的HBase成本优化项目按照预期交付了,HBase云数据库月度成本下降了32.5%,超出预期达成目标. 我们对本次HBase成本优化项目进行深度复盘,并进一步尝试总结云数据库的FinOps ...
- PHP 实现大文件视频推流
/** * 视频推流 * 返回视频流 */ function bofang(){ set_time_limit(0); ini_set('max_execution_time', 0);//秒为单位, ...
- (已转)Linux基础第七章 线程
前言 之前讨论了进程,了解一个进程能做一件事情,如果想同时处理多件事情,那么需要多个进程,但是进程间很不方便的一点是,进程间的数据交换似乎没有那么方便.Linux提供线程功能,能在一个进程中,处理多任 ...