一、组件
-
组件可以看作是一些可复用的ui模块
- 小到一个标签 ：
<div>哈哈</div> - 大到一个页面 ：
<div><div><div><div><div></div></div></div></div></div>
- 小到一个标签 ：
-
一个组件对应 一个实例
-
组件 === Vue实例 == new Vue ( options )
-
官网 ： 组件是可复用的 Vue 实例
二、组件化开发
- 概念 ：将一个完整的页面，抽离成一个个独立的组件，最终，通过这一个个独立组件完成整个的页面(项目)的功能
- 组件化开发的优势/作用 ： 复用
三、组件的基本使用
先注册， 再使用
-
Vue 中的两种注册组件的方法
1.全局注册
2.局部注册
全局组件在所有的vue实例中都可以使用
局部组件在所有的当前实例中可以使用
- 注册全局组件 - 基本使用
/**
* 第一个参数 ： 组件名
* 第二个参数 ： 是一个配置对象， 该配置对象与 Vue 实例的配置对象几乎完全相同
* 也就是说，vue实例中用到的配置项，和组件中的配置项几乎相同
*/
Vue.component('child'， {
template： `<h1 class="red">这是child组件</h1>`
})
- 注意点
- 注册全局组件也是放到 vm 实例之前
- 模板只能有一个根节点
- 组件的配置项和 vue 实例 的配置项一样 (如：data、methods、filters、watch、computed、钩子函数等)
- 组件的 data 是一个函数 ， 并且返回一个对象
// 演示为什么vue在组件中的数据采用函数，而不是对象
// 原因 ： 只想让组件复用，不想让数据复用
var Component = function() {}
// 使用对象
Component.prototype.data = {
demo： 123
}
// 使用函数
Component.prototype.data = function() {
return {
demo： 111
}
}
var component1 = new Component()
var component2 = new Component()
component1.data().demo = '8888'
console.log(component2.data().demo) // 456
- 使用组件
- 当标签一样使用
<child></child>
- 当标签一样使用
demo：组件介绍.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
组件
1. 先注册
- 全局组件： 所有的vue实例里都可以使用
- 局部组件： 只能在当前注册组件的vue实例里使用
2. 再使用 : 当成一个标签来使用
-->
<div id="app">
<one></one>
</div>
<script src="./vue.js"></script>
<script>
//注册全局组件
// 参数1 : 组件的名称
// 参数2 : 组件的配置项 methods watch data computed 钩子函数
Vue.component('one', {
template: `<div>我是注册的组件</div>`,
computed: {},
watch: {},
methods: {}
})
const vm = new Vue({
el: '#app',
data: {}
})
</script>
</body>
</html>
demo：组件的注意事项.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<two></two>
</div>
<script src="./vue.js"></script>
<script>
/**
* 1. 注册组件要在 vm 实例之前注册
* 2. template 只能有一个根节点
* 3. 组件里的data 是一个函数 ,不是一个对象 (下次来讲为什么)
*/
// 注册组件
Vue.component('two', {
template: `
<div>
<h1>我是h1</h1>
<h1>我也是h1 {{ msg }}</h1>
</div>
`,
data() {
return {
msg: '123'
}
}
})
const vm = new Vue({
el: '#app',
data: {}
})
</script>
</body>
</html>
02-为啥【组件的】data是一 个函数，而不是一个对象.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script>
// 组件 : 复用
// 我们想让组件复用,但是不想让组件里的数据复用
// 组件构造函数
const Component = function() {}
// 原型上加数据
// Component.prototype.data = {
// msg: '傻春'
// }
// 调用函数，返回对象，随便调用者怎么修改，都不影响原型上原来的函数里的对象
Component.prototype.data = function() {
return {
msg: '傻春'
}
}
// 实例化
const c1 = new Component()
const c2 = new Component()
// 修改c1的数据
c1.data().msg = '小傻春'
// 获取c2 的数据
console.log(c2.data().msg)
</script>
</body>
</html>
四、改造 TodoMVC 成 组件化结构
- 下载模板
todomvc-at-template+ 安装css依赖包 + 清除不要的 + 安装 vue + 实例化 - 创建一个
components文件夹 - 具体步骤
- 创建一个
todo-head.js - 导入
<script src="./components/todo-head.js"></script> - 使用
<todo-head></todo-head>
- 创建一个