Vue组件化
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
1、Vue组件化开发思想
1.1、认识组件化开发
组件化也是类似的思想
- 如果我们将一个页面中所有的处理逻辑全部放在一起处理起来就会变得非常复杂而且不利于后续的管理以及扩展
- 但如果我们讲一个页面拆分成一个个小的功能块每个功能块完成属于自己这部分独立的功能那么之后整个页面的管理和维护就变得非常容易了
- 如果我们将一个个功能块拆分后就可以像搭建积木一下来搭建我们的项目
1.2、组件化开发
现在可以说整个的大前端开发都是组件化的天下无论从三大框架Vue、React、Angular还是跨平台方案的Flutter甚至是移动端都在转向组件化开发包括小程序的开发也是采用组件化开发的思想。所以学习组件化最重要的是它的思想每个框架或者平台可能实现方法不同但是思想都是一样的。
我们需要通过组件化的思想来思考整个应用程序
- 我们将一个完整的页面分成很多个组件
- 每个组件都用于实现页面的一个功能块
- 而每一个组件又可以进行细分
- 而组件本身又可以在多个地方进行复用
1.3、Vue的组件化
组件化是Vue、React、Angular的核心思想也是我们后续课程的重点包括以后实战项目
- 前面我们的createApp函数传入了一个对象App这个对象其实本质上就是一个组件也是我们应用程序的根组件
- 组件化提供了一种抽象让我们可以开发出一个个独立可复用的小组件来构造我们的应用
- 任何的应用都会被抽象成一颗组件树
1.4、注册组件的方式
- 如果我们现在有一部分内容模板、逻辑等我们希望将这部分内容抽取到一个独立的组件中去维护这个时候如何注册一个组件呢
- 我们先从简单的开始谈起比如下面的模板希望抽离到一个单独的组件
注册组件分成两种
- 全局组件在任何其他的组件中都可以使用的组件
- 局部组件只有在注册的组件中才能使用的组件
2、注册Vue的全局组件
2.1、注册全局组件
我们先来学习一下全局组件的注册
- 全局组件需要使用我们全局创建的app来注册组件
- 通过component方法传入组件名称、组件对象即可注册一个全局组件了
- 之后我们可以在App组件的template中直接使用这个全局组件
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Document</title>
<style>
.product {
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<!-- 1.内容一: -->
<product-item></product-item>
<!-- 2.内容二: -->
<product-item></product-item>
<!-- 3.内容三: -->
<product-item></product-item>
</div>
<!-- 组件product-item的模板 -->
<template id="item">
<div class="product">
<h2>我是商品</h2>
<div>商品图片</div>
<div>商品价格: <span>¥9.9</span></div>
<p>商品描述信息, 9.9秒杀</p>
</div>
</template>
<script src="../lib/vue.js"></script>
<script>
/*
1.通过app.component(组件名称, 组件的对象)
2.在App组件的模板中, 可以直接使用product-item的组件
*/
// 1.组件: App组件(根组件)
const App = {}
// 2.创建app
const app = Vue.createApp(App)
// 3.注册一个全局组件
// product-item全局组件
app.component("product-item", {
template: "#item" // 这里也可以使用模板字符串
})
// 2.挂载app
app.mount("#app")
</script>
</body>
</html>2.2、全局组件的逻辑
当然我们组件本身也可以有自己的代码逻辑比如自己的data、computed、methods等等
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Document</title>
<style>
.product {
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<home-nav></home-nav>
<!--这种名字不能解析html不区分大小写这个标签会被解析为homenav导致该组件不能被正确解析-->
<!--<HomeNav></HomeNav>-->
<product-item></product-item>
<product-item></product-item>
<product-item></product-item>
<h2>{{message}}</h2>
</div>
<template id="nav">
<h2>我是应用程序的导航</h2>
</template>
<template id="product">
<div class="product">
<h2>{{ title }}</h2>
<p>商品描述, 限时折扣, 赶紧抢购</p>
<p>价格: {{ price }}</p>
<button @click="favarItem">收藏</button>
</div>
</template>
<script src="../lib/vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data() {
return {
message: "Hello Vue"
}
},
})
// 2.注册全局组件
app.component("product-item", {
template: "#product",
data() {
return {
title: "我是商品Item",
price: 9.9
}
},
methods: {
favarItem() {
console.log("收藏了当前的item")
}
}
})
app.component("HomeNav", {
template: "#nav"
})
// 2.挂载app
app.mount("#app")
</script>
</body>
</html>2.3、组件的名称
在通过app.component注册一个组件的时候第一个参数是组件的名称定义组件名的方式有两种
- 方式一使用kebab-case短横线分割符
- 当使用 kebab-case (短横线分隔命名) 定义一个组件时你也必须在引用这个自定义元素时使用 kebab-case例如 <my-component-name>
- 方式二使用PascalCase驼峰标识符
- 当使用 PascalCase (首字母大写命名) 定义一个组件时你在引用这个自定义元素时两种命名法都可以使用。
- 也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Document</title>
<style>
.product {
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<!-- <home-nav></home-nav> -->
<HomeNav></HomeNav>
<home-nav></home-nav>
<product-item></product-item>
<product-item></product-item>
<product-item></product-item>
</div>
<template id="nav">
<div>---------------------nav start ------------------------</div>
<h2>我是应用程序的导航</h2>
<product-item></product-item>
<div>---------------------nav end ------------------------</div>
</template>
<template id="product">
<div class="product">
<h2>{{ title }}</h2>
<p>商品描述, 限时折扣, 赶紧抢购</p>
<p>价格: {{ price }}</p>
<button @click="favarItem">收藏</button>
</div>
</template>
<script src="../lib/vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data() {
return {
message: "Hello Vue"
}
},
})
// 2.注册全局组件
// 全局组件的特点: 一旦注册成功后, 可以在任意其他组件的template中使用
app.component("product-item", {
template: "#product",
data() {
return {
title: "我是商品Item",
price: 9.9
}
},
methods: {
favarItem() {
console.log("收藏了当前的item")
}
}
})
app.component("HomeNav", {
template: "#nav"
})
// 2.挂载app
app.mount("#app")
</script>
</body>
</html>
3、注册Vue的局部组件
全局组件往往是在应用程序一开始就会全局组件完成那么就意味着如果某些组件我们并没有用到也会一起被注册
- 比如我们注册了三个全局组件ComponentA、ComponentB、ComponentC
- 在开发中我们只使用了ComponentA、ComponentB如果ComponentC没有用到但是我们依然在全局进行了注册那么就意味着类似于webpack这种打包工具在打包我们的项目时我们依然会对其进行打包
- 这样最终打包出的JavaScript包就会有关于ComponentC的内容用户在下载对应的JavaScript时也会增加包的大小
所以在开发中我们通常使用组件的时候采用的都是局部注册
- 局部注册是在我们需要使用到的组件中通过components属性选项来进行注册
- 比如之前的App组件中我们有data、computed、methods等选项了事实上还可以有一个components选项
- 该components选项对应的是一个对象对象中的键值对是 组件的名称: 组件对象
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Document</title>
<style>
.product {
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<home-nav></home-nav>
<product-item></product-item>
<product-item></product-item>
<product-item></product-item>
</div>
<template id="product">
<div class="product">
<h2>{{ title }}</h2>
<p>商品描述, 限时折扣, 赶紧抢购</p>
<p>价格: {{ price }}</p>
<button>收藏</button>
</div>
</template>
<template id="nav">
<div>-------------------- nav start ---------------</div>
<h1>我是home-nav的组件</h1>
<product-item></product-item>
<div>-------------------- nav end ---------------</div>
</template>
<script src="../lib/vue.js"></script>
<script>
// 1.创建app
const ProductItem = {
template: "#product",
data() {
return {
title: "我是product的title",
price: 9.9
}
}
}
// 1.1.组件打算在哪里被使用
const app = Vue.createApp({
// components: option api
components: {
ProductItem,
HomeNav: {
template: "#nav",
components: {
ProductItem
}
}
},
// data: option api
data() {
return {
message: "Hello Vue"
}
}
})
// 2.挂载app
app.mount("#app")
</script>
</body>
</html>