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- ...
随机推荐
- 【jmeter】请求域名解析失败，添加本地代理
jmeter HTTP请求URL中使用域名 http://xxx.xxx.xxx,异常:java.net.UnkownHostException 原因:请求域名没有被解析成功,该http请求没有通过本 ...
- spring boot2.3.0集成 thymelaf
配置pom 如果是2.x的直接配置一个starter即可 <!-- ThymeLeaf 依赖 --><dependency> <groupId>org.spri ...
- 基于redis设计的秒杀活动
FlashSale 意为 秒杀,是电子网上商城促销活动的一种形式 本项目依赖redis,使用redis的缓存以及原子操作实现秒杀活动 依赖的包 StackExchange.Redis 该包的作用类似 ...
- L0范式、L1范式、L2范式解释通俗版
L0范数是指向量中非0的元素的个数.(L0范数很难优化求解) L1范数是指向量中各个元素绝对值之和 L2范数是指向量各元素的平方和然后求平方根 L1范数可以进行特征选择,即让特征的系数变为0. L2范 ...
- redis 配置哨兵模式时出现的问题（redis 版本 6.2.5）
今天准备搭建一个 redis 集群(redis 版本 6.2.5),在这之前要先配置好哨兵模式. 但是在配置哨兵模式时出现了问题.之前没有搭建集群时(一主两从,三台虚拟机)可以顺利配置好,而搭建集群时 ...
- 基础实验之access/trunk/valn/vlanif/静态路由
实验要求 1,PC1,PC2,PC3,PC4分别属于VLAN10,20,30,40 2,PC1,PC2,PC3,PC4互通 步骤1:PC1,2,3,4分别配置IP,并在SW6,SW7分别配置网关,并 ...
- linux 离线安装jdk
系统版本:centos7.8 | jdk版本:1.8 jdk版本:jdk-8u5-linux-x64.rpm 点击下载 提取码: ud1r 检查系统是否已经有JDK,输入如下命令查看是否系统中是否已安 ...
- mysql可参考的查询
获取批量修改列为大写SQL脚本 1 SELECT 2 concat( 'alter table ', TABLE_NAME, ' change column ', COLUMN_NAME, ' ', ...
- mybatis-config.xml头信息
1 <?xml version="1.0" encoding="UTF-8" ?> 2 <!DOCTYPE configuration 3 P ...
- SQLServer 远程链接MySql数据库
第一步:安装MySQL odbc driver 在SQL SERVER所在主机上安装MYSQL ODBC Driver; 下载地址:http://dev.mysql.com/downloads/con ...