9.05 Day46---Vue文件的组成、Vue语法 & 指令、MVVM设计模式、Vue组件的生命周期和钩子函数

.......................

href ，src，id，class等等都是元素的属性

什么是动态Attribute

有一些特殊的属性可以绑定一个布尔值来改变属性的取值

属性名与属性值一样的

checked=’checked’

selected=’selected’

readonly=’readonly’

disabled=’disabled’

...........................................

7.v-if 控制元素的显示和隐藏, 绑定一个布尔变量

布尔值为false, 会直接将元素从dom树中移除

8.v-show 控制元素的显示和隐藏, 绑定一个布尔变量

布尔值为false, 不会将元素从dom树中移除, 而是添加一个style=’display: none’实现元素隐藏, 元素依然在dom树中

9.v-for 用于遍历数组进行插值

MVVM设计模式

Vue 框架使用的是mvvm设计模式

M: model  (数据模型)

V: view    (视图)

VM: vm    (虚拟dom)

 

Vue组件的生命周期和钩子函数

一共有8个钩子函数

这些函数不同于定义在methods里面的函数 (自己定义, 自己调用, 函数名自定义)

钩子函数有一下特点

1. 函数名不能自定义, 必须使用官方规定的函数名
2. 程序员只需定义, 无序调用, 因为在程序运行期间, vue会自动调用

写生命周期钩子函数的目的是什么?

为了在某个阶段执行一些你想要执行的操作

一个vue文件就是一个vue组件对象

每个vue组件对象都拥有自己独立的生命周期

1. beforeCreate(创建前)：在此生命周期函数执行的时候，data和methods中的数据都还没有初始化。
   2、created(创建后)：在此生命周期函数中，data和methods都已经被初始化好了，如果要调用 methods中的方法，或者操作data中的数 据，最早只能在created中操作。
   3、beforeMount(挂载前)：在此生命周期函数执行的时候，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时页面还是旧的。
   4、mounted(挂载后)：此时页面和内存中都是最新的数据，这个钩子函数是最早可以操作dom节点的地方。
   5、beforeUpdate(更新前)：此时页面中显示的数据还是旧的，但是data中的数据是最新的，且页面并未和最新的数据同步。
   6、updated(更新后)：此时页面显示数据和最新的data数据同步。
   7、beforeDestroy(销毁前)：当执行该生命周期函数的时候，实例身上所有的data，所有的methods以及过滤器…等都处于可用状态，并没有真正执行销毁。
   8、destroyed(销毁后)：此时组件已经被完全销毁，实例中的所有的数据、方法、属性、过滤器…等都已经不可用了

为什么mounted是最常用的?

因为此时数据和视图都已经出现了

一般会mounted函数中干什么?

1. 在mounted函数中获取上一个页面传过来的数据
2. 在mounted函数中发起ajax请求后端拿取数据
3. ......