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- ...
随机推荐
- MQTT服务器搭建——Liunx安装mosquitto，并设置用户密码
一.安装 1.下载mosquitto安装包 地址:http://mosquitto.org/files/source/ 2.安装依赖包 yum install gcc gcc-c++ libstdc+ ...
- docker知识篇
什么是Docker?Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VMs(虚拟机).b ...
- PR2022(Premiere Pro 2022)Mac/win最新中文版
Adobe Premiere Pro 2022 Mac/win是用于专业级别的视频编辑软件,一个基于时间轴的视频处理工具,具有许多用于生成高端视频的不同功能.Adobe Premiere Pro最重要 ...
- web后端之表单传值
第一种 第二种 第三种陪置web.xml文件
- c# 连接SQLite 查询数据 写入txt文本
using Newtonsoft.Json.Linq; using System; using System.Data.SQLite; using System.IO; namespace @publ ...
- C# DevExpress gridview 字符串尾部带数字如何排序
我们经常遇到这样的问题,字符串尾部带数字,如何正确排序; 首先设置GridView ,Columns 的相关列,设置属性中,SortMode为Custom 解决思路,把字符串尾缀数字,分离出来.先比较 ...
- 10.7 2020 实验 5：OpenFlow 协议分析和 OpenDaylight 安装
一.实验目的 回顾 JDK 安装配置,了解 OpenDaylight 控制的安装,以及 Mininet 如何连接:通过抓包获取 OpenFlow 协议,验证 OpenFlow 协议和版本,了解协议内容 ...
- nohup /root/runoob.sh > runoob.log 2>&1 &
nohup /root/runoob.sh > runoob.log 2>&1 &****
- Visual Studio 2019 专业版许可证过期解决办法
Visual Studio 2019 许可证过期,登录微软账户也不行,一直提示点击更新许可证,"无法下载许可证,请检查你的网络连接或代理设置" 解决方案:找到VS2019安装目录, ...
- mac安装mysql5.6默认密码修改
前言: 每次安装mysql都被烦的要死,痛并思痛记下此篇文章: 参考: https://blog.csdn.net/u010377383/article/details/82688250 https: ...