1. Vue中操作数组
-
在
Vue
中,修改数组中的某一项,请务必要用如下方法:push()
、pop()
、shift()
、unshift()
、splice()
、sort()
、reverse()
-
Vue
在底层包裹了数组的7
个变更方法,本质就是做了两件事:① 调用原生对应的方法对数组进行更新。 ② 更新页面。
2. 生命周期
2.1 何为生命周期
- 生命周期数,又称:生命周期函数、生命周期钩子。
- 是什么? ——
Vue
在关键时刻帮我们调用的一些特殊名称的函数。
2.2 生命周期图
- 生命周期函数的名字不可更改,但其中的具体内容,看具体需求。
- 生命周期函数中的
this
指向是vm
或 组件实例对象。
2.3 常用的钩子
-
mounted
: 发送ajax
请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】 -
beforeDestroy
: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
3. 组件化
3.1 对组件的理解
概念:应用中局部功能代码和资源的集合。
3.2 准备一个效果
展示:学校、人员 相关信息。
3.3 组件的基本使用
Vue
中使用组件的三大步骤:
-
第一步:创建组件
- 如何创建组件?—— 使用
Vue.extend(options)
方法。 - 其中的
options
和new Vue(options)
几乎一样,但也有点小区别,区别如下:- 组件配置中不能写
el
,为什么?—— 由vm
去决定服务哪个容器,组件跟着走就ok
了。 - 组件配置中
data
必须写成函数,为什么? —— 避免组件复用时产生数据的干扰。
- 组件配置中不能写
- 如何创建组件?—— 使用
-
第二步:注册组件
new Vue({...})
时,使用components
配置。 -
第三步:使用组件(编写组件标签)。
<Person> </Person>
3.4 关于组件名
开始本章节前,先要让容器变空,所有的结构都配置在template
中。
- 一个单词组成:
- 第一种写法:(首字母小写):
school
- 第二种写法:(首字母大写):
School
—— 推荐
- 第一种写法:(首字母小写):
- 多个单词组成:
- 第一种写法:
kebab-case
命名,例如:atguigu-school
- 第二种写法:
CamelCase
命名,例如:AtguiguSchool
==> 不能在容器里用,要在template
中用。
- 第一种写法:
可以使用
name
配置项,指定组件在开发者工具中的名字。
3.5 关于组件标签
第一种写法:
<组件名></组件名>
-
第二种写法:
<组件名/>
==> 不能在容器里用,要在template
中用。直接在容器里写单标签,会有这么一个
bug
:该单标签后的组件都不解析了。解决办法如下:- 给
vm
加上template
配置项,template
中可以写连续多个的单标签。 - 使用脚手架开发。
- 给
3.6 总结_组件名 _组件标签
通常情况下,我们不在容器中写任何的代码。
3.7 App组件的使用
通常使用App
组件,作为所有组件的根组件。
// 创建一个App组件
let App = Vue.extend({
components:{Person,School},
template:`
<div>
<Person></Person>
<hr>
<School></School>
</div>`
})
3.8 注册全局组件
- 若某个组件,需要在很多的地方使用,可以进行全局注册。
- 语法:
Vue.component('组件名',具体的组件)
3.9 VueComponent
组件的本质是一个构造函数,名为:
VueComponent
。VueComponent
,不是我们定义的,也不是引入了vue.js
就有的,而是Vue.extend()
生成的。-
我们只需要写
<Person></Person>
或<Person/>
,Vue
底层就会帮我们执行:new VueComponent()
。简记:定义组件是在创建
VueComponent
,编写组件标签是在new VueComponent()
。 -
关于
this
的指向:-
new Vue(options)
中,this
指向是vm
。 -
Vue.extend(options)
中:this
指向是vc
。
简记:
- 创建
vm
时,各种配置函数中的this
就是vm
。 - 创建组件时,各种配置函数中的
this
就是vc
。
-
备注:
vc
是一个小型的vm
,但与vm
也有点小不同,例如:vm
可配置el
,而vc
不能配置。