生命周期: 
beforeCreate:el 和 data 并未初始化 (此方法不常用) 
created:完成了 data 数据的初始化,el的初始化未完成。用来发送ajax

beforeMount:(执行此方法时已经完成了 el 和 data 初始化 (已经赋予了对应的值)) 
渲染DOM之前先确认下是否有要编译的根元素(有无el属性),有才继续确认是否具有模板属性template,如果有模版属性,则会用template的值替换掉HTML中的结构,template模版中只能有一个根元素(而且不能是文本); 
mounted:(执行此方法时代表已经挂载结束了) 
把编译好的数据挂载到DOM元素上,最后渲染成真实的DOM元素;真实DOM已经渲染完成,可以操作DOM了

beforeUpdate:当页面依赖的数据更改之后触发(此时DOM结构还没有重新加载) 
updated:DOM结构重新加载之后触发

调用vm.$destroy()之后触发下面两个事件: 
beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。(可在此处清除定时器,清除事件绑定) 
destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。(意义不大)

获取数据

vue中给我们提供了一个created函数,在实例创建完成后会被立即调用。方法中的this指向的也是vue的实例

let vm=new Vue({
el:'#app',
created(){
//实例创建完成后会立即执行created方法
this->vm这个实例
},
data:{
msg:''
}
});

Promise详解与axios的使用

promise:解决回调问题,存在三个状态(成功、失败、等待) 
Promise是一个类,new Promise时可传递一个函数,在new 的时候就调用传递进来的函数,而且会给函数默认传递两个参数(都是函数数据类型的)

  • 第一个参数为成功后要执行的方法
  • 第二个参数为失败后要执行的方法

Promise的实例都有一个then方法:then方法中有两个参数(成功执行的函数,失败执行的函数)

let a=new Promise((resolve,reject)=>{
let a=1,b=3;
if(a<b){
//条件满足时我们让resolve执行并传入需要的参数
resolve('条件满足');
//resolve执行时then方法中的第一个参数(函数)就会执行
}else{
//条件不满足时我们让reject执行
reject('条件不满足');
//reject执行时,then方法中的第二个参数(函数)就会执行
}
})
a.then((res)=>{
//我们在promise中规定什么时候执行resolve,此方法就什么时候执行,res为执行resolve时传递的参数
console.log(res);//条件满足
},(err)=>{
//我们在promise中规定什么时候执行reject,此方法就什么时候执行,err为执行reject时传递的参数
console.log(err);
})

axios就是基于Promise进行封装的:使用方法如下 
先引入axios:

 <script src="axios.js"></script>
<script>
//使用axios:axios调用get方法后会返回Promise的一个实例,可以直接用then方法
axios.get('json/1.json').then((res)=>{
//axios成功后会执行的方法中的传递的参数为一个对象,如果要获取到需要的数据,需要用res.data;
console.log(res.data);
},(err)=>{
console.log(err);
})
</script>

Vue 中的生命周期和钩子函数的更多相关文章

  1. vue学习之生命周期和钩子函数

    参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...

  2. Vue笔记:生命周期和钩子函数

    前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...

  3. Vue实例的生命周期(钩子函数)

    Vue实例的生命钩子总共有10个 先上官方图: 下面时一个vue实例定义钩子函数的例子: var app=new Vue({ el:'#app', beforeCreate:function(){ c ...

  4. vue生命周期、钩子函数

    https://segmentfault.com/a/1190000011381906    详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 ...

  5. vue教程2-01 vue生命周期、钩子函数

    vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. Vue(3)- 安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用

    一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...

  7. Vue 3 --安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用

    一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...

  8. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  9. vue学习(五)生命周期 的钩子函数

    生命周期的钩子函数 主要有以下几种 beforeCreate created beforeMount mounted beforeUpdate updated activated deactivate ...

随机推荐

  1. [转]spring的ParameterMethodNameResolver

    例1: ParameterMethodNameResolver,这个可以根据请求的参数来确定一个需要调用的方法.例如,http://www.sf.net/index.view?testParam=te ...

  2. [转][Navicat for MySQL系列]Navicat如何使用(二)

    上一篇经验已经建立了数据连接,这篇我介绍一下Navicat for MySQL的“增删改查”功能是如何操作的. 工具/原料 Navicat for MySQL 10.1.7 数据库操作(基本) 1 远 ...

  3. Codeforces Round #345 (Div. 2) A. Joysticks dp

    A. Joysticks 题目连接: http://www.codeforces.com/contest/651/problem/A Description Friends are going to ...

  4. 8VC Venture Cup 2016 - Final Round (Div. 2 Edition)B. sland Puzzle 水题

    B. sland Puzzle 题目连接: http://www.codeforces.com/contest/635/problem/B Description A remote island ch ...

  5. HDU 4630 No Pain No Game(2013多校3 1010题 离线处理+树状数组求最值)

    No Pain No Game Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  6. Delphi 实现多线程编程的线程类 TThread

    http://blog.csdn.net/henreash/article/details/3183119 Delphi中有一个线程类TThread是用来实现多线程编程的,这个绝大多数Delphi书藉 ...

  7. realloc 用法

    #include <stdio.h> #include <stdlib.h> #include <string> int main() { char * p_cha ...

  8. Web API使用记录系列(四)OAuth授权与身份校验

    呼,开干第四篇,基于OWIN搭建OAuth认证授权服务器与接口身份校验. OAuth包含授权码模式.密码模式.客户端模式和简化模式,这里我们文章记录的是密码模式和客户端模式. 目录 引用安装 授权处理 ...

  9. 深入学习 History 对象管理浏览器会话历史

    History对象允许我们操作浏览器会话历史,即加载当前页面的标签页窗口或frame窗口的访问历史.之前有同学咨询我如何实现拦截用户跳转页面并强制用户返回首页后重新请求页面,于是有了本篇博客的主题,本 ...

  10. Python 学习建议(个人愚见)

    前言 本科毕业已经5年+,一直在做iOS开发. 工作方面:从刚入门的小菜鸟码农,后面到BAT里混过两年,到现在带10个人的Team Leader,收入尚可. 生活状态:已婚,儿子刚满1岁,有一定存款, ...