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

目录

Vue文件的组成

Vue语法 & 指令

MVVM设计模式

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

---

Vue文件的组成

vue文件不是html文件

它有3部分组成

1.模板template区域, 写html代码, template标签内只能有一个根标签 (可以嵌套子标签, 但不能有兄弟标签)

<template>

<div>

</div>

</template>

2.脚本script区域, 写JavaScript代码

<script>

export default {

  

}

</script>

3.样式style区域, 写css代码

<style>

</style>

错误 (组件的模板中有多个根标签)

App.vue是主组件 启动项目后访问的首页就是它

export default {} // 导出当前vue对象

里面有3个重要成员

1. data函数用于注册全局变量 (注意 return{} 不能少)
2. methods 对象, 用于注册全局函数
3. computed 对象, 用于注册全局计算属性

       

函数和计算属性的区别

他们的相同点是

1. 都是函数
2. 都可以访问data中注册的全局变量, 但是要使用this

他们的区别是

1. 函数定义在methods中, 计算属性定义在computed中
2. 在使用 {{}} 插值的时候,

 {{ 函数() }}      函数的后面需要加 () 让函数执行, 然后得到返回值, 然后将返回值做为文本插入在div中

 {{ 计算属性 }}   计算属性后面不需要加 () 执行, 因为它在运行时已经不是一个函数, 而是一个计算好的属性

1. 计算属性的性能优于函数
2. 计算属性会在操作的变量的值发生改变的时候, 立即重新计算一次!

   函数是每次调用都重新计算

Vue语法 & 指令

1.{{ 表达式 }} 文本插值

表达式可以是以下内容

1. 定义在data函数中的变量
2. 定义在methods中的函数的返回值
3. 定义在computed中的函数的返回值
4. 定义在props中的变量

2.v-text 文本插值

v-text作用等同于 {{ }} 语法, 但是没有 {{ }} 灵活

{{}} 是v-text的语法糖

3.v-html 原始html

v-html 作用等同于 {{ }} 语法, 不过插入的值会被当作html代码片段处理

4.v-model 绑定表单元素的value属性 (双向绑定)

5.v-on:或者@注册事件

@是v-on:的语法糖

6.v-bind:或者: 绑定动态属性Attribute

: 是 v-bind: 的语法糖

什么是Attribute

<a href=’’></a>

<img src=’’/>

<div id=’’ class=’’ >/<div>

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

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. ......