目录
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个重要成员
- data函数用于注册全局变量 (注意 return{} 不能少)
- methods 对象, 用于注册全局函数
- computed 对象, 用于注册全局计算属性
函数和计算属性的区别
他们的相同点是
- 都是函数
- 都可以访问data中注册的全局变量, 但是要使用this
他们的区别是
- 函数定义在methods中, 计算属性定义在computed中
- 在使用 {{}} 插值的时候,
{{ 函数() }} 函数的后面需要加 () 让函数执行, 然后得到返回值, 然后将返回值做为文本插入在div中
{{ 计算属性 }} 计算属性后面不需要加 () 执行, 因为它在运行时已经不是一个函数, 而是一个计算好的属性
- 计算属性的性能优于函数
- 计算属性会在操作的变量的值发生改变的时候, 立即重新计算一次!
函数是每次调用都重新计算
Vue语法 & 指令
1.{{ 表达式 }} 文本插值
表达式可以是以下内容
- 定义在data函数中的变量
- 定义在methods中的函数的返回值
- 定义在computed中的函数的返回值
- 定义在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里面的函数 (自己定义, 自己调用, 函数名自定义)
钩子函数有一下特点
- 函数名不能自定义, 必须使用官方规定的函数名
- 程序员只需定义, 无序调用, 因为在程序运行期间, vue会自动调用
写生命周期钩子函数的目的是什么?
为了在某个阶段执行一些你想要执行的操作
一个vue文件就是一个vue组件对象
每个vue组件对象都拥有自己独立的生命周期
- 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函数中干什么?
- 在mounted函数中获取上一个页面传过来的数据
- 在mounted函数中发起ajax请求后端拿取数据
- ......