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个方面介绍组 ...
随机推荐
- 【题解】UVA10228 A Star not a Tree?
题面传送门 解决思路 本题数据范围较小,可以使用模拟退火算法(随机化). 顾名思义,模拟退火就是一个类似于降温的过程.先设置一个较大的初温,每次随机改变状态,若使答案更优,则采取更优答案,否则根据其与 ...
- ES6高级编程（一）
一.JavaScript概要 1.1.JavaScript组成 JavaScript主要由三部分构成,分别是ECMAScript.DOM与BOM ECMAScript定义了该语言的语法.类型.语句.关 ...
- C++快速幂
C++快速幂 快速幂的作用: 当我们做一些高次幂的计算时,就不能直接进行暴力的计算.例如:需要计算2^n 并且n≤10^18.这时候如果我们直接进行暴力的计算,时间复杂度为O ( n ),那么肯定会超 ...
- <四>虚函数 静态绑定 动态绑定
代码1 class Base { public: Base(int data=10):ma(data){ cout<<"Base()"<<endl; } v ...
- Linux通过脚本实现多台主机统一部署
该脚本分成三部分,一部分是获取信息的脚本:getInfo.sh 一个是main脚本:main.sh.一个是ssh连接主机脚本:sshing.sh main.sh #是否检查主机是否存活host_che ...
- Ubuntu20.04 Java相关环境(JDK、Mysql、Redis、nacos、influxdb)部署以及运行
重装了系统,系统版本号为:Ubuntu20.04 1.云平台 登录云平台,选择要重装的服务器,关机.一键重装即可 2.安装jdk 下载jdk-8u341-linux-x64.tar.gz,并复制到服务 ...
- ping localhost时出现::1的原因以及解决办法
ping localhost时出现: 在cmd中ping localhost解析出来的是ipv6的::1的原因是windows有个优先解析列表,当ipv6的优先级高于ipv4时,就会出现这种情况. 具 ...
- week_9(推荐系统)
Andrew Ng 机器学习笔记 ---By Orangestar Week_9(推荐系统) 1. Problem Formulation 这节就仅仅简单地介绍了一下 推荐系统的应用和实例.完全可以略 ...
- P1024 [NOI2001] 食物链【种类并查集】
题意 P1024 简化题意:给定 \(n\) 和 \(k(n\leqslant5\times10^4,k\leqslant10^5)\) ,表示有 \(n\) 个动物, \(k\) 个描述,其中: \ ...
- WPF 自定义附加事件
我们都知道路由事件,而附加事件用的比较少. 但如果是通用的场景,类似附加属性,附加事件就很有必要的. 举个例子,输入设备有很多种,WPF中输入事件主要分为鼠标.触摸.触笔:WPF 屏幕点击的设备类型 ...