第4章-Vue.js 交互及实例的生命周期
一、学习目标
- 了解实例生命周期的过程
- 理解钩子函数的作用
- 掌握Vue.js过滤器的使用方法 (重点)
- 能够使用网络请求进行前后端交互 （重点、难点）
二、交互的基本概念
2.1、前端和后端的概念
说明：任何一个应用程序都有前端和后端
- 前端：客户端，就是浏览器
- 后端：服务器
2.2、前后端交互原理
2.3、交互的应用场景
- 从后端获取一些数据，将其进行展示或计算
- 将用户在页面中提交的数据发送给后端
三、Vue.js交互
3.1、Vue.js交互
- Vue.js交互需使用 vue-resource.js库，下载地址：https://cdnjs.com/libraries/vue-resource
- Vue.js 交互借助于$http 完成
- 语法：使用 promise 语法规范
- 注意的是：导入vue-resource时，先引入 vue.js，在引入vue-resource.js，不然会报错。
3.2、常用交互类型
- get 类型
- post 类型
- jsonp 类型
3.3、get 类型语法
语法：this.$http.get('url',{params:{key1:val1,key2:val2}}).then( function(res){处理请求成功的回调函数，res：请求成功时返回的数据},function(res){处理请求失败的回调函数，res：请求失败时返回的数据});
<body>
<div id="box">
<button @click="fn">按钮</button>
</div>
<script src="/static/js/vue.js"></script>
<script src="/static/js/vue-resource.js"></script>
<script>
var vm = new Vue({
el: "#box",
data: {},
methods: {
fn: function(){
this.$http.get('/home',{params:{pk:20}}).then(function(res){
//res参数: 请求成功时返回的数据对象
console.log(res); //通过这个res可以查看
this.pk = res.data;
},function(res){
//res参数：请求失败返回的数据对象
console.log(res.data);
}
)
}
}
});
</script>
</body>
get类型
3.4、post 类型语法
语法：this.$http.post('url',{a:2,b:2},{emulateJSON:true}).then(function(res){处理请求成功的情况},function(res){处理请求失败的情况})
<body>
<div id="box">
<button @click="fn">按钮</button>
</div>
<script src="/static/js/vue.js"></script>
<script src="/static/js/vue-resource.js"></script>
<script>
var vm = new Vue({
el: "#box",
data: {},
methods: {
fn: function(){
this.$http.post('home/',{a:2,b:2},{emulateJSON:true}).then(
// 参数传递：{参数1：值1，参数2：值2....}
//{emulateJSON:true} 模拟json数据格式，将参数传递过去
function(res){
console.log(res.data);
},function(res){
console.log(res.status);
}
)
}
}
});
</script>
</body>
post类型
3.5、jsonp类型语法
语法：this.$http.jsonp('url',{a:2,b:2},{emulateJSON:true}).then(function(res){处理请求成功的情况},function(res){处理请求失败的情况})
<body>
<div id="box">
<button @click="fn">按钮</button>
</div>
<script src="/static/js/vue.js"></script>
<script src="/static/js/vue-resource.js"></script>
<script>
var vm = new Vue({
el: "#box",
data: {},
methods: {
fn: function(){
this.$http.jsonp('home/',{a:2,b:2},{emulateJSON:true}).then(
// 参数传递：{参数1：值1，参数2：值2....}
//{emulateJSON:true} 模拟json数据格式，将参数传递过去
function(res){
console.log(res.data);
},function(res){
console.log(res.status);
}
)
}
}
});
</script>
</body>
jsonp
小结：
语法：使用promis语法规范
常见交互类型：get、post、jsonp类型
四、过滤器
4.1、 过滤器作用和定义
作用：在不改变数据的情况下，输出前端需要的格式数据
过滤器的定义方法：
Vue.filter('过滤器名称',function(val){
return val + 4;
})
4.2、过滤器的调用方法和注意事项
调用方法：
{{ msg | 过滤器名陈 }}
注意事项：
- 定义过滤器，必须放在Vue实例化前面
- 在没有冲突的前提下，过滤器可以串联
<body>
<div id="box">
<!--过滤器的串联：过滤器在没有冲突的前提下，是可以进行串联使用的 -->
<h1>{{ name | hello | money }}</h1>
</div>
<script src="js/vue.js"></script>
<script>
//定义过滤器
//位置：创建实例之前
/*
Vue.filter('过滤器名陈',function(val){
1.val: 需要处理的值;
2.逻辑代码;
3.return 处理后的数据;
})
*/
//过滤器的调用：
// {{ 数据 | 过滤器名称 }}
Vue.filter("hello",function(val){
return "hello" + val;
});
Vue.filter("money",function(val){
return "￥￥￥￥" + val;
});
var vm = new Vue({
el: "#box",
data: {
name: "shuaigaogao"
}
});
</script>
</body>
过滤器
小结：
过滤器作用：在不改变数据的情况下，输出前端需要的格式数据
五、实例的生命周期
5.1、 实例的生命周期以及生命周期钩子？
生命周期：实例在被创建前经过一系列的初始化的过程，叫 生命周期
生命周期钩子： 在生命周期中被自动调用的函数 叫做 生命周期钩子，生命周期钩子的用途： 为我们提供执行自定义 逻辑的机会。
5.2、钩子函数有哪些
生命周期：
- create(创建)：beforeCreate(进行数据加载 data，数据 undefined)、created(data，数据 加载完成) 说明：页面刚生成的时候需要用到这个钩子函数
- mount(挂载)：beforeMount、mounted 说明: 页面需要在触发的情况下使用下。
- update(更新)：beforeUpdate、updated 说明: 页面更新的时候 使用
- destroy(销毁)：beforeDestroy、destroy 说明：页面销毁的时候使用
我们通过代码来看看：
<body>
<div id="box">
<!--
实例的生命周期：实例在从创建到销毁的过程
钩子函数：在实例的生命周期中会自动调用一些函数，这些函数就是钩子函数；
作用：我们可以利用钩子函数，来定义自己需要的一些逻辑
生命周期：
create(创建)：beforeCreate、created
mount(挂载)：beforeMount、mounted
update(更新)：beforeUpdate、updated
destory(销毁)：beforeDestory、destory
-->
<h1>{{ msg }}</h1>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: "#box",
data: {
msg: "hello"
},
//钩子函数书写的位置，和data，methods等配置项同级
beforeCreate: function(){
console.group('beforeCreate------------------');
console.log('el:'+ this.$el); //获取el对象，实例自带的一个属性
console.log('data:'+ this.$data);
console.log('msg:'+ this.msg);
// el、data、msg三者都没有创建
},
created: function(){
console.group('created------------------');
console.log('el:'+ this.$el);
console.log('data:'+ this.$data);
console.log('msg:'+ this.msg);
//el没有创建，data和msg创建了
},
beforeMount: function(){
console.group('beforeMount------------------');
console.log('el:'+ this.$el);
console.log('data:'+ this.$data);
console.log('msg:'+ this.msg);
//el并没有被真正的创建出来，而是进行一个占位，data和msg创建
},
mounted: function(){
console.group('mounted------------------');
console.log('el:'+ this.$el);
console.log('data:'+ this.$data);
console.log('msg:'+ this.msg);
//el已经替换成了真实的数据，而是进行一个占位，data和msg创建
},
//el 是设置挂载 el: "selector" 用来将容器和数据进行关联的，这个过程又叫挂载
beforeUpdate: function(){
console.group('beforeUpdate------------------');
console.log('el:'+ this.$el);
console.log('data:'+ this.$data);
console.log('msg:'+ this.msg);
},
updated: function(){
console.group('updated------------------');
console.log('el:'+ this.$el);
console.log('data:'+ this.$data);
console.log('msg:'+ this.msg);
},
//数据更新后，这两个方法会执行，vm.msg="hello world"
beforeDestroy: function(){
console.group('beforeDestroy------------------');
console.log('el:'+ this.$el);
console.log('data:'+ this.$data);
console.log('msg:'+ this.msg);
},
destroyed: function(){
console.group('destroyed------------------');
console.log('el:'+ this.$el);
console.log('data:'+ this.$data);
console.log('msg:'+ this.msg);
}
//destroy 在实例销毁的时候执行
// 实例销毁后，其身上所有的数据和方法都会销毁，不再生效
});
</script>
</body>
实例生命周期
如图：
小结：
实例生命周期：实例在被创建前经过的一系列的初始化过程叫生命周期。
生命周期钩子的用途：为我们提供执行自定义逻辑的机会。
第4章-Vue.js 交互及实例的生命周期的更多相关文章
- 第5章-Vue.js交互及生命周期练习
一.学习目标 使用网络请求进行前后端交互 (重点) 理解钩子函数的作用 (难点) 掌握Vue.js过滤器的使用方法 了解Vue.js事件的深入用法 (重点) 二.仿写留言板 2.1.实现" ...
- Vue学习1：实例及生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.JS快速上手（组件生命周期）
一.什么是组件 组成网页独立功能基本单元(片段), 复用.维护.性能, Vue.js中的组件就是一个Vue的实例,Vue中的组件包含data/methods/computed. 一个Vue.js的应用 ...
- Vue.js 1.x 和 2.x 实例的生命周期
在Vue.js中,在实例化Vue之前,它们都是以HTML的文本形式存在文本编辑器中.当实例化后将经历创建.编译.销毁三个主要阶段. 以下是Vue.js 1.x 实例的生命周期图示: Vue.js 1 ...
- Vue.js-07：第七章 - Vue 实例的生命周期
一.前言 在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...
- 从零开始学 Web 之 Vue.js（三）Vue实例的生命周期
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
- 浅析vue实例的生命周期（生命周期钩子）
“每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...
- python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
随机推荐
- ubuntu docker 安装
1.安装环境 Ubuntu16.04 安装 升级docker .docker-compose.docker-machine Docker 有两个版本 docker-ce 社区版和docker-ee企业 ...
- arcgis10.2怎么把地理坐标系转化为投影坐标系（平面，米制坐标） arcmap 10.2 从 WGS_1984 转 Beijing_1954
方法一:在Arcmap中转换:从 WGS_1984 转 Beijing_19541.加载要转换的数据,右下角为经纬度2.点击视图——数据框属性——坐标系统3.导入或选择正确的坐标系(如选:Beijin ...
- Python 数据图表工具的比较
Python 的科学栈相当成熟,各种应用场景都有相关的模块,包括机器学习和数据分析.数据可视化是发现数据和展示结果的重要一环,只不过过去以来,相对于 R 这样的工具,发展还是落后一些. 幸运的是,过去 ...
- Dijkstra 最短路径算法 秒懂详解
想必大家一定会Floyd了吧,Floyd只要暴力的三个for就可以出来,代码好背,也好理解,但缺点就是时间复杂度高是O(n³). 于是今天就给大家带来一种时间复杂度是O(n²),的算法:Dijkstr ...
- Python语言基础
一.Python简介 Python是跨平台动态语言 特点:优雅.明确.简单 适用:web网站和网络服务:系统工具和脚步:包装其他语言开发的模块 不适用:贴近硬件(首选C):移动开发:IOS/Andro ...
- 使用C和C++实现“电梯”的区别
C 面向过程: 该电梯不允许未卜先知,故程序需逐条处理乘客请求并更新当前各变量状态. 如何获得最短时间:是否立即响应请求,计算出不同决策下的总时间,并进行比较,然后选择最短时间 ...
- java锁有哪些类（转）
转载来源:http://www.cnblogs.com/lxmyhappy/p/7380073.html 1.Java都有哪些锁? 公平锁/非公平锁 可重入锁 独享锁/共享锁 互斥锁/读写锁 乐观锁/ ...
- lintcode-507-摆动排序 II
507-摆动排序 II 给你一个数组nums,将它重排列如下形式 nums[0] < nums[1] > nums[2] < nums[3].... 注意事项 你可以认为每个输入都有 ...
- 【Nginx】配置说明
#定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为当前主机的CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug ...
- set集合,深浅拷贝以及部分知识点补充
目录: 1.基础数据类型补充 2.set集合 3.深浅拷贝 一,基础数据类型补充 字符串的基本操作 li = ["李李嘉诚", "麻花藤", "⻩黄海 ...