VUE-生命周期/请求数据
使用方法 --- 4个before，4个ed，创造，装载，更新，销毁
初始化阶段
beforeCreate(){} // 准备怀孕
created(){} // 怀上了 *******************************************
beforeMount(){} // 准备生
mounted(){} // 生下来了 *************************************************
运行时阶段
beforeUpdate(){} // 每天都在长大
updated(){} ************************
销毁阶段
beforeDestroy(){} // 马上 game over
destroyed(){} // game over gg ************
综上所述，会在 created 或者 mounted 中请求数据
如果必须使用dom操作，那么可以在 mounted 和 updated 中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="des">销毁</button>
<button @click="add">修改状态</button>{{ count }}
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
add () {
this.count += 1
},
des () {
this.$destroy() // 触发销毁
}
},
beforeCreate () {
console.log('创建实例之前', this.$el) // undefined
console.log('创建实例之前', this.$data) // undefined
console.log('创建实例之前', this.count) // undefined
},
created () {
console.log('创建实例成功', this.$el) // undefined
console.log('创建实例成功', this.$data) // {count: 0}
console.log('创建实例成功', this.count) // 0
},
beforeMount () {
console.log('装载之前', this.$el) // <div id="app"></div>
console.log('装载之前', this.$data) // {count: 0}
console.log('装载之前', this.count) // 0
},
mounted () {
console.log('装载之后', this.$el) // <div id="app"></div>
console.log('装载之后', this.$data) // {count: 0}
console.log('装载之后', this.count) // 0
},
beforeUpdate () {
console.log('更新之前', this.$el) // <div id="app"></div>
console.log('更新之前', this.$data) // {count: 0}
console.log('更新之前', this.count) // 1
},
updated () {
console.log('更新之后', this.$el) // <div id="app"></div>
console.log('更新之后', this.$data) // {count: 0}
console.log('更新之后', this.count) // 1
},
beforeDestroy () {
console.log('销毁之前', this.$el) // <div id="app"></div>
console.log('销毁之前', this.$data) // {count: 0}
console.log('销毁之前', this.count) // 1
},
destroyed () {
console.log('销毁之后', this.$el) // <div id="app"></div>
console.log('销毁之后', this.$data) // {count: 0}
console.log('销毁之后', this.count) // 1
}
})
</script>
</html>
AJAX请求数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li{
list-style: none;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="item of list" :key="item.userid">
{{item.username}}--{{item.age}}--{{item.sex}}
</li>
</ul>
</div>
</body>
<script src="../jquery.min.js"></script>
<script src="../vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
list:[]
},
created(){
$.ajax({
url:"http://localhost:3000/users",
success:(data)=>{
console.log(data.data)
this.list=data.data
}
})
}
})
</script>
</html>
fetch请求数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item of list" :key="item.userid">{{ item.username }}</li>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
list: []
},
created () {
fetch('http://localhost:3000/users').then(res => res.json()).then(data => {
console.log(data)
this.list = data.data
})
}
})
</script>
</html>
axios请求数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item of list" :key="item.userid">{{ item.username }}</li>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script>
new Vue({
el: '#app',
data: {
list: []
},
created () {
// $.get
axios.get('http://localhost:3000/users').then(res => {
console.log(res.data.data)
this.list = res.data.data
})
}
})
</script>
</html>
如果使用post请求：
fetch(url).then(
// 得到的是 promise 对象，前端需要的json数据，需要将其转换为json数据
// res => res.json()
function (res) { return res.json() }
).then(
// 得到的就是json对象，可以供前端直接使用
data => console.log(data)
)
``` **默认的是get的请求方式,如果为post请求呢** ```
fetch('http://****/login', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: JSON.stringify({username: '', password: ''})
}).then(function(response) {
console.log(response);
});
axios.get(url).then(res => {})
axios.post(url, {username: ''}).then(res => {})
axios({
url: '',
method: 'post',
data: {
username: ''
}
}).then(res => {})
VUE-生命周期/请求数据的更多相关文章
- Vuejs——Vue生命周期，数据，手动挂载，指令，过滤器
版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 原教程: http://cn.vuejs.org/guide/instance.html htt ...
- Vuejs——（2）Vue生命周期，数据，手动挂载，指令，过滤器
(八)传入的数据绑定 先创建一个对象(假如是obj),然后将他传入Vue实例中,作为data属性的值,那么 ①obj的值的变化,将影响Vue实例中的值的变化: ②相反一样: ③可以在Vue实例外面操纵 ...
- Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡
上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...
- 详解vue生命周期
vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...
- Vue生命周期，面试常见问题
一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...
- 深入 Vue 生命周期
深入 Vue 生命周期 这篇博客将会从下面四个常见的应用诠释组件的生命周期,以及各个生命周期应该干什么事 1.单组件的生命周期 2.父子组件的生命周期 3.兄弟组件的生命周期 4.宏mixin的生命周 ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- vue生命周期钩子
转载自:https://segmentfault.com/a/1190000008010666?utm_source=tag-newest https://segmentfault.com/a/119 ...
- Vue 生命周期方法
一.Vue 生命周期 Vue的生命周期即是实例从创建到销毁的一个过程.之前在学习Vue的时候,看过官网的教程,但是经常用到的是mounted,所以对其他生命周期方法不是很熟悉,这里有空做个总结,也方便 ...
- vue生命周期探究（二）
vue生命周期探究(二) 转载自:https://segmentfault.com/a/1190000008923105 上一章我们介绍了vue的组件生命周期和路由勾子,这一章,让我们来看看在vue- ...
随机推荐
- Delphi书籍大全【阿里云盘】
「marco cantu的Object Pascal Handbook」等文件 https://www.aliyundrive.com/s/sJtUo8ziUpV 提取码: 5tp6点击链接保存,或者 ...
- 11.25 es6
### 项目初始化 `npm init` `npm init -y` ### 安装项目依赖(包) `npm install` ### 安装 `npm install 包名 --save` `npm i ...
- 关于JUnit
目录 一.单元测试 二.在LAB中的常用方法 一.单元测试 什么是单元测试呢?单元测试就是针对最小的功能单元编写测试代码.Java程序最小的功能单元是方法,因此,对Java程序进行单元测试就是针对单个 ...
- 对Java要学东西的认识 （一点点javascript见解）
JavaScript是一种脚本语言,它采用小程序段的方式实现编程.像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程.它的基本结构形式与C.C++.VB十分类似. ...
- 前端复习之css
1.css概述 1 1.CSS3概述 2 1.问题 3 1.设置页面中所有的文本颜色为红色 4 2.设置页面中所有div的文本的颜色为蓝色 5 3.将所有的div的文本的颜色改为黄色 6 7 HTML ...
- The difference of src and href
href是Hypertext Reference的缩写,表示超文本引用.用来建立当前元素和文档之间的链接.常用的有:link.a.例如: <link href="reset.css&q ...
- beamforming源码标记
p:各阵元的声压信号矩阵 R:接收数据的自协方差矩阵 Pcbf:交叉谱矩阵
- keshe
keshe 发送方a 代码: package org.example; import cn.hutool.core.util.CharsetUtil; import cn.hutool.core.ut ...
- win10修复系统
DISM.exe /Online /Cleanup-image /Restorehealth sfc /scannow
- 关于npm audit fix无法修复问题的解决办法
这两天新建项目 使用npm install的时候一直出现这个错误,使用npm audit fix 无法修复. 查询解决办法: 可以使用淘宝镜像源,会自动修复,然后下载相关依赖包 解决方法如下: 1.使 ...