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个方面介绍组 ...
随机推荐
- kubeedge的云边协同通道
1. CloudHub安全认证流程 2. EdgeHub安全认证流程 3. Edged节点纳管
- Kubernetes介绍和资源管理
Kubernetes介绍和资源管理 Kubernetes介绍 官网:https://kubernetes.io/ 一.应用部署方式演变 1.传统部署:互联网早期,会直接将应用程序部署在物理机上 优点: ...
- 【Spring系列】- Spring事务底层原理
Spring事务底层原理 生命不息,写作不止 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 一个有梦有戏的人 @怒放吧德德 分享学习心得,欢迎指正,大家一起学习成长! 目录 Sprin ...
- 随笔——mvc公众号自动登录跳转到原页面的方法
页面路径传参跳到那带到哪 1.全局过滤(继承过滤也行).这里使用的全局过滤 2.过滤判断需要登录的话,获取本次路径传到登录的页面 3.登录的页面判断是微信浏览器的话,参数带到微信登录接口 4.微信登录 ...
- OpenCV之C++经典案例
四个案例实战 1.刀片缺陷检测 2.自定义对象检测 3.实时二维码检测 4.图像分割与色彩提取 1.刀片缺陷检测 问题分析 解决思路 尝试二值图像分析 模板匹配技术 代码实现 #include < ...
- easyUI ajax拼接样式失效
重新渲染: $.parser.parse()
- Relational Learning with Gated and Attentive Neighbor Aggregator for Few-Shot Knowledge Graph Completion 小样本关系学习论文解读
小样本知识图补全--关系学习.利用三元组的邻域信息,提升模型的关系表示学习,来实现小样本的链接预测.主要应用的思想和模型包括:GAT.TransH.SLTM.Model-Agnostic Meta-L ...
- 教你几个 Java 编程中的奇技淫巧
枯燥的编程中总得有些乐趣,今天我们不谈论那些高深的技能,教你几个在编程中的奇技淫巧,说不定在某些时候还能炫耀一番呢. 1.找到最大值和最小值 不使用 if else switch 和三元运算符,在给定 ...
- JavaScript：对象：如何去遍历输出一个对象的属性？语句for-in
使用for-in的for循环语句,可以去遍历一个对象的属性,这类似于Java的增强for循环: 但是注意,这并不能遍历对象的所有属性,有些隐藏的属性,是无法遍历出来的,虽然我们可以通过控制台去查看这些 ...
- Linux 环境中使用 LVGL
之前有记录过在 esp32 中使用 LVGL 的笔记,需要的小伙伴可以了解一下,esp-idf 移植 lvgl8.3.3 我之前整理的学习资料:https://www.cnblogs.com/jzcn ...