使用方法 --- 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-生命周期/请求数据的更多相关文章

  1. Vuejs——Vue生命周期,数据,手动挂载,指令,过滤器

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   原教程: http://cn.vuejs.org/guide/instance.html htt ...

  2. Vuejs——(2)Vue生命周期,数据,手动挂载,指令,过滤器

    (八)传入的数据绑定 先创建一个对象(假如是obj),然后将他传入Vue实例中,作为data属性的值,那么 ①obj的值的变化,将影响Vue实例中的值的变化: ②相反一样: ③可以在Vue实例外面操纵 ...

  3. Vue系列(二):发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

    上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...

  4. 详解vue生命周期

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

  5. Vue生命周期,面试常见问题

    一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...

  6. 深入 Vue 生命周期

    深入 Vue 生命周期 这篇博客将会从下面四个常见的应用诠释组件的生命周期,以及各个生命周期应该干什么事 1.单组件的生命周期 2.父子组件的生命周期 3.兄弟组件的生命周期 4.宏mixin的生命周 ...

  7. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  8. vue生命周期钩子

    转载自:https://segmentfault.com/a/1190000008010666?utm_source=tag-newest https://segmentfault.com/a/119 ...

  9. Vue 生命周期方法

    一.Vue 生命周期 Vue的生命周期即是实例从创建到销毁的一个过程.之前在学习Vue的时候,看过官网的教程,但是经常用到的是mounted,所以对其他生命周期方法不是很熟悉,这里有空做个总结,也方便 ...

  10. vue生命周期探究(二)

    vue生命周期探究(二) 转载自:https://segmentfault.com/a/1190000008923105 上一章我们介绍了vue的组件生命周期和路由勾子,这一章,让我们来看看在vue- ...

随机推荐

  1. 笔记:map函数方法映射

    ------------恢复内容开始------------ map函数可以对后端接口返回一个数组 map存在一个参数时: map存在三个参数时: 语法: array.map(function(cur ...

  2. pycharm的安装与使用

    官网下载最新版本,然后用激活码,激活,注意是专业版. 方法找到后更新在这里. 进入软件之后创建新的文件夹,可以自定义,建议自定义在系统盘以外, 1.新建文件略过 2.ctrl + 鼠标中键, 调节字体 ...

  3. JetPack Compose 入门还得是官方

    官方写的真不错! 和那些所谓"教程"比真的简单高效不罗嗦! 所以还得是官方! 使用 Jetpack Compose 更快地打造更出色的应用 https://developer.an ...

  4. lua按某些键排序的方法

    function sort(list, ...) local opts = {...}; local len = #opts; return table.sort(list, function(a, ...

  5. Spring系列之类路径扫描和注册组件-8

    目录 类路径扫描和注册组件 `@Component` 使用元注释和组合注释 自动检测类和注册 Bean 定义 使用过滤器自定义扫描 在组件中定义 Bean 元数据 命名自动检测到的组件 为自动检测的组 ...

  6. latex常用的宏包(转载)

    页面与标题式样 geometry 利用 geometry 可以很方便的设置页面的大小.由于可以自动居中排放页面,自动计算并平衡页面各部分如页眉.页脚.左右边空等的大小,因此只需给出很少的信息就能得到满 ...

  7. js实现指定dom节点滚动到可视窗口

    const rollDom = document.getElementById('domId') // 获取想要滚动的dom节点 rollDom.scrollIntoView({ block: 'ce ...

  8. jsp第6个作业—jdbc

    UsersDao.java package a; import java.sql.Connection; import java.sql.PreparedStatement; import java. ...

  9. DNS解析原理(www.baidu.com)

    QueryDns,py程序运行问题解决 关于远程访问数据库问题 这个我用NAVICAT或者是python程序连接都连不上他那个数据库(可能是数据库设定的权限没有开启?) 这个程序真的跑不起来,考虑自己 ...

  10. 利用shell脚本提高访问GitHub速度

    Github由于做了域名限制,所以访问比较慢,编写了个脚本达到做本地域名解析提高GitHub的访问速度 #!/usr/bin/env bash # 该脚本用来提升github的访问速度 ROOT_UI ...