Vue学习：组件化

人处理问题的方式:

• 任何一个人处理信息的逻辑能力都是有限的

• 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。

• 但是，我们人有一种天生的能力，就是将问题进行拆解。

• 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。 

•  

 

认识组件化开发:

组件化也是类似的思想：

• 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展；

• 但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了；

• 如果我们将一个个功能块拆分后，就可以像搭建积木一下来搭建我们的项目；

 组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：

 

组件(Component): 定义: 用于实现局部功能的代码和资源的集合

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

4.1 组件分类

组件可以分为:非单文件组件和单文件组件

• 非单文件组件

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

  优缺点:

• 模板编写没有提示

• 没有构建过程, 无法将 ES6 转换成 ES5

• 不支持组件的 CSS

• 真正开发中几乎不用

组件注意事项:

1. 组件名称

1. 一个单词组成

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

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

1. 多个单词组成

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

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

注意:

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

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

2.关于标签名

1. 双标签:

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

注意: 不使用脚手架时,会导致后续组件不能渲染

 

组件嵌套:

一个组件中又注册其他组件,这就形成了组件嵌套

单文件组件

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

实际开发使用一般使用单文件组件

注意:

1. 单文件组件的后缀名为.vue

2. .vue文件无法直接在浏览器使用,需要借助vue的脚手架

3. 一个.vue的文件结构:

单文件组件无法直接在浏览器运行,因为我们的浏览器无法直接使用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

 

注意：

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

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

查看使用的镜像:

npm get registry

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

vue inspect > output.js

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

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

注意:

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

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

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

重启项目

 

4.3 单文件组件

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

Person.vue

 在src/App.vue组件中注册Person组件,并使用Person组件

使用npm run serve启动运行

4.4 ref特殊属性

虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 ref 属性：

 

ref 是一个特殊的 attribute，和 v-for 章节中提到的 key 类似。它允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。

访问引用:

挂载结束后引用都会被暴露在 this.$refs 之上：

组件上的 ref

ref引用也可以被用在一个子组件上。这种情况下引用中获得的值是组件实例：

如果一个子组件使用的是选项式 API ，被引用的组件实例和该子组件的 this 完全一致，这意味着父组件对子组件的每一个属性和方法都有完全的访问权。这使得在父组件和子组件之间创建紧密耦合的实现细节变得很容易，当然也因此，应该只在绝对需要时才使用组件引用。大多数情况下，你应该首先使用标准的 props 和 emit 接口来实现父子组件交互。

expose 选项可以用于限制对子组件实例的访问：

在上面这个例子中，父组件通过模板引用访问到子组件实例后，仅能访问 name。