Vue——组件化开发
官方文档:https://cn.vuejs.org/v2/api/#created
一.什么是组件化
1.1 组件化思想:
1.如果我们将一个页面中所有的逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。
2.但如果,我们将一个页面拆分成一个个小的功能块,每个功能块完全属于自己这部分的独立的功能,那么之后整个页面的管理和维护就变得非常的容易了。
3.在Vue.js中任何的应用都会被抽象成一棵树
4.组件的使用分成三个步骤:
4.1 创建组件构造器
4.2 注册组件
4.3 使用组件
代码演示
ES6语法补充
ES6中定义字符串有三种形式:
第一种:’ ’ ==》单引号
第二种:" " ==》双引号
第三种: (键盘tab上边的按键 ES6新增语法)
代码演示
5.全局组件和局部组件
5.1 全局组件
5.2 局部组件
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- //3.使用组件-->
<!-- <cpn></cpn>-->
<!-- <cpn></cpn>-->
<!-- <cpn></cpn>-->
<cpnlc></cpnlc>
<cpnlc></cpnlc>
<cpnlc></cpnlc>
</div>
<div id="app2">
<!-- <cpn></cpn>-->
<cpnlc></cpnlc>
</div>
<script src="../../resources/vue.js"></script>
<script>
//1.创建组件构造器对象
const cpnC = Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容,哈哈哈哈哈</p>
</div>
`
})
//2.注册组件(全局组件)
//component('使用时组件的标签名',组件构造器)
// Vue.component('cpn',cpnC) ----> 此处注册的为全局组件
const app = new Vue({
el:"#app",
data:{
message:"你好呀",
},
components: {//此处注册局部组件
cpnlc:cpnC
}
})
const app2 = new Vue({
el:'#app2'
})
</script>
</body>
</html>
全剧组件和局部组件的补充
- 父组件和子组件
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 使用组件 -->
<cpn2></cpn2>
<cpn2></cpn2>
</div>
<script src="../../resources/vue.js"></script>
<script>
//1.创建第一个组件构造器(子组件)
const cpnC1 = Vue.extend({
template: `
<div>
<h2>我是标题1</h2>
<p>我是内容,哈哈哈哈</p>
</div>
`
})
//2.创造第二个组件构造器(父组件)
const cpnC2 = Vue.extend({
template: `
<div>
<h2>我是标题2</h2>
<p>我是内容,呵呵呵呵</p>
</div>
`,
components:{//子组件在此处注册
cpn1:cpnC1
}
})
//root组件
const app = new Vue({
el:"#app",
data:{
message:"你好呀",
},
components: {//父组件在root(根组件)中注册
cpn2:cpnC2
}
})
</script>
</body>
</html>
- 注册组件的语法糖写法(简写写法)
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 使用全局组件 -->
<cpn1></cpn1>
<!-- 使用局部组件 -->
<cpn2></cpn2>
</div>
<script src="../../resources/vue.js"></script>
<script>
//1.注册全局组件的语法糖(简写形式)
Vue.component('cpn1',{
template:`
<div>
<h2>我是标题</h2>
<p>我是内容,哈哈哈哈</p>
</div>
`
})
//2.注册局部组件的语法糖(简写形式)
const app = new Vue({
el:"#app",
data:{
message:"你好呀",
},
components: {//此处注册局部组件
cpn2:{
template: `
<div>
<h2>我是标题2</h2>
<p>我是内容,呵呵呵呵</p>
</div>
`
}
}
})
</script>
</body>
</html>
8.模板分离的写法
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 使用全局组件 -->
<cpn1></cpn1>
<!-- 使用局部组件 -->
<cpn2></cpn2>
</div>
<!--1. 第一种写法,通过script标签,注意:类型必须是text/x-template -->
<script type="text/x-template" id="cpn1">
<div>
<h2>我是标题1</h2>
<p>我是内容,哈哈哈哈1</p>
</div>
</script>
<!--2.第二种写法,通过template标签-->
<template id="cpn2">
<div>
<h2>我是标题2</h2>
<p>我是内容,呵呵呵呵2</p>
</div>
</template>
<script src="../../resources/vue.js"></script>
<script>
//1.注册全局组件的语法糖(简写形式)====> 模板的抽离
Vue.component('cpn1',{
template:'#cpn1'
})
//2.注册局部组件的语法糖(简写形式)
const app = new Vue({
el:"#app",
data:{
message:"你好呀",
},
components: {//此处注册局部组件 ====> 模板的抽离
cpn2:{
template: "#cpn2"
}
}
})
</script>
</body>
</html>
- 组件可以访问Vue实例数据吗?
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 使用局部组件 -->
<cpn2></cpn2>
</div>
<!--通过template标签-->
<template id="cpn2">
<div>
<h2>{{ title }}</h2>
<p>{{ content }}</p>
</div>
</template>
<script src="../../resources/vue.js"></script>
<script>
//注册局部组件的语法糖(简写形式)
const app = new Vue({
el:"#app",
data:{
message:"你好呀",
},
components: {//此处注册局部组件 ====> 模板的抽离
cpn2:{
template: "#cpn2",
data:function () {//组件当中数据存放的地方(data必须是一个函数)
return{
title:'我是标题2',
content:'我是内容,呵呵呵呵2'
}
}
}
}
})
</script>
</body>
</html>
11. 为什么组件中的 data 必须是函数?
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 使用组件 组件之间互不影响 -->
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<!--第二种写法,通过template标签-->
<template id="cpn">
<div>
<h2>当前计数为:{{ counter }}</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script src="../../resources/vue.js"></script>
<script>
//1.注册全局组件的语法糖(简写形式)====> 模板的抽离
//组件里边有自己的数据存储区、模板区、方法区
Vue.component('cpn',{
template:'#cpn',
//组件的数据data必须是一个函数,每创建一个组件就会调用一次该函数,每个组件就会生成自己的存储数据的地方
//因为函数存储在栈内存中 调用完了就会释放 不会影响下一次调用 所以组件之间 data 是不相同的
data:function () {
return{
counter:0
}
},
//组件事件方法的实现
methods:{
increment(){
this.counter++
},
decrement(){
this.counter--
}
}
})
//2.注册局部组件的语法糖(简写形式)
const app = new Vue({
el:"#app",
data:{
message:"你好呀",
},
})
</script>
</body>
</html>
-
组件通信——父组件向子组件传递数据
-
组件通信——子组件向父组件传递数据