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- ...
随机推荐
- Flutter基于Mac的环境配置
1.下载Flutter SDK git clone https://github.com/flutter/flutter.git 2.配置Flutter镜像+Flutter环境变量 ( 先创建.bas ...
- oracle 实例无法启动和初始化
1 先看oracle的监听和oracle的服务是否都启动了.启动oracle监听:cmd的命令行窗口下,输入lsnrctl start,回车即启动监听.2 查看oracle的sid叫什么,比如创建数据 ...
- 排查占用cpu最高线程
- pycharm导入第三方包
- copy file from remote server to local
scp -r root@IP:/path/to/file(file path on the server) /path/to/filedestination(local path)
- C语言初级阶段4——数组2————二维数组
C语言初级阶段4--数组2----二维数组 二维数组的定义:类型说明符 数组名[数组大小] [数组大小] 第一个大小是行的大小,第二个大小是列的大小. 二维数组的初始化:{} #include< ...
- 实验一Linux系统与应用准备
实验一Linux系统与应用准备 |这个作业属于哪个课程|内容| | ---- | ---- | ---- | |这个作业属于哪个课程|2021春季Linux系统与应用 (南昌航空大学 - 信息工程学院 ...
- Javaheima20
Java 学习内容 单元测试 反射 注解 动态代理 开发好的系统中存在很多的方法,如和对这些方法的正确性进行测试 如何在程序运行时取得到Class对象,然后取获得Class中的每个成分 注解是什么,具 ...
- Object.definedProperty和Proxy的对比
Object.definedProperty和Proxy经常用来实现对象的劫持 Object.definedProperty是vue2.x拦截对象属性变化的方法,再结合订阅-发布者模式和观察者模式实现 ...
- 【组会】2023_1_6 4d mmwave
A NEW AUTOMOTIVE RADAR 4D POINT CLOUDS DETECTOR BY USING DEEP LEARNING ICASSP 2021 - 2021 IEEE Inter ...