vue.js语法基础（三）

这是vue学习笔记之一，按照自己的思路和理解记得，所以有点乱，如果有疑义或问题的话，欢迎在下方提问相应问题留言~

MVVM模式

MVP模式
M 模型层
V 视图
P 控制器 presenter
MVVM模式
M 模型层
V 视图
VM 中间层数据层 Viewmodel 包含 Dom listener、Data bindings

生命周期钩子

在Vue实例被创建的初始化过程中，也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。在某个时间点会自动执行的函数
比如create钩子可以用来在一个实例被创建之后执行代码
new Vue({
data:{
a:1;
},
created:function(){
//this指向本实例
console.log(this.a);
}
})

还有一些其他的钩子，比如mounted updated destroyed 在实例生命周期的不同阶段被调用。
不定义在methods方法中
生命周期中钩子的this上下文指向调用他的Vue实例。
beforCreate -> created -> beforeMount （页面渲染前的一瞬间）->mounted （页面渲染完成之后）-> （当$destroy()方法被执行之后才会开始执行）beforeDestroy（销毁执行之前）-> destroy（销毁完成之后）（当数据改变的时候才会被执行）beforeUpdate（更新被执行之前）-> updated（更新被执行完成之后）；

生命周期函数mounted中写AJAX请求

Ajax在首页中动态的获取组件中的内容
import axios from ‘axios’ 引入axios
///
methods:{
gethomeinfor(){
axios.get(‘/api/index.json’) // 调用方法访问json文件 ，by the way 数据都应该放在工程static文件夹下，因为只有static文件夹下才会被打开到，在static文件夹下新建mock文件夹存放数据
.then(this.gethomeinfosucc) .then表示一执行完上面语句就马上执行this.gethomeinfosucc函数
}
gethomeinfosucc(res){ 数据获取成功就是res
console.log(res); 打印res
}
}
mounted（）{ 生命周期钩子mounted中写如下函数，页面挂在好了之后执行该函数，该函数定义在methods中
this.gethomeinfor();
}