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个方面介绍组 ...
随机推荐
- Vue2 到 Vue3，重温这 5 个常用的 API
距离Vue3发布已经过去一年多时间了,从Vue2到Vue3是一个不小的升级,包括周边生态等.虽然目前大多数开发者们在使用的仍旧以Vue2为准,但Vue3显然是Vue开发者们未来必须面对的,而且前不久V ...
- 备考CISP-PTE之文件上传
upload-labs 直接下载放到phpstudy打开即可. 第一关 查看源码,可以看到js代码定义了一个checkFile函数来对上传的文件进行后缀检查,只允许上传jpg.png.gif文件. f ...
- 我的Python基础（二）
python包含6种内奸的序列:列表.元组.字符串.Unicode字符串.buffer对象和xrange对象 列表和元组的主要区别在于,列表可以修改,元组则不能. 索引: 使用负数索引时,最后一个元素 ...
- DHorse系列文章之maven打包
插件打包 这种方式是平时最常用的,首先要下载并安装maven环境,然后在被打包的项目中引入插件,有各种各样的打包插件,比如springboot自带插件: <plugin> <grou ...
- lvm+xfs的扩缩容
ext4文件系统可以经行扩缩容操作,但xfs的文件系统只能扩容,无法缩容 所以如果需要进行xfs的缩容,可以先使用xfsdump备份文件系统,然后对逻辑卷(/分区)进行缩容操作(此时原xfs文件系统会 ...
- Xamarin.Android带参数返回上一级界面
在ActivityA跳转到ActivityB后.activityB返回到ActivityA并带参数返回 首先再activitya中跳转到b var intent = new Intent(this, ...
- 关于windows上开启远程桌面连接不上的问题解决
解决办法 启用远程桌面连接(计算机-属性-远程设置) 选择第二个:允许运行任意版本远程桌面 关闭防火墙(或者给远程桌面添加端口3389放行也可以) 创建用户以及密码 这里注意,一定要建立密码,只有账号 ...
- Oracle 一对多将多行数据整理为一行
在开发中一对多的关系经常用到,昨天遇到一个客户问题,要求将所有反馈任务的信息整理为一行展示并导出excel. 我数据库对应关系:通任务task对应feedback表多个反馈,也就是说每个任务都有很多条 ...
- VulnHub靶机渗透实战9-vikings
本次靶机是CTF风格的靶机. 靶场地址:Vikings: 1 ~ VulnHub 网络呢还是桥接模式. Description Back to the Top A CTF machine with ...
- 3.8：使用R语言实现Apriori算法示例
〇.目标 1.使用R语言实现Apriori算法完成关联规则挖掘:2.利用超市购物篮Groceries数据进行关联规则分析. 一.利用arules包加载Groceries数据集 二.探索和准备数据 三. ...