动力节点老杜Vue笔记第三章 Vue组件化

最新推荐文章于 2024-07-08 10:04:44 发布

逗逗逗逗666

最新推荐文章于 2024-07-08 10:04:44 发布

阅读量203

点赞数

分类专栏： Java学习教程前端系列文章标签： vue.js 笔记 javascript 前端 java

本文链接：https://blog.csdn.net/assdfgdfgjhtdo/article/details/130217344

版权

本文详细介绍了Vue的组件化开发，讲解了组件的概念、创建、注册和使用，深入探讨了VueComponent与Vue的区别，以及Vue.extend()的作用。此外，文章还涵盖了单文件组件、Vue CLI的安装与使用、props配置、组件间通信、混入（mixins）、插件（plugins）配置、局部样式（scoped）以及如何利用本地存储和事件总线改进组件通信。最后，通过BugList案例实战，演示了组件化开发的实践应用。

摘要由CSDN通过智能技术生成

3 Vue组件化

3.1 什么是组件

传统方式开发的应用

一个网页通常包括三部分：结构（HTML）、样式（CSS）、交互（JavaScript）

传统应用存在的问题：

关系纵横交织，复杂，牵一发动全身，不利于维护。
代码虽然复用，但复用率不高。
组件化方式开发的应用

使用组件化方式开发解决了以上的两个问题：

每一个组件都有独立的js，独立的css，这些独立的js和css只供当前组件使用，不存在纵横交错。更加便于维护。
代码复用性增强。组件不仅让js css复用了，HTML代码片段也复用了（因为要使用组件直接引入组件即可）。
什么是组件？
组件：实现应用中局部功能的代码和资源的集合。凡是采用组件方式开发的应用都可以称为组件化应用。
模块：一个大的js文件按照模块化拆分规则进行拆分，生成多个js文件，每一个js文件叫做模块。凡是采用模块方式开发的应用都可以称为模块化应用。
任何一个组件中都可以包含这些资源：HTML CSS JS 图片声音视频等。从这个角度也可以说明组件是可以包括模块的。
组件的划分粒度很重要，粒度太粗会影响复用性。为了让复用性更强，Vue的组件也支持父子组件嵌套使用。

子组件由父组件来管理，父组件由父组件的父组件管理。在Vue中根组件就是vm。因此每一个组件也是一个Vue实例。

3.2 组件的创建、注册和使用

 <!DOCTYPE html**>**  
2. **<html** lang="en"**>**  
3. **<head>**  
4.     **<meta** charset="UTF-8"**>**  
5.     **<title>**组件的创建注册和使用**</title>**  
6.     **<script** src="../js/vue.js"**></script>**  
7. **</head>**  
8. **<body>**  
9.     **<div** id="app"**>**  
10.         **<h1>**{
   {
   msg}}**</h1>**  
11.         <!-- 3.使用组件 -->  
12.         **<userlist></userlist>**  
13.         **<userlist></userlist>**  
14.         **<userlogin></userlogin>**  
15.         **<userlogin></userlogin>**  
16.     **</div>**  
17.     **<script>**  
18.         // 1.创建组件  
19.         const userListComponent = Vue.extend({
     
20.             template : `  
21.                 **<ul>**  
22.                     **<li** v-for="(user,index) of users" :key="user.id"**>**  
23.                         {
   {
   index}},{
   {
   user.name}}  
24.                     **</li>**  
25.                 **</ul>**      
26.             `,  
27.             data(){
     
28.                 return {
     
29.                     users : [  
30.                         {
   id:'001', name:'jack'},  
31.                         {
   id:'002', name:'lucy'},  
32.                         {
   id:'003', name:'james'}  
33.                     ]  
34.                 }  
35.             }  
36.         })  
37.   
38.         // 1.创建组件  
39.         const userLoginComponent = Vue.extend({
     
40.             template : `  
41.             **<div>**  
42.             **<h3>**用户登录**</h3>**  
43.             **<form** @submit.prevent="login"**>**  
44.             账号：**<input** type="text" v-model="username"**><br><br>**  
45.             密码：**<input** type="password" v-model="password"**><br><br>**  
46.             **<button>**登录**</button>**  
47.             **</form>**  
48.             **</div>**  
49.             `,  
50.             data(){
     
51.                 return {
     
52.                     username : 'admin',  
53.                     password

最低0.47元/天解锁文章

逗逗逗逗666

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动力节点老杜Vue笔记第三章 Vue组件化

click、keydown、keyup，这些事件都是内置事件。Vue也支持给组件添加自定义事件。包括两种方式：第一种方式：直接在组件标签上绑定事件第二种方式：通过代码来给组件绑定事件所有从父向子传递函数的位置，都可以修改为自定义事件方式。主要改造子向父传数据的功能。
复制链接

扫一扫