一、学习目标

了解实例生命周期的过程
理解钩子函数的作用
掌握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 ...

随机推荐

eclipse启动一闪而退
eclipse启动一闪而退打开eclipse,启动画面一闪而过退出. 解决方法: 以下每一步结束都重启eclipse一下,看能不能正常启动. 1. 在C:/WINDOWS/system32 系统文件 ...
大前端全栈CSS3移动端开发
作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正本节课学习视频来源:https://ww ...
Codeforces Round #613 Div.1 D.Kingdom and its Cities 贪心+虚树
题目链接:http://codeforces.com/contest/613/problem/D 题意概述: 给出一棵树,每次询问一些点,计算最少删除几个点可以让询问的点两两不连通,无解输出-1.保证 ...
第13章学习shell script
由于博客园中dollar符号有别的意义,所以文中的dollar符号使用￥表示第一个script [root@localhost script]# cat -n sh01.sh #!/bin/bash ...
解释Spring中IOC, DI, AOP
oc就是控制翻转或是依赖注入.通俗的讲就是如果在什么地方需要一个对象,你自己不用去通过new 生成你需要的对象,而是通过spring的bean工厂为你长生这样一个对象.aop就是面向切面的编程.比如说 ...
View 渲染
在Spring MVC 中,controllers不负责具体的页面渲染,仅仅是调用业务逻辑并返回model数据给view层,至于view层具体怎么展现,由专门的view层具体负责,这就是MVC模式,业 ...
转从红帽、GitHub和Docker看开源商业模式的进阶
从红帽.GitHub和Docker看开源商业模式的进阶发表于2014-12-16 10:26| 7594次阅读| 来源http://stratechery.com/| 0 条评论| 作者Ben Th ...
bash编程2
bash基础编程前言:条件测试语法有两种书写模式,一种时[expression] ,另外一种是[[exprssion]] ,为了在书写条件测试的过程中,不让大家将两种格式互相混淆,那么在这里只讲一种 ...
1029C语言文法的理解
<程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→< ...
第二周：Scrum Meeting
一.站立会议顾名思义,站立会议即是在敏捷开发的冲刺阶段,为了更好地平衡团队成员的“交流”和“集中注意力”之间的矛盾.通过每日例会,即团队成员通过面对面的交流,并且其中大多数团队成员站着对会议进行讨论 ...

第4章-Vue.js 交互及实例的生命周期