Vue学习：组件化

Vue学习：组件化
人处理问题的方式:
- 任何一个人处理信息的逻辑能力都是有限的
- 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。
- 但是，我们人有一种天生的能力，就是将问题进行拆解。
- 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。
认识组件化开发:
组件化也是类似的思想：
- 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展；
- 但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了；
- 如果我们将一个个功能块拆分后，就可以像搭建积木一下来搭建我们的项目；
组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：
组件(Component): 定义: 用于实现局部功能的代码和资源的集合

作用: 复用编码,简化项目编程.提高运行效率

4.1 组件分类

组件可以分为:非单文件组件和单文件组件
- 非单文件组件
  
  定义: 一个文件中包含n个组件
  
  优缺点:
- 模板编写没有提示
- 没有构建过程, 无法将 ES6 转换成 ES5
- 不支持组件的 CSS
- 真正开发中几乎不用
组件注意事项:
1. 组件名称
一个单词组成

第一种写法: 首字母小写: person

第二种写法: 首字母大写: Person

多个单词组成

第一种写法(kebab-case命名):my-person

第二种写法:大驼峰命名法: MyPerson (需要vue脚手架支持)

注意:

组件名尽可能回避HTML中已有的元素名称,比如:div,h1等

可以使用name配置项指定组件在开发者工具中呈现的名字
2.关于标签名
双标签:

单标签: (需要vue脚手架支持)

注意: 不使用脚手架时,会导致后续组件不能渲染
组件嵌套:
一个组件中又注册其他组件,这就形成了组件嵌套
```
<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
</style>
<script src="./js/vue.global.js"></script>
</head>
<body>
<div id="box">
  <person></person>
  <hr/>
</div>
<script type="text/javascript" >
   const {createApp} = Vue
   const job = {
       name:'gongzuo',
       data(){
           return {
               name:'java程序员',
               salary: 8000
           }
       },
       template:`<p>岗位:{{name}}</p>
                <p>薪水:{{salary}}</p>`,
   }
   const person = {
       data(){
           return {
               name:'张三',
               age:21
           }
       },
       template:`<p>姓名:{{name}}</p>
                <p>年龄:{{age}}</p>
                <job></job>`,
       components:{
           job,
       }
   }
   var app = createApp({
       components:{
           person: person,
       },
       data(){
           return {}
       },
   }).mount("#box");
</script>
</body>
</html>
```
单文件组件

定义: 一个文件中包含1个组件

实际开发使用一般使用单文件组件
注意:
1. 单文件组件的后缀名为.vue
2. .vue文件无法直接在浏览器使用,需要借助vue的脚手架
3. 一个.vue的文件结构:
```
<template>
  
 
</template>
<script>
 //组件交互相关的js代码
</script>
 
<style>
 /*组件的样式 */
</style>
```
单文件组件无法直接在浏览器运行,因为我们的浏览器无法直接使用ES6语法以及vue文件, 那怎么才能在页面展示呢? 这就需要我们使用vue的脚手架.
4.2 使用Vue脚手架
1. Vue 脚手架是Vue官方提供的标准化开发工具(开发平台)
2. 官方文档: Vue CLI
使用vue-cli创建项目的步骤:
第一步(仅需第一次执行): 安装nodejs环境

官网下载nodejs: Download | Node.js

参考:资料/vue.js环境搭建.docx

第二步(仅需第一次执行): 全局安装@vue/cli
```
npm install -g @vue/cli
```
第三步:切换到你需要创建项目的目录,然后使用命令创建项目
```
vue create 项目名
```
启动项目
```
npm run serve
```
注意：

如果出现下载缓慢,请配置npm淘宝镜像:

npm config set registry https://registry.npm.taobao.org

查看使用的镜像:

npm get registry

Vue脚手架隐藏了所有的webpack相关的配置,若想查看具体的webpack配置,请执行

vue inspect > output.js

如果已经安装了vue/cli其他版本,运行上面命令会报错:

检查你是否安装vue/cli,只需要在命令行运行vue指令,如果不报错,则说明安装成功
注意:

在开发过程中,我们先关闭ES的语法检查:

在vue.config.js文件中添加如下配置:

lintOnSave:false,//关闭语法检查

重启项目
4.3 单文件组件

在src/components目录下创建Person.vue组件

Person.vue
```
<template>
    
    <p>姓名:{{name}}p>
    <p>年龄:{{age}}p>
template>
<script>
   //组件交互相关的js代码
   export default{
            name:'Person',
            data(){
                return {
                    name:'张三',
                    age:21
                }
            },
   }
script>
 
<style>
   /*组件的样式 */
   p{
    color:red;
   }
style>
```
在src/App.vue组件中注册Person组件,并使用Person组件
```
<template>
    <div>
        <Person></Person>
    </div>
</template>
 
<script>
import Person from './Person.vue'
export default {
    name:'App',
    data() {
        return {
            
        };
    },
    components:{
        Person,
    },
};
</script>
 
<style lang="scss" scoped>
 
</style>
```
使用npm run serve启动运行

4.4 ref特殊属性

虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 ref 属性：
```
<div ref="app">
    <Person></Person>
</div>
```
ref 是一个特殊的 attribute，和 v-for 章节中提到的 key 类似。它允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。

访问引用:

挂载结束后引用都会被暴露在 this.$refs 之上：
```
<template>
  <div ref="app">
      <Person></Person>
  </div>
</template>
 
<script>
import Person from './components/Person.vue'
export default {
  name:'App',
  data() {
      return {
          
      };
  },
  components:{
      Person,
  },
  mounted(){
    console.log(this.$refs.app);
  }
};
</script>
 
<style lang="scss" scoped>
 
</style>
```
组件上的 ref

ref引用也可以被用在一个子组件上。这种情况下引用中获得的值是组件实例：
```
<template>
  <div ref="app">
      <Person ref="p"></Person>
  </div>
</template>
 
<script>
import Person from './components/Person.vue'
export default {
  name:'App',
  data() {
      return {
          
      };
  },
  components:{
      Person,
  },
  mounted(){
    console.log(this.$refs.p.name);
  }
};
</script>
 
<style lang="scss" scoped>
 
</style>
```
如果一个子组件使用的是选项式 API ，被引用的组件实例和该子组件的 this 完全一致，这意味着父组件对子组件的每一个属性和方法都有完全的访问权。这使得在父组件和子组件之间创建紧密耦合的实现细节变得很容易，当然也因此，应该只在绝对需要时才使用组件引用。大多数情况下，你应该首先使用标准的 props 和 emit 接口来实现父子组件交互。

expose 选项可以用于限制对子组件实例的访问：
```
<template>
    
    <p>姓名:{{name}}p>
    <p>年龄:{{age}}p>
template>
<script>
   //组件交互相关的js代码
   export default{
            name:'Person',
            expose:["name"],
            data(){
                return {
                    name:'张三',
                    age:21
                }
            },
   }
script>
 
<style>
   /*组件的样式 */
   p{
    color:red;
   }
style>
```
在上面这个例子中，父组件通过模板引用访问到子组件实例后，仅能访问 name。
相关阅读:
数据结构入门4-1（串、数组）
python3 词频统计计数分析+可视化词云 jieba+wordcloud 数据分析
 小红书内测「群AI」功能；大模型技术图谱；曾鸣「看十年」智能商业演讲实录；GPT最佳实践-大白话编译版 | ShowMeAI日报
 Multi Modal Smart Diagnosis of Pulmonary Diseases
【Qt图形视图框架】自定义QGraphicsItem和QGraphicsView,实现鼠标(移动、缩放)及键盘事件、右键事件
 ps2021神经ai滤镜无法使用,ps2021没法用神经元滤镜
 安卓讲课笔记3.4 网格布局
 sklearn机器学习——day14
【Shell篇＜Ⅰ＞】——条件测试、分支、循环
 Java集合（二）
原文地址：https://blog.csdn.net/H215919719/article/details/127676316

4.1 组件分类

4.2 使用Vue脚手架

4.3 单文件组件

4.4 ref特殊属性